<template>
  <div class="vue-component">
    <h2>Tests</h2>

    <!-- Modal -->
    <ul class="record_actions">
      <li>
        <button class="btn btn-create" @click="modal1.showModal = true">
          {{ $t("action.show_modal") }}
        </button>
      </li>
      <li>
        <button class="btn btn-create" @click="modal2.showModal = true">
          Ouvrir une seconde modale
        </button>
      </li>
    </ul>

    <teleport to="body">
      <modal
        v-if="modal1.showModal"
        :modal-dialog-class="modal1.modalDialogClass"
        @close="modal1.showModal = false"
      >
        <template #header>
          <h2 class="modal-title">Le titre de ma modale</h2>
        </template>
        <template #body>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
            luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar
            porta, enim ex posuere lacus, in pulvinar lectus magna in odio.
            Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut
            vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget
            viverra. Morbi dictum placerat suscipit.
          </p>
          <p>
            Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id
            enim ut sem pretium interdum consectetur eu quam. Vestibulum ante
            ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            curae; Etiam posuere erat eget augue finibus luctus. Maecenas
            auctor, tortor non luctus ultrices, neque neque porttitor ex, nec
            lacinia lorem ligula et elit. Sed tempor nulla vitae lorem
            sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium.
            Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit
            dignissim.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
            luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar
            porta, enim ex posuere lacus, in pulvinar lectus magna in odio.
            Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut
            vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget
            viverra. Morbi dictum placerat suscipit.
          </p>
          <p>
            Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id
            enim ut sem pretium interdum consectetur eu quam. Vestibulum ante
            ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            curae; Etiam posuere erat eget augue finibus luctus. Maecenas
            auctor, tortor non luctus ultrices, neque neque porttitor ex, nec
            lacinia lorem ligula et elit. Sed tempor nulla vitae lorem
            sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium.
            Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit
            dignissim.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
            luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar
            porta, enim ex posuere lacus, in pulvinar lectus magna in odio.
            Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut
            vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget
            viverra. Morbi dictum placerat suscipit.
          </p>
          <p>
            Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id
            enim ut sem pretium interdum consectetur eu quam. Vestibulum ante
            ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            curae; Etiam posuere erat eget augue finibus luctus. Maecenas
            auctor, tortor non luctus ultrices, neque neque porttitor ex, nec
            lacinia lorem ligula et elit. Sed tempor nulla vitae lorem
            sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium.
            Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit
            dignissim.
          </p>
        </template>
        <template #footer>
          <button
            class="btn btn-create"
            @click="
              modal1.showModal = false;
              modal2.showModal = true;
            "
          >
            {{ $t("action.next") }}
          </button>
        </template>
      </modal>
    </teleport>

    <teleport to="body">
      <modal
        v-if="modal2.showModal"
        :modal-dialog-class="modal2.modalDialogClass"
        @close="modal2.showModal = false"
      >
        <template #header>
          <h2 class="modal-title">Une autre modale</h2>
        </template>
        <template #body>
          <p>modal 2</p>
        </template>
        <template #footer>
          <button class="btn btn-create" @click="modal2.showModal = false">
            {{ $t("action.save") }}
          </button>
        </template>
      </modal>
    </teleport>
    <!-- END Modal -->
  </div>
</template>

<script>
import Modal from "ChillMainAssets/vuejs/_components/Modal";

export default {
  name: "Test",
  components: {
    Modal,
  },
  data() {
    return {
      modal1: {
        showModal: false,
        modalDialogClass: "modal-dialog-scrollable modal-xl", // modal-lg modal-md modal-sm
      },
      modal2: {
        showModal: false,
        modalDialogClass: "modal-dialog-centered modal-sm", // modal-lg modal-md modal-sm
      },
    };
  },
  computed: {},
};
</script>
