{{define "driver_history"}}
<div class="py-6">
  {{if .ViewState.stats}}
  <div class="py-5 text-center">
    <p class="text-lg">Trajets réalisés : {{ .ViewState.stats.bookings.count }}</p>
    <p class="text-lg">Kilomètres réalisés : {{ .ViewState.stats.bookings.km}} km</p>
  </div>
  {{end}}

  {{if .ViewState.bookings}}
  <div class="py-5">
    <h4 class="text-lg font-medium text-gray-900 mb-4 text-center">Historique des transports solidaires</h4>
    <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">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">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">Arrivée</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"></th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 bg-white">
        {{range .ViewState.bookings}}
        {{if or (eq .Status "VALIDATED") (eq .Status "WAITING_CONFIRMATION")}}
        <tr>
          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
            {{if .Journey}}
              {{timeFormat .Journey.PassengerPickupDate "02/01/2006 15:04"}}
            {{end}}
          </td>
          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
            {{if .PassengerId}}
              <a class="text-co-blue" href="/app/beneficiaries/{{.PassengerId}}">
                {{ (index $.ViewState.beneficiaries_map .PassengerId).Data.first_name }}
                {{ (index $.ViewState.beneficiaries_map .PassengerId).Data.last_name }}
              </a>
            {{end}}
          </td>
          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
            {{if .Journey}}{{if .Journey.PassengerPickup}}{{.Journey.PassengerPickup.Properties.label}}{{end}}{{end}}
          </td>
          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
            {{if .Journey}}{{if .Journey.PassengerDrop}}{{.Journey.PassengerDrop.Properties.label}}{{end}}{{end}}
          </td>
          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
            {{if eq .Status "VALIDATED"}}
              <span class="p-1 px-2 text-xs bg-co-green rounded-2xl">Validé</span>
            {{else if eq .Status "WAITING_CONFIRMATION"}}
              <span class="p-1 px-2 text-xs bg-gray-300 rounded-2xl">Attente confirmation</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/solidarity-transport/bookings/{{.Id}}">Voir</a>
          </td>
        </tr>
        {{end}}
        {{end}}
      </tbody>
    </table>
  </div>
  {{else}}
  <div class="py-5">
    <p class="text-sm text-gray-500 text-center">Aucun transport solidaire enregistré</p>
  </div>
  {{end}}
</div>
{{end}}