{{define "content"}}
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
    <h1 class="text-2xl font-semibold text-gray-900">Déplacements</h1>
    <div class="sm:flex sm:items-center">
        <div class="sm:flex-auto">
          <p class="mt-2 text-sm text-gray-700"></p>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
          <a href="/app/journeys/groups_covoiturage">
            <button type="button"
              class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 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">
              {{$.IconSet.Icon "hero:outline/plus-circle" "h-5 w-5 mr-3"}}
              Gestion des groupes
            </button>
          </a>
        </div>
      </div>

    <div class="mt-8 max-w-3xl mx-auto grid grid-cols-1 gap-6 lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-3">
        <div class="space-y-6 lg:col-start-1 lg:col-span-1">
            <div class="bg-white shadow sm:rounded-2xl">
                <h2 id="timeline-title" class="text-lg font-medium text-gray-900 p-4 sm:px-6">Chercher une solution</h2>
                <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
                    <form method="GET">

                        {{ $departureField := "departure" }}
                        {{ $departureLabel := "Départ" }}
                        {{ $departure := .ViewState.departure }}
                        {{ template "address_autocomplete" dict "FieldName" $departureField "FieldLabel" $departureLabel "Address" $departure }}

                        {{ $destinationField := "destination" }}
                        {{ $destinationLabel := "Destination" }}
                        {{ $destination := .ViewState.destination }}
                        {{ template "address_autocomplete" dict "FieldName" $destinationField "FieldLabel" $destinationLabel "Address" $destination }}
                        

                        <div class="py-4 grid grid-cols-2">
                            <div class="lg:col-span-1">
                                <label for="departuredate" class="block text-sm font-medium text-gray-700">Le</label>
                                <div class="mt-1">
                                    <input type="date" id="departuredate" name="departuredate" value="{{.ViewState.departuredate}}"
                                        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="departuretime" class="block text-sm font-medium text-gray-700">A</label>
                                <div class="mt-1">
                                    <input type="time" id="departuretime" name="departuretime" value="{{.ViewState.departuretime}}"
                                        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>

                        <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>
            </div>
        </div>
        <div class="lg:col-start-2 lg:col-span-2">
            {{if .ViewState.searched}}
            <section aria-labelledby="results-title" x-data="{
                tab: 'all',
                to(event) {
                    this.tab = event.target.value
                }
            }">
            <div class="bg-white shadow sm:rounded-lg sm:overflow-hidden">
                <div class="divide-y divide-gray-200">
                    <div>
                        <div class="sm:hidden">
                            <label for="tabs" class="sr-only">Select a tab</label>
                            <select id="tabs" name="tabs" @change="to"
                                class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                                <option value="all">Tous modes</option>

                                <option value="carpool">Covoiturage</option>

                                <option value="public-transit">Transports</option>

                                <!-- <option value="active-modes">Modes actifs</option> -->

                                <option value="others">Autres</option>
                            </select>
                        </div>
                        <div class="hidden sm:block">
                            <div class="border-b border-gray-200 pl-4">
                                <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                                    <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
                                    <a href="#" @click="tab = 'all'"
                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                        :class="tab == 'all' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                        Tous modes </a>

                                    <a href="#" @click="tab = 'carpool'"
                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                        :class="tab == 'carpool' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                        Covoiturage </a>

                                    <a href="#" @click="tab = 'public-transit'"
                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                        :class="tab == 'public-transit' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                        Transports </a>

                                    <!-- <a href="#" @click="tab = 'active-modes'"
                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                        :class="tab == 'active-modes' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                        Modes actifs </a> -->

                                    <a href="#" @click="tab = 'others'"
                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                        :class="tab == 'others' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                        Autres </a>
                                </nav>
                            </div>
                        </div>
                    </div>

                    <div x-show="tab == 'all'">{{template "journeys_all" .}}</div>
                    <div x-show="tab == 'carpool'">{{template "journeys_carpool" .}}</div>
                    <div x-show="tab == 'public-transit'">{{template "journeys_public_transit" .}}</div>
                    <div x-show="tab == 'others'">{{template "journeys_others" .}}</div>
                </div>
            </div>
        </section>
            {{end}}
        </div>
    </div>
 
</div>
{{end}}