{{ define "solidarity_drivers_list" }}
<div class="sm:flex sm:items-center">
  <div class="sm:flex-auto">
    <p class="mt-2 text-sm text-gray-700"></p>
  </div>
  <div class="m-4 sm:ml-16 sm:flex-none">
    <!--<a href="/api/cache/{{.ViewState.CacheId}}/export">
      <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>-->
    <a href="/app/solidarity-transport/?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>
    <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>
<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">
    {{ range .ViewState.drivers }}
    <tr>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{ .Data.first_name }} {{ .Data.last_name }}</td>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{if .Data.address}}{{.Data.address.properties.label}}{{end}}</td>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{ .Data.phone_number }}</td>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
        {{if solidarityDriverValidatedProfile . (solidarityDocuments .ID) }}
        <span class="p-1 px-2 text-xs bg-co-green rounded-2xl">Oui</span>
        {{else}}
        <span class="p-1 px-2 text-xs bg-co-red text-white rounded-2xl">Non</span>
        {{end}}
      </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/{{.ID}}">
          Voir
        </a>
      </td>
    </tr>
    {{ end }}
  </tbody>
</table>
{{ end }}
