{{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.beneficiary.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.beneficiary.Data.first_name}}
                    {{.ViewState.beneficiary.Data.last_name}}</h1>
                <p class="text-sm font-medium text-gray-500">{{if .ViewState.beneficiary.Metadata.created}}Ajouté le <time
                        datetime="2022-07-25">{{.ViewState.beneficiary.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">
            <!-- <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/beneficiaries/{{.ViewState.beneficiary.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="beneficiary-information-title">
                <div class="bg-white shadow sm:rounded-lg">
                    <div class="px-4 py-5 sm:px-6">
                        <h2 id="beneficiary-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 bénéficiaire.</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">
                            {{if .ViewState.beneficiary.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.beneficiary.Data.email}}</dd>
                            </div>
                            {{end}}
                            {{if .ViewState.beneficiary.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.beneficiary.Data.phone_number}}</dd>
                            </div>
                            {{end}}
                            {{if .ViewState.beneficiary.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.beneficiary.Data.birthdate).Format
                                    "02/01/2006"}}</dd>
                            </div>
                            {{end}}
                            {{if and .ViewState.beneficiary.Data.gender (ne .ViewState.beneficiary.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.beneficiary.Data.gender}}</dd>
                            </div>
                            {{end}}
                            {{if .ViewState.beneficiary.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.beneficiary.Data.address.properties.label}}</dd>
                            </div>
                            {{end}}
                            {{if .ViewState.beneficiary.Data.file_number}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Numéro de dossier</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{.ViewState.beneficiary.Data.file_number}}</dd>
                            </div>
                            {{end}}
                            {{if and .ViewState.beneficiary.Data.other_properties .ViewState.beneficiary.Data.other_properties.status}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Statut</dt>
                <dd class="mt-1 text-sm text-gray-900">{{.ViewState.beneficiary.Data.other_properties.status}}</dd>
                            </div>
                            {{end}}
                            {{if and .ViewState.beneficiary.Data.other_properties .ViewState.beneficiary.Data.other_properties.situation}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Situation sociale</dt>
                <dd class="mt-1 text-sm text-gray-900">{{.ViewState.beneficiary.Data.other_properties.situation}}</dd>
                            </div>
                            {{end}}
                            {{if and .ViewState.beneficiary.Data.other_properties .ViewState.beneficiary.Data.other_properties.subscription_reason}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Motif d'inscription</dt>
                <dd class="mt-1 text-sm text-gray-900">{{.ViewState.beneficiary.Data.other_properties.subscription_reason}}</dd>
                            </div>
                            {{end}}
                            {{if and .ViewState.beneficiary.Data.other_properties .ViewState.beneficiary.Data.other_properties.last_subscription_date}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Dernière adhésion</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ .ViewState.beneficiary.Data.other_properties.last_subscription_date}}</dd>
                            </div>
                            {{end}}
                            {{if and .ViewState.beneficiary.Data.other_properties .ViewState.beneficiary.Data.other_properties.comment}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Commentaire</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{.ViewState.beneficiary.Data.other_properties.comment}}</dd>
                            </div>
                            {{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>
                                </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 = 'journeys'"
                                            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                            :class="tab == 'journeys' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                            Déplacements </a>

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

                                        <a href="#" @click="tab = 'events'"
                                            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                            :class="tab == 'events' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                            Dispositifs </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 = 'organizations'"
                                            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                                            :class="tab == 'organizations' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
                                            Gestionnaires </a>

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

                        <div x-show="tab == 'documents'">{{template "beneficiary_files" .}}</div>
                        <div x-show="tab == 'notes'">{{template "beneficiary_notes" .}}</div>
                        <div x-show="tab == 'wallet'">{{template "beneficiary_wallet" .}}</div>
                        <div x-show="tab == 'organizations'">{{template "beneficiary_organizations" .}}</div>
                        <!--<div x-show="tab == 'diags'">{{template "beneficiary_diags" .}}</div>-->
                    </div>
                </div>
            </section>
        </div>

        <section aria-labelledby="timeline-title" class="lg:col-start-3 lg:col-span-1">
        {{template "beneficiary_events" .}}
        </section>
    </div>
</main>
{{end}}