{{define "journeys_others"}}

<!--VEHICLES-->
<div class="p-4 flex text-sm text-grey-900">
    <div class="flex-1">
        {{.IconSet.Icon "tabler-icons:car" "h-6 w-6 inline-flex mr-4"}}
        <span class=" font-bold">{{len .ViewState.vehicles}} véhicules</span> partagés disponibles ce jour là et la semaine suivante
    </div>
    <div>
    </div>
</div>
<div class="p-2">
<table class="min-w-full divide-y divide-gray-300">
    <thead>
      <tr>
        <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 md:pl-0">Véhicule</th>
        <th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold text-gray-900">Numéro</th>
        <th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold text-gray-900">Gestionnaire</th>
        <th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold text-gray-900">Lieu</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-200">
      {{range .ViewState.vehicles}}
      <tr>
        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 md:pl-0">{{.Data.name}}</td>
        <td class="whitespace-nowrap py-4 px-3 text-sm text-gray-500">{{.Data.licence_plate}}</td>
        <td class="whitespace-nowrap py-4 px-3 text-sm text-gray-500">COOPGO</td>
        <td class="whitespace-nowrap py-4 px-3 text-sm text-gray-500">{{if .Data.address}}{{.Data.address.properties.label}}{{end}}</td>
      </tr>
      {{end}}
    </tbody>
  </table>
</div>
<div class="p-4 text-center">
    <a href="/app/vehicles/"><button class="text-md px-4 py-1 bg-gray-200 text-co-blue rounded-xl">Réserver un véhicule</button></a>
</div>

{{end}}