{{ define "booking_filters" }}
{{$tab := or .tab "carpoolService"}}

<form>

<input type="hidden" name="tab" value="{{$tab}}" />

<div class="flex flex-row justify-end items-end">

<div class="m-2">
<div>
  <label for="{{$tab}}_date_start" class="block text-sm/6 font-medium text-gray-900 dark:text-white">Dates (début / fin)</label>
  <div class="mt-2 flex">
	  <input id="{{$tab}}_date_start" type="date" name="date_start" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-co-blue" value="{{.filters.date_start}}" onchange="this.form.submit()" />
	  <input id="{{$tab}}_date_end" type="date" name="date_end" class="mx-2 block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-co-blue" value="{{.filters.date_end}}" onchange="this.form.submit()" />
  </div>
</div>
</div>

<div class="m-2">
<label for="{{$tab}}_status" class="block text-sm/6 font-medium text-gray-900 dark:text-white">Statut</label>
<div class="mt-2 grid grid-cols-1">
<select id="{{$tab}}_status" name="status" class="col-start-1 row-start-1 w-36 appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus-visible:outline-co-blue" onchange="this.form.submit()">
    <option></option>
    <option value="WAITING_DRIVER_CONFIRMATION"{{if eq .filters.status "WAITING_DRIVER_CONFIRMATION"}} selected{{end}}>Attente confirmation conducteur</option>
    <option value="CONFIRMED"{{if eq .filters.status "CONFIRMED"}} selected{{end}}>Confirmé</option>
    <option value="CANCELLED"{{if eq .filters.status "CANCELLED"}} selected{{end}}>Annulé</option>
  </select>
  <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4 dark:text-gray-400">
    <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
  </svg>
</div>
</div>

{{if $.geography_filters_enabled}}
<div class="m-2">
<label for="{{$tab}}_passenger_address_geo" class="block text-sm/6 font-medium text-gray-900 dark:text-white">Adresse passager</label>
<div class="mt-2 grid grid-cols-1">
<select id="{{$tab}}_passenger_address_geo" name="passenger_address_geo" class="col-start-1 row-start-1 w-36 appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus-visible:outline-co-blue" onchange="this.form.submit()">
    <option value="">Toutes les zones</option>
    {{range $.geography_filters_list}}
    {{$geoValue := printf "%s:%s" .layer .code}}
    <option value="{{$geoValue}}"{{if eq $.filters.passenger_address_geo $geoValue}} selected{{end}}>{{.name}}</option>
    {{end}}
  </select>
  <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4 dark:text-gray-400">
    <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
  </svg>
</div>
</div>

<div class="m-2">
<label for="{{$tab}}_departure_geo" class="block text-sm/6 font-medium text-gray-900 dark:text-white">Départ</label>
<div class="mt-2 grid grid-cols-1">
<select id="{{$tab}}_departure_geo" name="departure_geo" class="col-start-1 row-start-1 w-36 appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus-visible:outline-co-blue" onchange="this.form.submit()">
    <option value="">Toutes les zones</option>
    {{range $.geography_filters_list}}
    {{$geoValue := printf "%s:%s" .layer .code}}
    <option value="{{$geoValue}}"{{if eq $.filters.departure_geo $geoValue}} selected{{end}}>{{.name}}</option>
    {{end}}
  </select>
  <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4 dark:text-gray-400">
    <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
  </svg>
</div>
</div>

<div class="m-2">
<label for="{{$tab}}_destination_geo" class="block text-sm/6 font-medium text-gray-900 dark:text-white">Destination</label>
<div class="mt-2 grid grid-cols-1">
<select id="{{$tab}}_destination_geo" name="destination_geo" class="col-start-1 row-start-1 w-36 appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus-visible:outline-co-blue" onchange="this.form.submit()">
    <option value="">Toutes les zones</option>
    {{range $.geography_filters_list}}
    {{$geoValue := printf "%s:%s" .layer .code}}
    <option value="{{$geoValue}}"{{if eq $.filters.destination_geo $geoValue}} selected{{end}}>{{.name}}</option>
    {{end}}
  </select>
  <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4 dark:text-gray-400">
    <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
  </svg>
</div>
</div>
{{end}}

</div>

</form>
{{ end }}