{{define "journeys_solidarity_transport"}}

{{ if eq (len .ViewState.driver_journeys) 0}}
<p class="p-12 text-gray-500 text-center text-md">Aucun conducteur solidaire disponible pour ce trajet.</p>
{{else}}

<h3 class="p-4 text-lg">Transport solidaire</h3>
<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">
          Conducteurs disponibles
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Distance 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">
          Distance 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">
          Commentaire
      </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.driver_journeys }}
    {{if lt .DriverDistance 250}}
    {{ $driver := (index $.ViewState.solidarity_drivers .DriverId)}}

    <tr>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{ $driver.Data.first_name }} {{ $driver.Data.last_name }}</td>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{ .DriverDistance }} km</td>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{ .PassengerDistance }} km</td>
      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">{{if $driver.Data.other_properties}}{{ $driver.Data.other_properties.comment }}{{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/{{$driver.ID}}/journeys/{{.Id}}">
          Organiser
        </a>
      </td>
    </tr>
    {{end}}
    {{ end }}
  </tbody>
</table>
{{end}}
{{end}}