{{define "bookings_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">
                Statut
            </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">
                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">
                Beneficiaire
            </th>
            <th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900 sm:pl-6">
                Dates
            </th>
            <th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900 sm:pl-6">
            </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.bookings}}
        <tr>
            <td class="flex-col py-4 pl-4 pr-3 text-sm sm:pl-6 text-center">
                {{if .Data.administrator_unavailability}}
                <span class="p-1 bg-black text-white text-xs font-bold rounded-xl" >
                    Retiré
                </span>
                {{else if and (eq $.ViewState.status_management "manual") (not .Deleted)}}
                    {{$manualStatus := .ManualStatus}}
                    {{range $.ViewState.status_options}}
                        {{if eq (index . "name") $manualStatus}}
                            {{if eq (index . "meta_status") "open"}}
                            <span class="p-1 px-2 text-xs bg-co-blue text-white font-bold rounded-xl">{{index . "label"}}</span>
                            {{else if eq (index . "meta_status") "active"}}
                            <span class="p-1 px-2 text-xs bg-co-green text-white font-bold rounded-xl">{{index . "label"}}</span>
                            {{else if eq (index . "meta_status") "closed"}}
                            <span class="p-1 px-2 text-xs bg-co-red text-white font-bold rounded-xl">{{index . "label"}}</span>
                            {{end}}
                        {{end}}
                    {{end}}
                {{else if .Deleted}}
                <span class="p-1 bg-black text-white text-xs font-bold rounded-xl" >
                    Annulé
                </span>
                {{else}}
                    {{if eq .Status 1 }}
                    <span class="p-1 bg-co-blue text-white text-xs font-bold rounded-xl" >
                        A venir
                    </span>
                    {{end}}
                    {{if eq .Status 0 }}
                    <span class="p-1 bg-co-green text-white text-xs font-bold rounded-xl" >
                        En cours
                    </span>
                    {{end}}
                    {{if eq .Status -1 }}
                    <span class="p-1 bg-co-red text-white text-xs font-bold rounded-xl" >
                        Terminé
                    </span>
                    {{end}}
                {{end}}
            </td>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                <div class="text-gray-900" >{{ (index $.ViewState.vehicles_map .Vehicleid).Type }}</div>
            </td>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                <div class="text-gray-900" >{{ (index $.ViewState.vehicles_map .Vehicleid).Data.licence_plate }}</div>
            </td>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                {{if .Data.administrator_unavailability}}
                <div class="text-gray-900" ></div>
                {{else}}
                <div class="text-gray-900" >
                    {{ (index $.ViewState.drivers_map .Driver).Data.first_name }}
                    {{ (index $.ViewState.drivers_map .Driver).Data.last_name }}
                </div>
                {{end}}
            </td>
            <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
                {{if .Data.administrator_unavailability}}
                <div class="text-gray-900" >Retiré du {{(timeFrom .Unavailablefrom).Format "02/01/2006"}} au {{(timeFrom .Unavailableto).Format "02/01/2006"}}</div>
                {{else}}
                <div class="text-gray-900" >
                    <div>Du {{(timeFrom .Startdate).Format "02/01/2006 à 15:04"}}</div>
                    <div>au {{(timeFrom .Enddate).Format "02/01/2006 à 15:04"}}</div>
                </div>
                {{end}}
            </td>
            <td class="py-4 pl-4 pr-3 text-sm sm:pl-6 text-center">
                {{if and (eq $.ViewState.status_management "manual") (not .Data.administrator_unavailability) (not .Deleted)}}
                    {{$manualStatus := .ManualStatus}}
                    {{$startdate := .Startdate}}
                    {{$enddate := .Enddate}}
                    {{range $.ViewState.status_options}}
                        {{if eq (index . "name") $manualStatus}}
                            {{if and (eq (index . "meta_status") "open") (isPast $startdate)}}
                            <span class="text-red-600" title="Retard : la date de début de réservation est dépassée">
                                {{$.IconSet.Icon "hero:outline/exclamation-triangle" "h-6 w-6 inline-block"}}
                            </span>
                            {{else if and (eq (index . "meta_status") "active") (isPast $enddate)}}
                            <span class="text-red-600" title="Retard : la date de fin de réservation est dépassée">
                                {{$.IconSet.Icon "hero:outline/exclamation-triangle" "h-6 w-6 inline-block"}}
                            </span>
                            {{end}}
                        {{end}}
                    {{end}}
                {{end}}
            </td>
            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                <a href="/app/vehicles-management/bookings/{{.ID}}"
                        class="text-co-blue hover:text-co-blue">Voir</a>
            </td>
        </tr>
        {{end}}
    </tbody>
</table>
{{end}}