{{ define "content" }}
<main class="py-10">
    <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>
                <h1 class="text-2xl font-bold text-gray-900">{{.ViewState.event.Name}}</h1>
                <p class="text-m font-medium text-gray-500">
                    {{if eq .ViewState.event.Startdate .ViewState.event.Enddate}}
                    Le {{(timeFrom .ViewState.event.Startdate).Format "02/01/2006"}}
                    {{else}}
                    Du {{(timeFrom .ViewState.event.Startdate).Format "02/01/2006"}} au {{(timeFrom .ViewState.event.Enddate).Format "02/01/2006"}}
                    {{end}}
                </p>
            </div>
        </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="event-information-title">
                <div class="bg-white shadow sm:rounded-lg">
                    <div class="px-4 py-5 sm:px-6">
                        <h2 id="event-information-title" class="text-lg leading-6 font-medium text-gray-900">Informations</h2>
                        <p class="mt-1 max-w-2xl text-sm text-gray-500">Informations sur le dispositif.</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.event.Type}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Type</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{.ViewState.event.Type}}</dd>
                            </div>
                            {{end}}
                            {{if .ViewState.group}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Structure gestionnaire</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{.ViewState.group.Data.name}}</dd>
                            </div>
                            {{end}}
                            {{if .ViewState.event.MaxSubscribers}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Total places</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{.ViewState.event.MaxSubscribers}}</dd>
                            </div>
                            {{end}}
                            {{if ne .ViewState.event.MaxSubscribers 0}}
                            <div class="sm:col-span-1">
                                <dt class="text-sm font-medium text-gray-500">Places restantes</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{.ViewState.event.RemainingSubscriptions}}</dd>
                            </div>
                            {{end}}
                            {{if .ViewState.event.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.event.Data.address.properties.label}}</dd>
                            </div>
                            {{end}}
                            {{if .ViewState.event.Description}}
                            <div class="sm:col-span-2">
                                <dt class="text-sm font-medium text-gray-500">Description</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{.ViewState.event.Description}}</dd>
                            </div>
                            {{end}}
                        </dl>
                    </div>
                </div>
            </section>
            {{ if eq (index .ViewState.event.Owners 0) .Group.ID }}
            <section aria-labelledby="subscribers-table"></section>
                <div class="bg-white shadow sm:rounded-lg">
                    <div class="px-4 py-5 sm:px-6">
                        <h2 id="event-information-title" class="text-lg leading-6 font-medium text-gray-900">Tous les inscrits</h2>
                        <a href="/app/agenda/{{.ViewState.event.ID}}/history" class="mt-1 max-w-2xl text-sm text-gray-500">Historique</a>
                    </div>
                    {{template "subscribers_table" .}}
                </div>
            </section>
            {{end}}
        </div>
        <section aria-labelledby="subscribers-title" class="lg:col-start-3 lg:col-span-1">
            <div class="bg-white px-4 py-5 shadow sm:rounded-lg sm:px-6"  x-data="{
                text: '',
                error: false,
                beneficiariesListOpen: false,
                beneficiaries: {{json .ViewState.beneficiaries}},
                filteredBeneficiaries: (text) => {
                    if(text=='') return beneficiaries
                    return this.beneficiaries.filter(b => b['data']['first_name'].includes(text) || b['data']['last_name'].includes(text))
                },
                fields: {
                    beneficiaryid: {{if .ViewState.search}}'{{.ViewState.search.beneficiary.ID}}'{{else}}null{{end}},
                },
                selectbeneficiary(beneficiary) {
                    console.log(beneficiary)
                    this.fields.beneficiaryid = beneficiary.id 
                    this.text = beneficiary.data.first_name + ' ' + beneficiary.data.last_name
                    this.beneficiariesListOpen = false
                },
                submit(event) {
                    if(!this.fields.beneficiaryid) {
                        this.error = true
                        event.preventDefault()
                    }
                    return this.formValidation.valid
                }
            }">
                <h2 id="subscribers-title" class="text-lg font-medium text-gray-900">Inscrire un bénéficiaire</h2>
                {{if gt .ViewState.event.RemainingSubscriptions 0}}
                <form class="mt-4" action="/app/agenda/{{.ViewState.event.ID}}/subscribe" method="POST"  @submit="submit">
                    <div class="relative mt-1 mb-4">
                        <input @focus="beneficiariesListOpen = true" x-model="text" id="combobox" type="text" class="w-full rounded-2xl border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-co-blue focus:outline-none focus:ring-1 focus:ring-co-blue sm:text-sm" role="combobox" aria-controls="options" aria-expanded="false">
                        
                        <button @click="beneficiariesListOpen = ! beneficiariesListOpen" type="button" class="absolute inset-y-0 right-0 flex items-center rounded-r-2xl px-2 focus:outline-none">
                          <!-- Heroicon name: solid/selector -->
                          <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                          </svg>
                        </button>
                    
                        <ul x-show="beneficiariesListOpen" class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-xl bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" id="options" role="listbox">

                          <template x-for="beneficiary in beneficiaries">
                              <li @click="selectbeneficiary(beneficiary)" class="relative cursor-default hover:bg-gray-100 select-none py-2 pl-3 pr-9 text-gray-900" id="option-0" role="option" tabindex="-1">

                              <span class="truncate" x-text="beneficiary.data.first_name"></span> <span class="truncate" x-text="beneficiary.data.last_name"></span>

                              <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-co-blue">

                              </span>
                              </li>
                          </template>
                        </ul>
                        <input type="hidden" name="subscriber" x-model="fields.beneficiaryid">
                      </div>
                      <p class="text-co-red text-xs mb-4" x-show="error">Vous devez sélectionner un bénéficiaire</p>
                      <button type="submit"
                            class="rounded-2xl border border-transparent bg-co-blue px-4 py-2 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">
                            Inscrire le bénéficiaire
                        </button>
                </form>
                {{else}}
                <p class="p-12 text-gray-500 text-center text-md">Il n'y a plus de place disponible</p>
                {{end}}
                {{if .ViewState.subscribers}}
                {{if ne (index .ViewState.event.Owners 0) .Group.ID}}
                <h2 id="subscribers-title" class="text-lg font-medium text-gray-900 mt-10">Bénéficiaires {{.Group.Data.name}} inscrits</h2>
                <div class="mt-2">
                    <ul class="p-1">
                        {{range .ViewState.event.Subscriptions}}
                        {{if eq $.Group.ID .Data.subscribed_by.group.id}}
                        <a href="/app/beneficiaries/{{.Subscriber}}">
                        <li class="inline-flex text-sm p-2"><img class="h-6 w-6 rounded-co mr-2" src="/app/beneficiaries/{{.Subscriber}}/picture"> {{ (index $.ViewState.subscribers .Subscriber).Data.first_name }} {{ (index $.ViewState.subscribers .Subscriber).Data.last_name }}</li>
                        </a>
                        {{end}}
                        {{end}}
                    </ul>
                </div>
                {{end}}
                {{end}}
            </div>
        </section>
    </div>
</main>
{{ end }}