{{define "beneficiary_vehicles"}}
<div class="px-4 py-6 sm:px-6">
    {{if .ViewState.bookings}}
    <h3 class="text-lg">Mises à disposition réalisées</h3>
    <ul class="my-8">
        {{range .ViewState.bookings}}
        <li class="text-sm">Du {{(timeFrom .Startdate).Format "02/01/2006"}} au {{(timeFrom .Enddate).Format "02/01/2006"}}</li>
        {{end}}
    </ul>
    {{end}}
    <h3 class="text-lg">Réserver un véhicule</h3>
    <form method="GET" action="/app/vehicles/">
        <input type="hidden" name="beneficiaryid" value="{{.ViewState.beneficiary.ID}}">
        <div class="py-4 grid grid-cols-2">
            <div class="lg:col-span-1">
                <label for="startdate" class="block text-sm font-medium text-gray-700">Du</label>
                <div class="mt-1">
                    <input type="date" id="startdate" name="startdate"
                        class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
                </div>
            </div>
            <div class="lg:col-span-1">
                <label for="enddate" class="block text-sm font-medium text-gray-700">Au</label>
                <div class="mt-1">
                    <input type="date" id="enddate" name="enddate"
                        class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-r-2xl border-l-0">
                </div>
            </div>
            
        </div>
        {{template "vehicle_type_select" .}}

        <button type="submit"
            class="rounded-2xl border border-transparent bg-co-blue px-4 py-2 my-4 mt-8 w-full text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
            Chercher
        </button>
    </form>
</div>
{{end}}