{{define "content"}}
<main class="py-10">
    <!-- Page header -->
    <div class="max-w-3xl mx-auto px-4 sm:px-6 md:flex md:items-center md:justify-between md:space-x-5 lg:max-w-7xl lg:px-8">
        <div class="flex items-center space-x-5">
            <div class="flex-shrink-0">
                <div class="relative">
                    <img class="h-16 w-16 rounded-co" src="/app/beneficiaries/{{.ViewState.driver.ID}}/picture" alt="">
                    <span class="absolute inset-0 shadow-inner rounded-full" aria-hidden="true"></span>
                </div>
            </div>
            <div>
                <h1 class="text-2xl font-bold text-gray-900">{{.ViewState.driver.Data.first_name}}
                    {{.ViewState.driver.Data.last_name}}</h1>
                <p class="text-sm font-medium text-gray-500">{{if .ViewState.driver.Metadata.created}}Ajouté le <time
                        datetime="2022-07-25">{{.ViewState.driver.Metadata.created}}</time> par
                    <a href="#" class="text-gray-900">Conseiller 1</a>{{end}}
                </p>
            </div>
        </div>
        <div
            class="mt-6 flex flex-col-reverse justify-stretch space-y-4 space-y-reverse sm:flex-row-reverse sm:justify-end sm:space-x-reverse sm:space-y-0 sm:space-x-3 md:mt-0 md:flex-row md:space-x-3">
            {{if not .ViewState.driver.Data.archived}}<a href="/app/solidarity-transport/drivers/{{ .ViewState.driver.ID }}/archive"><button type="button"
              class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-2xl text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Archiver</button></a>{{end}}
            {{if .ViewState.driver.Data.archived}}<a href="/app/solidarity-transport/drivers/{{ .ViewState.driver.ID }}/unarchive"><button type="button"
              class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-2xl text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Désarchiver</button></a>{{end}}
            <!-- <button type="button"
                class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-2xl text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Supprimer</button> -->
            <a href="/app/solidarity-transport/drivers/{{.ViewState.driver.ID}}/update" class="inline-flex"><button type="button"
                    class="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Modifier</button></a>
        </div>
    </div>

    <div class="mt-8 max-w-3xl mx-auto grid grid-cols-1 gap-6 sm:px-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-2">
            <section aria-labelledby="driver-information-title">
                <div class="bg-white shadow sm:rounded-lg">
                    <div class="px-4 py-5 sm:px-6">
                        <h2 id="driver-information-title" class="text-lg leading-6 font-medium text-gray-900">
                            Informations personnelles</h2>
                        <p class="mt-1 max-w-2xl text-sm text-gray-500">Informations générales sur le conducteur solidaire.</p>
                    </div>
                    <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
                        <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Profil validé</dt>
                                <dd class="mt-1 text-sm text-gray-900">
                                  {{if solidarityDriverValidatedProfile .ViewState.driver .ViewState.documents}}
                                    <span class="p-1 px-2 text-xs bg-co-green rounded-2xl">Oui</span>
                                  {{else}}
                                    <span class="p-1 px-2 text-xs bg-co-red text-white rounded-2xl">Non</span>
                                  {{end}}
                                </dd>
                            </div>
                            {{if .ViewState.driver.Data.email}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Email</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{.ViewState.driver.Data.email}}</dd>
                            </div>
                            {{end}}
                            {{if .ViewState.driver.Data.phone_number}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Téléphone</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{.ViewState.driver.Data.phone_number}}</dd>
                            </div>
                            {{end}}
                            {{if .ViewState.driver.Data.birthdate}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Date de naissance</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{(timeFrom .ViewState.driver.Data.birthdate).Format
                                    "02/01/2006"}}</dd>
                            </div>
                            {{end}}
                            {{if and .ViewState.driver.Data.gender (ne .ViewState.driver.Data.gender "0")}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Genre</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{genderISO5218 .ViewState.driver.Data.gender}}</dd>
                            </div>
                            {{end}}
                            {{if .ViewState.driver.Data.address}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Adresse</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{.ViewState.driver.Data.address.properties.label}}</dd>
                            </div>
                            {{end}}
                            {{if .ViewState.driver.Data.file_number}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Numéro de dossier (CAF / Pole emploi)</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{.ViewState.driver.Data.file_number}}</dd>
                            </div>
                            {{end}}
                            {{range .ViewState.profile_optional_fields}}
                            {{$fieldName := .name}}
                            {{$fieldLabel := .label}}
                            {{$fieldType := .type}}
                            {{if eq .type "multicheckbox"}}
                                {{$hasValues := false}}
                                {{range .options}}
                                    {{$optionKey := printf "%s___%s" $fieldName .value}}
                                    {{if index $.ViewState.driver.Data.other_properties $optionKey}}{{$hasValues = true}}{{end}}
                                {{end}}
                                {{if $hasValues}}
                                <div class="sm:col-span-2">
                                    <dt class="text-sm font-medium text-gray-500">{{$fieldLabel}}</dt>
                                    <dd class="mt-1 text-sm text-gray-900">
                                        <div class="flex flex-wrap gap-2">
                                            {{range .options}}
                                            {{$optionKey := printf "%s___%s" $fieldName .value}}
                                            {{if index $.ViewState.driver.Data.other_properties $optionKey}}
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-200 text-gray-800">
                                                {{.label}}
                                            </span>
                                            {{end}}
                                            {{end}}
                                        </div>
                                    </dd>
                                </div>
                                {{end}}
                            {{else if eq .type "select"}}
                                {{$fieldValue := index $.ViewState.driver.Data.other_properties $fieldName}}
                                {{if and $fieldValue (ne $fieldValue "0") (ne $fieldValue "")}}
                                <div class="sm:col-span-1">
                                    <dt class="text-sm font-medium text-gray-500">{{$fieldLabel}}</dt>
                                    <dd class="mt-1 text-sm text-gray-900">
                                        {{if eq $fieldName "gender"}}
                                            {{genderISO5218 $fieldValue}}
                                        {{else}}
                                            {{range .options}}
                                                {{if eq .value $fieldValue}}{{.label}}{{end}}
                                            {{end}}
                                        {{end}}
                                    </dd>
                                </div>
                                {{end}}
                            {{else}}
                                {{$fieldValue := index $.ViewState.driver.Data.other_properties $fieldName}}
                                {{if $fieldValue}}
                                <div class="sm:col-span-1">
                                    <dt class="text-sm font-medium text-gray-500">{{$fieldLabel}}</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{$fieldValue}}</dd>
                                </div>
                                {{end}}
                            {{end}}
                            {{end}}
                        </dl>
                    </div>
                </div>
            </section>

            <section aria-labelledby="functionalities-title" x-data="{
                    tab: 'documents',
                    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="notes">Notes</option>-->

                                    <!-- <option value="journeys">Déplacements</option>

                                    <option value="vehicles">Véhicules</option>

                                    <option value="events">Dispositifs</option> -->

                                    <option value="documents">Documents</option>

                                    <option value="wallet">Compte mobilité</option>

                                    <option value="history">Historique</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 = 'notes'"
                                            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                            :class="tab == 'notes' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                            Notes </a>-->

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

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

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

                                    </nav>
                                </div>
                            </div>
                        </div>

                        <div x-show="tab == 'documents'">{{template "driver_files" .}}</div>
                        <div x-show="tab == 'wallet'">{{template "driver_wallet" .}}</div>
                        <div x-show="tab == 'history'">{{template "driver_history" .}}</div>

                    </div>
                </div>
            </section>
        </div>

        <section class="lg:col-start-3 lg:col-span-1">
        {{template "driver_availabilities" .}}
        </section>
    </div>
</main>
{{end}}