{{define "vehicles_list"}}
<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-center text-sm font-semibold text-gray-900 sm:pl-6">
                Disponibilité
            </th>
            <th scope="col"
                class="py-3.5 pl-4 pr-3 text-center text-sm font-semibold text-gray-900 sm:pl-6">
                Numéro (Immat / Bicycode)
            </th>
            <th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900 sm:pl-6">
                Type
            </th>
            <th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900 sm:pl-6">
                Modèle
            </th>
            <th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900 sm:pl-6">
                Lieu
            </th>
            <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                <span class="sr-only">Actions</span>
            </th>
        </tr>
    </thead>
    <tbody class="divide-y divide-gray-200 bg-white">
        {{range .ViewState.vehicles}}
        <tr>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6 text-center">
                <div class="flex flex-col px-6">
                {{if not .Bookings}}
                <span class="mt-1 p-1 bg-co-green text-white text-xs font-bold rounded-xl">
                    Disponible
                </span>
                {{else}}
                    {{$hasActive := false}}
                    {{$hasUpcoming := false}}
                    {{$hasRetired := false}}
                    {{range .Bookings}}
                        {{if .Data.administrator_unavailability}}
                            {{$hasRetired = true}}
                        {{else if eq .Status 0}}
                            {{$hasActive = true}}
                        {{else if eq .Status 1}}
                            {{$hasUpcoming = true}}
                        {{end}}
                    {{end}}
                    {{if $hasRetired}}
                    <span class="mt-1 p-1 bg-black text-white text-xs font-bold rounded-xl">
                        Retiré
                    </span>
                    {{end}}
                    {{if $hasActive}}
                    <span class="mt-1 p-1 bg-co-red text-white text-xs font-bold rounded-xl">
                        En prêt
                    </span>
                    {{else if $hasUpcoming}}
                    <span class="mt-1 p-1 bg-co-blue text-white text-xs font-bold rounded-xl">
                        Réservé
                    </span>
                    {{else if not $hasRetired}}
                    <span class="mt-1 p-1 bg-co-green text-white text-xs font-bold rounded-xl">
                        Disponible
                    </span>
                    {{end}}
                {{end}}
                </div>
            </td>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                <div class="text-gray-900" >{{.Data.licence_plate}}</div>
            </td>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                <div class="text-gray-900" >
                    {{.Type}}
                    {{if eq .Type "Voiture"}}
                    {{ if .Data.automatic}} (boite auto){{ end }}
                    {{end}}
                </div>
            </td>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                <div class="text-gray-900" >{{.Data.name}}</div>
            </td>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                <div class="text-gray-900" >{{if .Data.address}}{{.Data.address.properties.label}}{{end}}</div>
            </td>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                <a href="/app/vehicles-management/fleet/{{.ID}}"
                        class="text-co-blue hover:text-co-blue">Voir</a>
            </td>
        </tr>
        {{end}}
    </tbody>
</table>
{{end}}