<template>
  <!-- Modal -->
  <div
    class="modal fade"
    id="list-modal"
    tabindex="-1"
    aria-labelledby="list-modal-label"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="list-modal-label">
            {{ buttonText }}
          </h5>
          <button
            type="button"
            class="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <list-form
            :selectedItem="selectedItem"
            :parentId="parentId"
            :apiName="apiName"
            @close-modal="closeModal"
            @update-list="updateList"
            @delete-item="deleteItem"
          ></list-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ["selectedItem","parentId", "apiName"],
  emits: ["update-list", "close-modal", "delete-item"],

  data() {
    return {
      fetchingData: false,
    };
  },
  computed: {
    buttonText() {
      return this.selectedItem?.id || this.selectedItem?.guid
        ? "بروزرسانی پوشه"
        : "پوشه جدید";
    },
  },
  methods: {
    closeModal() {
      this.$emit("close-modal");
    },
    updateList() {
      this.$emit("update-list");
    },
    deleteItem() {
      this.$emit("delete-item");
    },
    setTab(tab) {
      this.currentTab = tab;
    },
  },
  
};
</script>
<style scoped>
.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem auto -1rem -1rem;
}
</style>