{{ define "solidarity_drivers_list" }}

<div class="sm:flex sm:items-center sm:justify-between">
  {{if $.ViewState.geography_filters_enabled}}
  <form class="flex flex-row items-end m-4">
    <input type="hidden" name="tab" value="drivers" />
    {{if $.ViewState.archived}}<input type="hidden" name="archived" value="true" />{{end}}

    <div>
      <label for="drivers_driver_address_geo" class="block text-sm/6 font-medium text-gray-900 dark:text-white">Adresse conducteur</label>
      <div class="mt-2 grid grid-cols-1">
        <select id="drivers_driver_address_geo" name="driver_address_geo" class="col-start-1 row-start-1 w-48 appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus-visible:outline-co-blue" onchange="this.form.submit()">
          <option value="">Toutes les zones</option>
          {{range $.ViewState.geography_filters_list}}
          {{$geoValue := printf "%s:%s" .layer .code}}
          <option value="{{$geoValue}}"{{if eq $.ViewState.filters.driver_address_geo $geoValue}} selected{{end}}>{{.name}}</option>
          {{end}}
        </select>
        <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4 dark:text-gray-400">
          <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
        </svg>
      </div>
    </div>
  </form>
  {{else}}
  <div class="sm:flex-auto">
    <p class="mt-2 text-sm text-gray-700"></p>
  </div>
  {{end}}

  <div class="m-4 sm:flex-none">
    <a href="/exports/solidarity-transport/drivers.xlsx?{{if $.ViewState.archived}}archived=true&{{end}}{{if $.ViewState.filters.driver_address_geo}}driver_address_geo={{$.ViewState.filters.driver_address_geo}}{{end}}">
      <button type="button"
        class="inline-flex items-center justify-center bg-white hover:bg-gray-50 border-gray-300 border px-4 py-2 text-gray-700 flex items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">
        {{$.IconSet.Icon "hero:outline/document-arrow-down" "h-5 w-5 mr-3"}}
        Exporter
      </button>
    </a>
    {{if .ViewState.archived}}
    <a href="/app/solidarity-transport/?tab=drivers">
      <button type="button"
        class="inline-flex items-center justify-center bg-white hover:bg-gray-50 border-gray-300 border px-4 py-2 text-gray-700 flex items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">
          {{$.IconSet.Icon "hero:outline/archive-box-x-mark" "h-5 w-5 mr-3"}}
            Conducteurs actifs
      </button>
    </a>
    {{else}}
    <a href="/app/solidarity-transport/?tab=drivers&archived=true">
      <button type="button"
        class="inline-flex items-center justify-center bg-white hover:bg-gray-50 border-gray-300 border px-4 py-2 text-gray-700 flex items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">
          {{$.IconSet.Icon "hero:outline/archive-box" "h-5 w-5 mr-3"}}
            Conducteurs archivés
      </button>
    </a>
    {{end}}
    <a href="/app/solidarity-transport/drivers/create">
      <button type="button"
        class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-ci-blue focus:ring-offset-2 sm:w-auto">
        {{$.IconSet.Icon "hero:outline/plus-circle" "h-5 w-5 mr-3"}}
        Ajouter un conducteur solidaire
      </button>
    </a>
  </div>
</div>
<div x-data="{
  drivers: [
    {{range $index, $driver := .ViewState.drivers}}{{if $index}},{{end}}{
      id: '{{$driver.ID}}',
      firstName: '{{ jsEscape $driver.Data.first_name }}',
      lastName: '{{ jsEscape $driver.Data.last_name }}',
      address: '{{if $driver.Data.address}}{{ jsEscape $driver.Data.address.properties.label }}{{end}}',
      phoneNumber: '{{ jsEscape $driver.Data.phone_number }}',
      validated: {{if solidarityDriverValidatedProfile $driver (solidarityDocuments $driver.ID)}}true{{else}}false{{end}}
    }{{end}}
  ],
  currentPage: 1,
  itemsPerPage: {{ if .ViewState.drivers_items_per_page }}{{ .ViewState.drivers_items_per_page }}{{ else }}10{{ end }},
  get totalPages() {
    return Math.ceil(this.drivers.length / this.itemsPerPage);
  },
  get paginatedDrivers() {
    const start = (this.currentPage - 1) * this.itemsPerPage;
    const end = start + this.itemsPerPage;
    return this.drivers.slice(start, end);
  },
  nextPage() {
    if (this.currentPage < this.totalPages) this.currentPage++;
  },
  prevPage() {
    if (this.currentPage > 1) this.currentPage--;
  },
  goToPage(page) {
    this.currentPage = page;
  }
}">

<table class="min-w-full divide-y divide-gray-300 border-gray-300 border-t-1">
  <thead class="bg-gray-50">
    <tr>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Nom
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Adresse
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Téléphone
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Profil validé
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          &nbsp;
      </th>
    </tr>
  </thead>
  <tbody class="divide-y divide-gray-200 bg-white">
    <template x-for="driver in paginatedDrivers" :key="driver.id">
      <tr>
        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6" x-text="driver.firstName + ' ' + driver.lastName"></td>
        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6" x-text="driver.address"></td>
        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6" x-text="driver.phoneNumber"></td>
        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
          <span x-show="driver.validated" class="p-1 px-2 text-xs bg-co-green rounded-2xl">Oui</span>
          <span x-show="!driver.validated" class="p-1 px-2 text-xs bg-co-red text-white rounded-2xl">Non</span>
        </td>
        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
          <a class="text-co-blue hover:text-co-blue" :href="'/app/solidarity-transport/drivers/' + driver.id">
            Voir
          </a>
        </td>
      </tr>
    </template>
  </tbody>
</table>

<!-- Pagination -->
<div class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
  <div class="flex flex-1 justify-between sm:hidden">
    <button @click="prevPage()" :disabled="currentPage === 1"
            class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
      Précédent
    </button>
    <button @click="nextPage()" :disabled="currentPage === totalPages"
            class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
      Suivant
    </button>
  </div>
  <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
    <div>
      <p class="text-sm text-gray-700">
        Affichage de
        <span class="font-medium" x-text="(currentPage - 1) * itemsPerPage + 1"></span>
        à
        <span class="font-medium" x-text="Math.min(currentPage * itemsPerPage, drivers.length)"></span>
        sur
        <span class="font-medium" x-text="drivers.length"></span>
        résultats
      </p>
    </div>
    <div>
      <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
        <button @click="prevPage()" :disabled="currentPage === 1"
                class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:opacity-50 disabled:cursor-not-allowed">
          <span class="sr-only">Précédent</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
          </svg>
        </button>
        <template x-for="page in totalPages" :key="page">
          <button @click="goToPage(page)"
                  :class="page === currentPage ? 'z-10 bg-co-blue text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-co-blue' : 'text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0'"
                  class="relative inline-flex items-center px-4 py-2 text-sm font-semibold focus:z-20"
                  x-text="page"></button>
        </template>
        <button @click="nextPage()" :disabled="currentPage === totalPages"
                class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:opacity-50 disabled:cursor-not-allowed">
          <span class="sr-only">Suivant</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
          </svg>
        </button>
      </nav>
    </div>
  </div>
</div>

</div>
{{ end }}