<div {{ attributes }}>
    {% if not validated %}
        <div
            class="fixed inset-0 z-[120] flex min-h-dvh items-center justify-center overflow-y-auto bg-primary/90 px-4 py-8 backdrop-blur-sm sm:px-6"
            data-controller="age-gate"
            role="dialog"
            aria-modal="true"
            aria-labelledby="age-verification-title"
            aria-describedby="age-verification-description"
        >
            <div class="w-full max-w-2xl border border-white/15 bg-background p-5 text-primary shadow-[0_32px_100px_rgba(0,0,0,0.38)] sm:p-8">
                <div class="border border-primary/10 bg-white/70 px-5 py-7 sm:px-8 sm:py-9">
                    <header class="mb-8 text-center">
                        <p class="font-label text-[11px] font-semibold uppercase tracking-[0.22em] text-secondary sm:text-[12px]">
                            {{ contact_business_name()|default('age_verification.company_fallback'|trans) }}
                        </p>
                        <h1 id="age-verification-title" class="mt-4 font-display text-[32px] leading-[1.04] font-semibold [font-optical-sizing:auto] text-primary sm:text-[42px]">
                            {{ 'age_verification.heading'|trans }}
                        </h1>
                        <p id="age-verification-description" class="mx-auto mt-4 max-w-xl text-[15px] leading-7 text-primary/72">
                            {{ 'age_verification.introduction'|trans }}
                        </p>
                    </header>

                    <form
                        class="space-y-6"
                        data-action="live#action:prevent"
                        data-live-action-param="validateAge"
                        novalidate
                    >
                        {% set languageOptions = this.languageOptions %}
                        <div class="grid gap-5 sm:grid-cols-[minmax(0,1fr)_11rem]">
                            <div>
                                <label for="age-verification-country" class="mb-2 block font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-primary/70">
                                    {{ 'age_verification.country_label'|trans }}
                                </label>
                                <div class="group relative">
                                    <span class="pointer-events-none absolute inset-y-0 left-0 flex w-12 items-center justify-center text-secondary" aria-hidden="true">
                                        <svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="1.6">
                                            <circle cx="12" cy="12" r="9"></circle>
                                            <path d="M3 12h18M12 3c2.4 2.45 3.65 5.45 3.65 9S14.4 18.55 12 21M12 3C9.6 5.45 8.35 8.45 8.35 12S9.6 18.55 12 21"></path>
                                        </svg>
                                    </span>
                                    <select
                                        id="age-verification-country"
                                        class="min-h-14 w-full cursor-pointer appearance-none rounded-none border border-primary/15 bg-white py-3 pr-12 pl-12 text-[15px] font-medium text-primary outline-none transition hover:border-secondary/50 focus:border-secondary focus:ring-0"
                                        data-age-gate-target="initialFocus"
                                        data-model="countryCode"
                                        autocomplete="country"
                                        required
                                    >
                                        <optgroup label="{{ 'age_verification.preferred_countries'|trans }}">
                                            {% for code, country in this.preferredCountries %}
                                                <option value="{{ code }}"{% if code == countryCode %} selected{% endif %}>{{ country }}</option>
                                            {% endfor %}
                                        </optgroup>
                                        <optgroup label="{{ 'age_verification.all_countries'|trans }}">
                                            {% for code, country in this.otherCountries %}
                                                <option value="{{ code }}"{% if code == countryCode %} selected{% endif %}>{{ country }}</option>
                                            {% endfor %}
                                        </optgroup>
                                    </select>
                                    <span class="pointer-events-none absolute inset-y-0 right-0 flex w-12 items-center justify-center text-primary/55 transition group-focus-within:text-secondary" aria-hidden="true">
                                        <svg viewBox="0 0 20 20" class="size-4" fill="none" stroke="currentColor" stroke-width="1.8">
                                            <path d="m5 7.5 5 5 5-5"></path>
                                        </svg>
                                    </span>
                                </div>
                            </div>

                            {% if languageOptions|length > 1 %}
                                <div>
                                    <label for="age-verification-language" class="mb-2 block font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-primary/70">
                                        {{ 'age_verification.language_label'|trans }}
                                    </label>
                                    <div class="group relative">
                                        <select
                                            id="age-verification-language"
                                            class="min-h-14 w-full cursor-pointer appearance-none rounded-none border border-primary/15 bg-white py-3 pr-10 pl-4 text-[15px] font-medium text-primary outline-none transition hover:border-secondary/50 focus:border-secondary focus:ring-0"
                                            data-action="change->age-gate#changeLanguage"
                                            autocomplete="language"
                                        >
                                            {% for code, language in languageOptions %}
                                                <option value="{{ language.url }}"{% if code == this.currentLocale %} selected{% endif %}>{{ language.name }}</option>
                                            {% endfor %}
                                        </select>
                                        <span class="pointer-events-none absolute inset-y-0 right-0 flex w-10 items-center justify-center text-primary/55 transition group-focus-within:text-secondary" aria-hidden="true">
                                            <svg viewBox="0 0 20 20" class="size-4" fill="none" stroke="currentColor" stroke-width="1.8">
                                                <path d="m5 7.5 5 5 5-5"></path>
                                            </svg>
                                        </span>
                                    </div>
                                </div>
                            {% endif %}
                        </div>

                        <div>
                            <label for="age-verification-birth-year" class="mb-2 block font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-primary/70">
                                {{ 'age_verification.birth_year_label'|trans }}
                            </label>
                            <input
                                id="age-verification-birth-year"
                                type="text"
                                class="min-h-14 w-full rounded-none border border-primary/15 bg-white px-4 py-3 text-center font-mono text-2xl font-semibold tabular-nums tracking-[0.35em] text-primary outline-none transition placeholder:font-body placeholder:text-base placeholder:font-normal placeholder:tracking-normal placeholder:text-primary/35 focus:border-secondary focus:ring-0"
                                data-model="norender|birthYear"
                                data-action="input->age-gate#normalizeYear"
                                autocomplete="bday-year"
                                inputmode="numeric"
                                pattern="[0-9]{4}"
                                minlength="4"
                                maxlength="4"
                                placeholder="{{ 'age_verification.birth_year_placeholder'|trans }}"
                                required
                            >
                        </div>

                        <p class="text-[14px] leading-6 text-primary/65">
                            {{ 'age_verification.legal_age_hint'|trans({ '%age%': this.requiredAge }) }}
                        </p>

                        <div id="age-verification-feedback">
                            {% if errorMessage %}
                                <div
                                    class="border border-red-300 bg-red-50 px-4 py-3 text-[14px] leading-6 text-red-700"
                                    role="alert"
                                    aria-live="assertive"
                                >
                                    {{ errorMessage }}
                                </div>
                            {% endif %}
                        </div>

                        <button
                            id="age-verification-submit"
                            type="submit"
                            class="flex min-h-12 w-full cursor-pointer items-center justify-center border border-primary bg-primary px-5 py-3 font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-white transition hover:border-secondary hover:bg-secondary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary disabled:cursor-wait disabled:opacity-60"
                            data-loading="addAttribute(disabled)"
                        >
                            <span data-loading="hide">{{ 'age_verification.submit'|trans }}</span>
                            <span class="hidden" data-loading="show">{{ 'age_verification.loading'|trans }}</span>
                        </button>
                    </form>

                    <p class="mt-6 text-[12px] leading-5 text-primary/60">
                        {{ 'age_verification.privacy'|trans }}
                    </p>
                </div>
            </div>
        </div>
    {% endif %}
</div>
