<template>
  <div
    class="modal fade user-modal__modal"
    ref="jahatModal"
    id="jahat-modal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content popUp-tab user-modal answer-modal__modal">
        <div
          class="my-profile__container answer-modal"
          style="position: relative"
        >
          <div class="my-profile pl-0">
            <div class="my-profile__main-title mb-3">
              {{ title }}
              <button
                v-if="showHeaderCloseButton"
                @click.prevent="$emit('close-modal')"
                type="button"
                class="close mr-auto ml-0 float-left"
                data-dismiss="modal"
              >
                &times;
              </button>
            </div>
            <div class="my-profile__form">
              <slot></slot>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * @vue-prop {String} [title="modal title"] - عنوان مودال
 * @vue-prop {Boolean} [showHeaderCloseButton=false] - نشان می‌دهد که آیا دکمه بستن در هدر نمایش داده شود یا خیر
 *
 * @vue-computed {Boolean} [show] - نشان می‌دهد که آیا مودال نمایش داده شود یا خیر
 */

export default {
  props: {
    title: { type: String, default: "modal title" },
    showHeaderCloseButton: { type: Boolean, default: false },
  },
};
</script>