{% set maingrid = "grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3" %}

<section class="relative rounded-xl p-5 duration-500 shadow-xl {{__SELF__.outerClass}}" x-data="form" :class="{'bg-zinc-900 border border-zinc-700': sent === false, 'bg-green-900 border border-green-700': sent === true}">

    <form @submit.prevent="submit" class="sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3" :class="{'grid': sent === false, 'hidden': sent === true}">

        <div>
          <label for="reason" class="block text-sm font-medium text-zinc-100">Grund für die Feier</label>
          <input x-model="value.reason" id="reason" name="reason" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="z.B. 18. Geburtstag">
        </div>

        <div>
          <label for="date" class="block text-sm font-medium text-zinc-100">Gewünschtes Datum</label>
          <input data-tippy-target inputmode="none" autocomplete="off" x-model="value.date" @input="onChangeDate" id="date" name="date" datepicker class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
        </div>

        <div>
          <label for="guests" class="block text-sm font-medium text-zinc-100">Anzahl Gäste (ca)</label>
          <input x-model="value.guests" id="guests" name="guests" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
        </div>

        <div>
          <label for="birthday" class="block text-sm font-medium text-zinc-100">Geburtsdatum</label>
          <input x-model="value.birthday"  autocomplete="off" inputmode="none" id="birthday" name="birthday" datepicker class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
        </div>

        <div>
          <label for="firstname" class="block text-sm font-medium text-zinc-100">Vorname</label>
          <input x-model="value.firstname" id="firstname" name="firstname" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
        </div>

        <div>
          <label for="lastname" class="block text-sm font-medium text-zinc-100">Nachname</label>
          <input x-model="value.lastname" id="lastname" name="lastname" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
        </div>

        <div>
          <label for="address" class="block text-sm font-medium text-zinc-100">Straße, Hausnr.</label>
          <input x-model="value.address" id="address" name="address" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
        </div>

        <div>
          <label for="zip" class="block text-sm font-medium text-zinc-100">PLZ</label>
          <input x-model="value.zip" id="zip" name="zip" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
        </div>

        <div>
          <label for="location" class="block text-sm font-medium text-zinc-100">Ort</label>
          <input x-model="value.location" id="location" name="location" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
        </div>

        <div>
          <label for="phone" class="block text-sm font-medium text-zinc-100">Telefonnummer</label>
          <input x-model="value.phone" id="phone" name="phone" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
        </div>

        <div class="col-span-full">
          <label for="email" class="block text-sm font-medium text-zinc-100">E-Mail-Adresse</label>
          <input x-model="value.email" id="email" name="email" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
        </div>

        <div class="col-span-full">
          <label for="misc" class="block text-sm font-medium text-zinc-100">Was du sonst noch loswerden willst …</label>
          <textarea x-model="value.misc" id="misc" name="misc" rows="5" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5"></textarea>
        </div>

        <div x-show="isUnder18" class="col-span-full text-sm items-center p-4 border-2 rounded-lg form-group shadow-sm group bg-red-950 border-red-900">
            <div class="text-red-200">
                <span class="font-bold">Bitte beachte:</span> Bei Veranstaltungen mit nicht volljährigen Veranstaltern (z.B. 18. Geburtstag) muss eine Person über 25 Jahre (z.B. Erziehungsberechtigte*r) durchgehend anwesend sein.
            </div>
            <div class="{{maingrid}}">
                <div>
                    <label for="parent_name" class="block text-sm font-bold mt-2 text-red-50">Name eines Erz. Ber.</label>
                    <input x-model="value.parent_name" id="parent_name" name="parent_name" class="shadow-sm bg-red-900 text-red-50 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
                </div>
                <div>
                    <label for="parent_email" class="block text-sm font-bold mt-2 text-red-50">Email eines Erz. Ber.</label>
                    <input x-model="value.parent_email" id="parent_email" name="parent_email" class="shadow-sm bg-red-900 text-red-200 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
                </div>
                <div>
                    <label for="parent_phone" class="block text-sm font-bold mt-2 text-red-50">TelNr. eines Erz. Ber.</label>
                    <input x-model="value.parent_phone" id="parent_phone" name="parent_phone" class="shadow-sm bg-red-900 text-red-200 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
                </div>
            </div>
        </div>

        <div class="relative col-span-full">
            <div class="grid grid-cols-1 gap-2">
                <label for="datenschutz" class="p-0 block leading-none relative flex items-start">
                    <input x-model="value.datenschutz" id="datenschutz" type="checkbox" name="datenschutz" class="peer absolute invisible" />
                    <span class="border-neutral-400 border-4 border-solid peer-checked:border-indigo-500 absolute left-0 w-6 h-6 rounded block top-0"></span>
                    <span class="peer-checked:bg-indigo-500 left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block top-0"></span>
                    <span class="pl-8 pt-1 @sm:pt-0 text-zinc-100 text-sm @sm:text-base">
                        <span>Ich habe die <a href="/datenschutzerklaerung" class="font-semibold" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen und akzeptiere diese.</span>
                        <span class="text-red-800">*</span>
                    </span>
                </label>
            </div>
        </div>
        <div class="flex justify-center col-span-full mt-5">
            <button class="relative py-2 px-10 rounded bg-blue-900 hover:bg-blue-800 text-lg font-bold text-gray-300" type="submit">
                <template x-if="sending">
                    <div class="flex absolute left-2 top-0 h-full flex items-center">
                        <span class="loader w-6 h-6"></span>
                    </div>
                </template>
                Absenden
            </button>
        </div>
    </form>

    <div class="text-green-100" :class="{'hidden': sent === false, 'grid': sent === true}">
        <p class="text-xl">Vielen Dank für deine Anfrage.</p>
        <p class="mt-2 text-lg">Wir haben dir eine Kopie deiner Anfrage per E-Mail geschickt. Wir werden uns in den nächsten 2-3 Werktagen melden. </p>

        <div class="absolute flex items-center justify-center top-0 left-0 mt-[-13px] ml-[-13px] w-8 h-8">
            <svg class="absolute top-0 left-0 flex-none rotate-[104deg] stroke-green-700 fill-green-900" viewBox="-21 -21 41 41">
                <circle cx="0" cy="0" r="20" stroke-dasharray="83.77564 41.88782" stroke-width="1" stroke-location="inside"></circle>
            </svg>
            <svg class="relative size-4 text-green-500 fill-current"> <use xlink:href="{{ 'check' | sprite }}"></use> </svg>
        </div>
    </div>
</section>