<template>
  <div>
    <h2 id="page-heading" data-cy="PrenotazioneHeading">
      <span id="prenotazione">{{ t$('smartbookingApp.prenotazione.home.title') }}</span>
      <div class="d-flex justify-content-end">
        <button class="btn btn-info me-2" @click="handleSyncList" :disabled="isFetching">
          <font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon>
          <span>{{ t$('smartbookingApp.prenotazione.home.refreshListLabel') }}</span>
        </button>
        <router-link :to="{ name: 'PrenotazioneCreate' }" custom v-slot="{ navigate }">
          <button
            @click="navigate"
            id="jh-create-entity"
            data-cy="entityCreateButton"
            class="btn btn-primary jh-create-entity create-prenotazione"
          >
            <font-awesome-icon icon="plus"></font-awesome-icon>
            <span>{{ t$('smartbookingApp.prenotazione.home.createLabel') }}</span>
          </button>
        </router-link>
      </div>
    </h2>
    <br />
    <div class="alert alert-warning" v-if="!isFetching && prenotaziones?.length === 0">
      <span>{{ t$('smartbookingApp.prenotazione.home.notFound') }}</span>
    </div>
    <div class="table-responsive" v-if="prenotaziones?.length > 0">
      <table class="table table-striped" aria-describedby="prenotaziones">
        <thead>
          <tr>
            <th scope="col" @click="changeOrder('id')">
              <span>{{ t$('global.field.id') }}</span>
              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'id'"></jhi-sort-indicator>
            </th>
            <th scope="col" @click="changeOrder('oraInizio')">
              <span>{{ t$('smartbookingApp.prenotazione.oraInizio') }}</span>
              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'oraInizio'"></jhi-sort-indicator>
            </th>
            <th scope="col" @click="changeOrder('oraFine')">
              <span>{{ t$('smartbookingApp.prenotazione.oraFine') }}</span>
              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'oraFine'"></jhi-sort-indicator>
            </th>
            <th scope="col" @click="changeOrder('stato')">
              <span>{{ t$('smartbookingApp.prenotazione.stato') }}</span>
              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'stato'"></jhi-sort-indicator>
            </th>
            <th scope="col" @click="changeOrder('motivoEvento')">
              <span>{{ t$('smartbookingApp.prenotazione.motivoEvento') }}</span>
              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'motivoEvento'"></jhi-sort-indicator>
            </th>
            <th scope="col" @click="changeOrder('numeroPartecipanti')">
              <span>{{ t$('smartbookingApp.prenotazione.numeroPartecipanti') }}</span>
              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'numeroPartecipanti'"></jhi-sort-indicator>
            </th>
            <th scope="col" @click="changeOrder('noteUtente')">
              <span>{{ t$('smartbookingApp.prenotazione.noteUtente') }}</span>
              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'noteUtente'"></jhi-sort-indicator>
            </th>
            <th scope="col" @click="changeOrder('conferma.id')">
              <span>{{ t$('smartbookingApp.prenotazione.conferma') }}</span>
              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'conferma.id'"></jhi-sort-indicator>
            </th>
            <th scope="col" @click="changeOrder('utente.username')">
              <span>{{ t$('smartbookingApp.prenotazione.utente') }}</span>
              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'utente.username'"></jhi-sort-indicator>
            </th>
            <th scope="col" @click="changeOrder('struttura.nome')">
              <span>{{ t$('smartbookingApp.prenotazione.struttura') }}</span>
              <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'struttura.nome'"></jhi-sort-indicator>
            </th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="prenotazione in prenotaziones" :key="prenotazione.id" data-cy="entityTable">
            <td>
              <router-link :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }">{{
                prenotazione.id
              }}</router-link>
            </td>
            <td>{{ formatDateShort(prenotazione.oraInizio) || '' }}</td>
            <td>{{ formatDateShort(prenotazione.oraFine) || '' }}</td>
            <td>{{ t$('smartbookingApp.StatoPrenotazione.' + prenotazione.stato) }}</td>
            <td>{{ prenotazione.motivoEvento }}</td>
            <td>{{ prenotazione.numeroPartecipanti }}</td>
            <td>{{ prenotazione.noteUtente }}</td>
            <td>
              <div v-if="prenotazione.conferma">
                <router-link :to="{ name: 'ConfermaView', params: { confermaId: prenotazione.conferma.id } }">{{
                  prenotazione.conferma.id
                }}</router-link>
              </div>
            </td>
            <td>
              <div v-if="prenotazione.utente">
                <router-link :to="{ name: 'UtenteAppView', params: { utenteAppId: prenotazione.utente.id } }">{{
                  prenotazione.utente.username
                }}</router-link>
              </div>
            </td>
            <td>
              <div v-if="prenotazione.struttura">
                <router-link :to="{ name: 'StrutturaView', params: { strutturaId: prenotazione.struttura.id } }">{{
                  prenotazione.struttura.nome
                }}</router-link>
              </div>
            </td>
            <td class="text-end">
              <div class="btn-group">
                <router-link
                  :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }"
                  class="btn btn-info btn-sm details"
                  data-cy="entityDetailsButton"
                >
                  <font-awesome-icon icon="eye"></font-awesome-icon>
                  <span class="d-none d-md-inline">{{ t$('entity.action.view') }}</span>
                </router-link>
                <router-link
                  :to="{ name: 'PrenotazioneEdit', params: { prenotazioneId: prenotazione.id } }"
                  class="btn btn-primary btn-sm edit"
                  data-cy="entityEditButton"
                >
                  <font-awesome-icon icon="pencil-alt"></font-awesome-icon>
                  <span class="d-none d-md-inline">{{ t$('entity.action.edit') }}</span>
                </router-link>
                <b-button
                  @click="prepareRemove(prenotazione)"
                  variant="danger"
                  class="btn btn-sm"
                  data-cy="entityDeleteButton"
                  v-b-modal.removeEntity
                >
                  <font-awesome-icon icon="times"></font-awesome-icon>
                  <span class="d-none d-md-inline">{{ t$('entity.action.delete') }}</span>
                </b-button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <b-modal ref="removeEntity" id="removeEntity">
      <template #title>
        <span id="smartbookingApp.prenotazione.delete.question" data-cy="prenotazioneDeleteDialogHeading">{{
          t$('entity.delete.title')
        }}</span>
      </template>
      <div class="modal-body">
        <p id="jhi-delete-prenotazione-heading">{{ t$('smartbookingApp.prenotazione.delete.question', { id: removeId }) }}</p>
      </div>
      <template #footer>
        <div>
          <button type="button" class="btn btn-secondary" @click="closeDialog()">{{ t$('entity.action.cancel') }}</button>
          <button
            type="button"
            class="btn btn-primary"
            id="jhi-confirm-delete-prenotazione"
            data-cy="entityConfirmDeleteButton"
            @click="removePrenotazione"
          >
            {{ t$('entity.action.delete') }}
          </button>
        </div>
      </template>
    </b-modal>
    <div v-show="prenotaziones?.length > 0">
      <div class="d-flex justify-content-center">
        <jhi-item-count :page="page" :total="queryCount" :items-per-page="itemsPerPage"></jhi-item-count>
      </div>
      <div class="d-flex justify-content-center">
        <b-pagination size="md" :total-rows="totalItems" v-model="page" :per-page="itemsPerPage"></b-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./prenotazione.component.ts"></script>
