{{define "bookings_widget"}}
<div class="col-span-1 bg-white rounded-2xl shadow divide-y divide-gray-200 flex flex-col">
    <div class="-ml-4 -mt-2 px-4 py-2 flex items-center justify-between flex-wrap sm:flex-nowrap">
        <div class="ml-4 mt-2">
            <h3 class="text-lg leading-6 font-medium text-gray-900">Prochaines réservations</h3>
        </div>
        <!-- <div class="ml-4 mt-2 flex-shrink-0">
          <button type="button" class="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Voir</button>
        </div> -->
    </div>
    <ul role="list" class="divide-y divide-gray-200 flex-1">
        {{range .}}
        {{if or (eq .Data.Deleted nil) (eq .Data.Deleted false)}}
            <li class="py-2 px-4 flex">
                <a href="/app/vehicles-management/bookings/{{.ID}}" class="flex w-full">
                <div class="ml-3">
                    
                    <p class="text-sm font-medium text-gray-900">Du {{(timeFrom .Startdate).Format "02/01"}} au {{(timeFrom .Enddate).Format "02/01"}}</p>
                </div>
            </a>
            </li>
        {{end}}
        {{end}}
    </ul>

    <a href="/app/vehicles-management/">
        <button class="w-full p-2 text-center bg-co-blue text-white rounded-b-2xl text-sm">
            Reservation des véhicules
        </button>
    </a>
</div>
{{end}}