{{#
    @name Form
    @desc The form page builder block.
    @set page.page_builder.form
#}}

<!-- /page_builder/_form.antlers.html -->
{{ partial:page_builder/block }}
    <div class="span-content md:col-start-[col-3] md:col-span-8">
        {{ block:heading ?= { partial:typography/h1 as="h2" class="mb-8" :content="block:heading" } }}
        {{ block:text ?= { partial:typography/p :content="block:text" } }}

        {{# Render form and use Alpine based Statamic conditional logic. #}}
        {{ if form:handle }}
            {{ form:create :in="form:handle" js="alpine:form" attr:x-ref="form" }}
                {{# Use Laravel Precognition for live validation and submission. #}}
                <div x-data="formHandler()" class="flex flex-col gap-8" x-cloak>
                    {{# Error notifications. #}}
                    <template x-if="form.hasErrors && submitted">
                        {{ partial:components/notification type="error" }}
                            {{ slot:attributes }}id="summary" role="group"{{ /slot:attributes }}
                            <h3 class="mb-2 leading-5 font-bold text-red-700">{{ trans:strings.form_error }}</h3>
                            <ul class="list-disc list-inside marker:text-red-700">
                                <template x-for="(error, index) in form.errors">
                                    <li>
                                        <a :href="`#${index}`" @click.prevent="$focus.focus(document.querySelector(`#${index}`))" x-text="error" class="underline text-red-700 focus:outline-red-700"></a>
                                    </li>
                                </template>
                            </ul>
                        {{ /partial:components/notification }}
                    </template>

                    <template x-if="success">
                        {{ partial:components/notification type="success" content="{trans:strings.form_success}" }}
                    </template>

                    {{# Polite live notifications for screen readers only. #}}
                    <ul aria-live="polite" class="sr-only">
                        <template x-if="success">
                            <li>{{ trans:strings.form_success }}</li>
                        </template>

                        <template x-if="form.errors && !submitted">
                            <template x-for="error in form.errors">
                                <li x-text="error"></li>
                            </template>
                        </template>
                    </ul>

                    {{# Honeypot spam protection. #}}
                    <div class="hidden">
                        <label class="font-bold" for="{{ honeypot }}">{{ trans:strings.form_honeypot }} <sup class="text-red-700">*</sup></label>
                        <input class="form-input w-full" id="{{ honeypot }}" type="text" name="{{ honeypot }}" x-model="form.{{ honeypot }}" tabindex="-1" autocomplete="off"/>
                    </div>

                    {{# Render various form sections. #}}
                    {{ sections }}
                        <fieldset class="w-full grid md:grid-cols-12 gap-6">
                            {{ if display || instructions }}
                                <span class="md:col-span-12">
                                    {{ display ?= { partial:typography/h2 class="mb-2" as="legend" content="{ trans :key="display" }" } }}
                                    {{ instructions ?= { partial:typography/p content="{ trans :key="instructions" }" } }}
                                </span>
                            {{ /if }}

                            {{# Render the default-styled fields. #}}
                            {{ %form:fields scope="field" }}
                                <template x-if="{{ show_field }}">
                                    <div class="
                                        flex flex-col stack-1
                                        {{ input_type == 'hidden' ?= 'hidden' }}
                                        {{ switch(
                                            (width == '25') => 'md:col-span-3',
                                            (width == '33') => 'md:col-span-4',
                                            (width == '50') => 'md:col-span-6',
                                            (width == '66') => 'md:col-span-8',
                                            (width == '75') => 'md:col-span-9',
                                            () => 'md:col-span-12'
                                        )}}
                                    ">
                                        {{ unless type == 'spacer' }}
                                            <label class="font-bold" for="{{ handle }}">
                                                {{ trans :key="field:display" }}
                                                {{ if validate | contains('required') || validate | contains('accepted') }}
                                                    <sup aria-label="{{ trans:strings.form_required }}" class="text-red-700">*</sup>
                                                {{ /if }}
                                            </label>

                                            {{ if field:instructions && instructions_position != 'below' }}
                                                <span id="{{ field:handle }}-instructions" class="text-sm">
                                                    {{ trans :key="field:instructions" }}
                                                </span>
                                            {{ /if }}
                                        {{ /unless }}

                                        <div class="stack-space-2 flex flex-col stack-2">
                                            {{ field:field }}

                                            {{# Inline error. #}}
                                            <template x-if="form.invalid('{{ handle }}')">
                                                <span class="mt-1 text-red-700 text-sm font-bold" x-text="form.errors.{{ handle }}"></span>
                                            </template>

                                            {{ if field:instructions && instructions_position === 'below' }}
                                                <span id="{{ field:handle }}-instructions" class="text-sm">
                                                    {{ trans :key="field:instructions" }}
                                                </span>
                                            {{ /if }}
                                        </div>
                                    </div>
                                </template>
                            {{ /%form:fields }}
                        </fieldset>
                    {{ /sections }}

                    {{# Submit button, disabled on processing. #}}
                    <div class="w-full flex justify-end">
                        <div class="md:col-span-12 flex justify-end">
                            {{ partial:components/button as="button" button_type="button" label="{ trans:strings.form_send }" }}
                                {{ slot:attributes }}
                                    @click.prevent="submit" :disabled="form.processing" :class="{ 'opacity-25 cursor-default': form.processing }"
                                {{ /slot:attributes }}
                            {{ /partial:components/button }}
                        </div>
                    </div>
                </div>
            {{ /form:create }}

            {{# Call in the Peak Tools Alpine Based Precognition Form Handler. #}}
            {{ partial:statamic-peak-tools::snippets/form_handler }}
        {{ /if }}
    </div>
{{ /partial:page_builder/block }}
<!-- End: /page_builder/_form.antlers.html -->