{{ nocache }}
    {{ form:create in="{ form:handle }" js="alpine" }}
        <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-12">
            {{ fields }}
                <template x-if="{{ show_field }}">
                    <div class="{{ [
                        'sm:col-span-3' => width === 25,
                        'sm:col-span-4' => width === 33,
                        'sm:col-span-6' => width === 50,
                        'sm:col-span-8' => width === 66,
                        'sm:col-span-9' => width === 75,
                        'sm:col-span-12' => width === 100,
                    ] | classes }}">
                        <label for="{{ handle }}" class="block">{{ display }}</label>
                        {{ if instructions && instructions_position === 'above' }}
                            <p class="mt-2 text-sm text-gray-500" id="{{ handle }}-description">{{ instructions }}</p>
                        {{ /if }}
                        <div class="{{ ['relative mt-2', 'rounded-md shadow-xs' => $error && ['text', 'textarea'] | in_array(type) ] | classes }}">
                            {{ field }}
                            {{ if $error }}
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                    <svg class="size-5 text-red-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                            {{ /if }}
                        </div>
                        {{ if error }}
                            <p class="mt-2 text-sm text-red-600" id="{{ handle }}-error">{{ error }}</p>
                        {{ /if }}
                        {{ if instructions && instructions_position === 'below' && !error }}
                            <p class="mt-2 text-sm text-gray-500" id="{{ handle }}-description">{{ instructions }}</p>
                        {{ /if }}
                    </div>
                </template>
            {{ /fields }}
        </div>
        <input type="text" class="hidden" name="{{ honeypot ?? 'honeypot' }}" />

        <div class="mt-6">
            {{ partial:components/molecules/buttons/solid-secondary type="submit" label="{submit_label}" }}
        </div>
    {{ /form:create }}
{{ /nocache }}