
{{ define "carpool_bookings_list" }}
{{if eq (len .ViewState.bookings) 0}}
<div class="m-10 text-center text-gray-600">Aucun trajet déclaré</div>
{{else}}
<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">
          Conducteur
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Passager
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Départ
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Destination
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Date
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Statut
      </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.bookings}}
    <tr>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
        <a class="text-co-blue" href="/app/organized-carpool/drivers/{{.DriverId}}">
        {{ (index $.ViewState.drivers_map .DriverId).Data.first_name }} 
        {{ (index $.ViewState.drivers_map .DriverId).Data.last_name }}
        </a>
      </td>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
        <a class="text-co-blue" href="/app/beneficiaries/{{.PassengerId}}">
        {{ (index $.ViewState.passengers_map .PassengerId).Data.first_name }} 
        {{ (index $.ViewState.passengers_map .PassengerId).Data.last_name }}
        </a>
      </td>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
        {{ .Journey.PassengerPickup.Properties.label }} 
      </td>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
        {{ .Journey.PassengerDrop.Properties.label }} 
      </td>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
        {{ .Journey.PassengerPickupDate.Format "02/01/2006 15:04" }} 
      </td>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
        {{ if eq .Status "WAITING_CONFIRMATION"}}
        <span class="p-1 text-xs bg-gray-300 rounded-xl">Attente confirmation</span>
        {{ else if eq .Status "VALIDATED"}}
        <span class="p-1 text-xs bg-co-green rounded-xl">Validé</span>
        {{ else if eq .Status "CANCELLED"}}
        <span class="p-1 text-xs bg-co-red text-white rounded-xl">Annulé</span>
        {{ end }}
      </td>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
        <a class="text-co-blue" href="/app/organized-carpool/bookings/{{.Id}}">
          Voir
        </a>
      </td>
    </tr>
    {{ end }}
  </tbody>
</table>
{{end}}
{{end}}
