<div {{ attributes }}>
    {% if not validated %}
    <div
        class="fixed inset-0 z-age-gate flex min-h-dvh items-center justify-center overflow-y-auto bg-foreground/85 px-4 py-8 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-xl bg-surface px-6 py-8 text-foreground shadow-surface-strong sm:px-10 sm:py-10">
            <header class="mb-8 text-center">
                <p class="mb-5 font-serif text-xl text-accent sm:text-2xl">
                    {{ contact_business_name()|default('age_verification.company_fallback'|trans) }}
                </p>
                <h1 id="age-verification-title" class="text-balance font-serif text-2xl sm:text-3xl">
                    {{ 'age_verification.heading'|trans }}
                </h1>
                <p id="age-verification-description" class="mx-auto mt-4 max-w-prose text-pretty font-sans text-sm leading-6 text-foreground/75 sm:text-base">
                    {{ '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-sans text-sm font-semibold text-foreground">
                            {{ '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-accent" 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 appearance-none border border-input-border bg-surface-muted py-3 pr-12 pl-12 font-sans text-base font-medium text-foreground shadow-soft outline-none transition hover:border-control-border hover:bg-surface focus:border-accent focus:bg-surface focus:ring-2 focus:ring-accent/30"
                                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-foreground/55 transition group-focus-within:text-accent" 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-sans text-sm font-semibold text-foreground">
                                {{ 'age_verification.language_label'|trans }}
                            </label>
                            <div class="group relative">
                                <select
                                    id="age-verification-language"
                                    class="min-h-14 w-full appearance-none border border-input-border bg-surface-muted py-3 pr-10 pl-4 font-sans text-base font-medium text-foreground shadow-soft outline-none transition hover:border-control-border hover:bg-surface focus:border-accent focus:bg-surface focus:ring-2 focus:ring-accent/30"
                                    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-foreground/55 transition group-focus-within:text-accent" 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-sans text-sm font-semibold text-foreground">
                        {{ 'age_verification.birth_year_label'|trans }}
                    </label>
                    <input
                        id="age-verification-birth-year"
                        type="text"
                        class="min-h-14 w-full border border-input-border bg-surface px-4 py-3 text-center font-mono text-2xl font-semibold tabular-nums tracking-[0.35em] text-foreground outline-none transition placeholder:font-sans placeholder:text-base placeholder:font-normal placeholder:tracking-normal focus:border-accent focus:ring-2 focus:ring-accent/30"
                        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="font-sans text-sm leading-6 text-foreground/70">
                    {{ 'age_verification.legal_age_hint'|trans({ '%age%': this.requiredAge }) }}
                </p>

                <div id="age-verification-feedback">
                    {% if errorMessage %}
                        <div
                            class="border border-error-border bg-error-surface px-4 py-3 font-sans text-sm leading-6 text-error-foreground"
                            role="alert"
                            aria-live="assertive"
                        >
                            {{ errorMessage }}
                        </div>
                    {% endif %}
                </div>

                <button
                    id="age-verification-submit"
                    type="submit"
                    class="flex min-h-12 w-full items-center justify-center border border-accent bg-accent px-5 py-3 font-sans text-sm font-semibold uppercase tracking-status text-foreground transition hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent 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-pretty font-sans text-xs leading-5 text-foreground/65">
                {{ 'age_verification.privacy'|trans }}
            </p>
        </div>
    </div>
    {% endif %}
</div>
