{% set labelwidth = 'w-48' %}
{% set p=participant %}
{% set formContainerClass = "bg-white rounded-lg shadow-lg " %}

{% macro field(context, name, label, required, type) %}
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
    <input name="{{name}}" type="{{type|default('text')}}" id="{{name}}" placeholder=" " @keyup="uuu" class="bg-white rounded-lg focus:outline-none text-gray-600 text-left placeholder-white peer py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full"  x-model="data.{{name}}" />
	<span
		class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 peer-placeholder-shown:bottom-0 peer-placeholder-shown:-top-0
        text-xs xs:text-sm peer-placeholder-shown:text-sm xs:peer-placeholder-shown:text-base peer-focus:text-xs xs:peer-focus:text-sm
        peer-focus:-top-3 peer-focus:bottom-auto "
        >{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span
	>
</label>
{% endmacro %}
{% macro textarea(context, name, label, required, type) %}
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
    <textarea name="{{name}}" rows="6" id="{{name}}" class="bg-white rounded-lg focus:outline-none text-gray-600 text-left placeholder-white peer py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full"  x-model="data.{{name}}">
    </textarea>
	<span
		class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-xs xs:text-sm"
        >{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span
	>
</label>
{% endmacro %}
{% macro select(context, name, label, required, options) %}
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" for="{{name}}">
    <select name="{{name}}" id="{{name}}" class="bg-white rounded-lg focus:outline-none text-gray-600 text-left peer py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full"  x-model="data.{{name}}">
        <option :selected="data.{{name}} === ''" value="">-- kein --</option>
        <template x-for="model in meta.{{options}}">
            <option :selected="data.{{name}} === model.id" :value="model.id" x-text="model.name"></option>
        </template>
    </select>
	<span
		class="absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-xs xs:text-sm"
        >{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span
	>
</label>
{% endmacro %}
{% macro radio(context, name, label, required, options) %}
<div>
	<span
		class="text-gray-600 text-sm"
        >{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span
	>
    <div class="grid grid-cols-2 sm:grid-cols-1 gap-2">
        <template x-for="option, index in meta.{{options}}">
            <label :for="`{{name}}-${index}`" class="block relative flex items-center">
                <input type="radio" name="{{name}}" :value="option.name" x-model="data.{{name}}" class="peer absolute invisible" :id="`{{name}}-${index}`" />
                <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span>
                <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block"></span>
                <span class="pl-8" x-text="option.name"></span>
            </label>
        </template>
    </div>
</div>
{% endmacro %}
{% macro yesno(context, name, label, required) %}
<div>
    <div class="flex flex-col space-y-1">
        <label for="{{name}}" class="block relative flex items-center">
            <input type="checkbox" name="{{name}}" x-model="data.{{name}}" class="peer absolute invisible" id="{{name}}" />
            <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
            <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-sm block"></span>
            <span class="pl-8">{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span>
        </label>
    </div>
</div>
{% endmacro %}
{% macro checkboxes(context, name, label, required, options) %}
<div>
	<span
		class="text-gray-600 flex text-sm"
        >{{label}} {% if required %} <span class="text-red-800 ml-1">*</span> {% endif %}</span
	>
    <div class="mt-2 grid gap-2">
        <template x-for="option, index in meta.{{options}}">
            <label :for="`{{name}}-${index}`" class="block relative flex items-center">
                <input type="checkbox" name="{{name}}[]" :value="option.name" x-model="data.{{name}}" class="peer absolute invisible" :id="`{{name}}-${index}`" />
                <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
                <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-sm block"></span>
                <span class="pl-8 text-sm sm:text-base" x-text="option.name"></span>
            </label>
        </template>
    </div>
</div>
{% endmacro %}
{% import _self as form %}

<div x-data="{
    data: {
        ...eventRegistration.data,
        event_id: {{__SELF__.event.id}}
    },
    meta: {
        ...eventRegistration.meta,
        submitRequest: '{{__SELF__.alias ~ '::onSubmit'}}',
    },
    ...eventRegistration.methods,
    ...eventRegistration.spreads,
}" x-init="eventRegistration.init">

    {#+++ registrationForm +++#}
    <form x-ref="form" @submit.prevent="submit" class="my-6" novalidate>
        <div x-ref="eventFormContainer" class="{{formContainerClass}}" x-show="meta.finished === false">
            {% set arrowClass = "flex flex-col md:flex-row items-center justify-center md:justify-start px-2 flex-auto md:pl-6 h-12 md:h-16 transition duration-300 relative" %}
            {% set positionClass = "flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-teal-800 text-teal-200 font-goudy transition duration-300" %}
            {% set arrowFont = "text-sm text-teal-100" %}

            <div class="sticky top-0 z-10 hidden sm:flex overflow-hidden rounded-t-lg">
                <template x-for="(slide, index) in meta.slides">
                    <a @click="slideTo($event, index)" href="#" class="{{arrowClass}}" :class="{ 'bg-emerald-500': index <= meta.active, 'bg-primary-700': index > meta.active }">
                        <svg preserveAspectRatio="none" class="h-full w-3 absolute left-0 text-emerald-500 transition duration-300" viewBox="0 0 100 100" :class="{'opacity-100': index !== 0 && index-1 <= meta.active, 'opacity-0': !(index !== 0 && index-1 <= meta.active)}">
                            <path d="M0,0 100,50 0,100" fill="currentColor"></path>
                        </svg>
                        <span class="{{positionClass}}" x-html="index+1"></span>
                        <span class="{{arrowFont}}" x-html="slide"></span>
                    </a>
                </template>
            </div>

            <div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg sm:hidden bg-primary-700 ">
                <a @click.prevent="slideTo($event, meta.active-1)" href="#" class="{{positionClass}} w-7 h-7 flex-none" :class="{'opacity-40': meta.active == 0}">
                    <svg class="{{arrowFont}} fill-current rotate-90 w-3 h-3"><use xlink:href="{{'resources/img/sprite.svg'|theme}}#chevron"></use></svg>
                </a>
                <div x-ref="mobileSlider" class="relative flex flex-no-wrap overflow-hidden snap-x snap-mandatory snap-always scroll-smooth">
                    <template x-for="(slide, index) in meta.slides">
                        <div class="flex-none w-full">
                            <div @click="slideTo($event, index)" href="#" class="{{arrowClass}}">
                                <span class="{{positionClass}}" x-html="index+1"></span>
                                <span class="{{arrowFont}}" x-html="slide"></span>
                            </div>
                        </div>
                    </template>
                </div>
                <a @click.prevent="slideTo($event, meta.active+1)" href="#" class="{{positionClass}} w-7 h-7 flex-none"  :class="{'opacity-40': meta.active == meta.slides.length - 1}">
                    <svg class="{{arrowFont}} fill-current w-3 h-3 transform -rotate-90"><use xlink:href="{{'resources/img/sprite.svg'|theme}}#chevron"></use></svg>
                </a>
            </div>

            <div class="py-4 xs:py-8">
                <div x-ref="slider" class="relative flex flex-no-wrap overflow-hidden snap-x snap-mandatory snap-always scroll-smooth">
                    {% set labelClass = "fancy-textinput size-lg dark" %}
                    {% set gliderElClass = "w-full flex-none snap-center slider-element px-3 xs:px-6" %}
                    {% set descClass = "text-sm sm_text-base text-gray-800 leading-tight mb-5" %}

                    <div class="{{gliderElClass}}">
                        <div class="{{descClass}}">Gebe hier deine Funktion an, die du auf der Veranstaltung wahrnehmen willst. Danach benötigen wir ein paar persönliche Daten von dir. </div>
                        <div class="{{descClass}}"></div>
                        <div class="grid grid-cols-2 gap-4 mt-6">
                            {{ form.select(_context, 'activity', 'Funktion', true, 'activities') }}
                            {{ form.select(_context, 'gender', 'Geschlecht', true, 'genders') }}
                            {{ form.field(_context, 'firstname', 'Vorname', true) }}
                            {{ form.field(_context, 'lastname', 'Nachname', true) }}
                            {{ form.field(_context, 'birthday', 'Geburtsdatum', true, 'date') }}
                            {{ form.field(_context, 'address', 'Addresse', true) }}
                            {{ form.field(_context, 'zip', 'PLZ', true) }}
                            {{ form.field(_context, 'location', 'Wohnort', true) }}
                            <div class="col-span-full sm:col-span-1">
                                {{ form.field(_context, 'phone', 'Telefonnummer', true, 'tel') }}
                            </div>
                            <div class="col-span-full sm:col-span-1">
                                {{ form.field(_context, 'email', 'E-Mail-Adresse', true, 'email') }}
                            </div>
                        </div>
                        {% partial __SELF__.alias ~ '::navigation' first="1" %}
                    </div>

                    <div class="{{gliderElClass}}">
                        <div class="{{descClass}}">Gebe hier deine Gruppenzugehörigkeit und weitere wichtige Infos zur Veranstaltung an.</div>
                        <div class="grid sm:grid-cols-2 gap-4 mt-6">
                            {{ form.select(_context, 'group', 'Stamm', false, 'groups') }}
                            {{ form.field(_context, 'emergency_phone', 'Notfallkontakt (Tel)', true) }}
                            {{ form.select(_context, 'agegroup', 'Stufe (zum Zeitpunkt des Lagers)', true, 'agegroups') }}
                            <template x-if="data.agegroup === 'Leiter*in'">
                            {{ form.select(_context, 'agegroup_leader', 'Stufe die du leitest', false, 'agegroups_leaders') }}
                            </template>
                            <template x-if="data.agegroup !== 'Leiter*in'">
                                <div></div>
                            </template>
                            <template x-if="data.activity === 'Orga'">
                                {{ form.radio(_context, 'vorteam', 'Möchtest du am Vorteam teilnehmen?', true, 'boolean') }}
                            </template>
                            {{ form.checkboxes(_context, 'food_preferences', 'Essgewohnheiten & Unverträglichkeiten', false, 'foodPreferences') }}
                        </div>
                        {% partial __SELF__.alias ~ '::navigation' %}
                    </div>
                    
                    <div class="{{gliderElClass}}">
                        <div class="{{descClass}}">Fast geschafft! Wenn du sonst noch etwas loswerden willst, kannst du das hier tun.</div>
                        <div class="flex flex-row items-center p-4 bg-red-100 border-2 border-red-400 rounded form-group shadow-sm relative" x-show="data.agegroup === 'Leiter*in'">
                            <div class="flex items-center justify-center w-8 h-8 mr-3 bg-red-500 rounded-full flex-none absolute sm:static top-0 -mt-4 sm:-mt-0">
                                <div class="flex items-center justify-center w-5 h-5 bg-red-100 rounded-full">
                                    <svg class="w-5 h-5 text-red-700 border-gray-400 fill-current border-5 fill-current"><use xlink:href="/themes/october-theme/resources/img/sprite.svg#exclamation"></use></svg>
                                </div>
                            </div>
                            <span class="grow text-sm font-semibold text-red-800">
                                <p>Als teilnehmende*r Leiter*in ist für die Teilnahme am BeLa ein eingereichtes Führungszeugnis ohne Einträge und eine aktive Präventionsschulung zwingend erforderlich.</p>
                                <p class="mt-2">Dies muss spätestens zu Beginn des BeLas vorliegen. Ansonsten kannst du nicht am BeLa teilnehmen.</p>
                                <p class="mt-2">Weitere Infos findest du in der  <a class="text-rose-500 hover:text-rose-900" target="_BLANK" href="https://dpsg-koeln.de/fuer-mitglieder/faqs#pravention">FAQ-Sektion der Diözese Köln zu Prävention</a>. Außerdem kannst du dich auch an deinen StaVo oder den <a class="text-rose-500 hover:text-rose-900" href="mailto:vorstand@dpsgbergischland.de">Bezirksvorstand</a> wenden.</p>
                            </span>
                        </div>
                        <div class="grid gap-4 mt-6">
                            {{ form.textarea(_context, 'misc', 'Sonstige Anmerkungen', false) }}
                            {{ form.yesno(_context, 'foto', 'Ich akzeptiere, dass vor Ort Foto-und Videoaufnahmen von mir gemacht werden dürfen.', false) }}
                            {{ form.yesno(_context, 'parent', 'Ich bin über 18 Jahre alt oder für die genannte Person erziehungsberechtigt.', true) }}
                        </div>
                        {% partial __SELF__.alias ~ '::navigation' last="1" %}
                    </div>
                </div>
            </div>
        </div>

        <div class="{{formContainerClass}} max-w-[700px] mx-auto" x-show="meta.finished === true">
            <div class="bg-white shadow-2xl ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[5rem_1fr] sm:grid-rows-[12rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10">
                <div class="bg-primary w-32 h-32 md:w-40 md:h-40 flex justify-center items-center [clip-path:circle(70%_at_30%_30%)]">
                    <svg class="w-20 h-20 md:w-24 md:h-24 text-emerald-300 relative -left-3 -top-3" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3">
                    <div class="absolute right-0 top-0 h-full flex items-center justify-end">
                        <div class="bg-primary w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]"></div>
                    </div>
                    <div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
                        <img class="w-64 h-32 object-cover" src="{{'danke/1.jpg'|media}}" />
                    </div>
                    <div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
                        <img class="w-64 h-32 object-cover" src="{{'danke/2.jpg'|media}}" />
                    </div>
                </div>
                <div class="self-end flex-grow pb-8 pl-8 pr-8 sm:pr-0 pt-6 sm:pt-0">
                    <div class="font-bold text-xl">Vielen Dank für deine Anmeldung.</div>
                    <div class="text-sm mt-4">In Kürze erhälst du eine Bestätigung per E-Mail mit weiteren Zahlungs-Infos. Eine letzte Info wird dir zeitnah vor dem Lager zugeschickt.</div>
                </div>
            </div>
        </div>
    </form>
</div>