<div {{ attributes }}>
    {% if not validated %}
        <div
            class="theme-age-gate fixed inset-0 z-[180] flex min-h-dvh items-center justify-center overflow-y-auto bg-[rgba(20,20,20,0.96)] px-4 py-8 text-theme-white sm:px-6"
            data-controller="age-gate"
            role="dialog"
            aria-modal="true"
            aria-labelledby="age-verification-title"
            aria-describedby="age-verification-description"
        >
            <div class="theme-age-gate__panel w-full max-w-2xl border border-[rgba(211,173,116,0.72)] border-l-4 border-l-theme-gold bg-theme-dark px-6 py-8 shadow-[0_32px_90px_rgba(0,0,0,0.62)] sm:px-10 sm:py-10">
                <header class="theme-age-gate__header mb-8 text-center">
                    <p class="theme-age-gate__brand mb-5 font-serif text-xl font-light text-theme-gold sm:text-2xl">
                        {{ contact_business_name()|default('age_verification.company_fallback'|trans) }}
                    </p>
                    <h1 id="age-verification-title" class="theme-age-gate__title text-balance font-serif text-3xl font-light text-theme-white sm:text-4xl">
                        {{ 'age_verification.heading'|trans }}
                    </h1>
                    <p id="age-verification-description" class="theme-age-gate__introduction mx-auto mt-4 max-w-prose text-pretty font-sans text-sm leading-6 text-white/75 sm:text-base">
                        {{ 'age_verification.introduction'|trans }}
                    </p>
                </header>

                <form
                    class="theme-age-gate__form space-y-6"
                    data-action="live#action:prevent"
                    data-live-action-param="validateAge"
                    novalidate
                >
                    {% set languageOptions = this.languageOptions %}
                    <div class="theme-age-gate__selectors grid gap-5 sm:grid-cols-[minmax(0,1fr)_11rem]">
                        <div class="theme-age-gate__field">
                            <label for="age-verification-country" class="theme-age-gate__label mb-2 block font-sans text-sm font-bold uppercase text-theme-gold">
                                {{ 'age_verification.country_label'|trans }}
                            </label>
                            <div class="theme-age-gate__control group relative">
                                <span class="theme-age-gate__control-icon pointer-events-none absolute inset-y-0 left-0 flex w-12 items-center justify-center text-theme-gold" 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="theme-age-gate__select min-h-14 w-full appearance-none border border-theme-gold bg-theme-black py-3 pr-12 pl-12 font-sans text-base font-medium text-theme-white outline-none transition hover:border-theme-gold-soft focus:border-theme-gold-soft focus:ring-2 focus:ring-theme-gold/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="theme-age-gate__chevron pointer-events-none absolute inset-y-0 right-0 flex w-12 items-center justify-center text-white/60 transition group-focus-within:text-theme-gold" 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 class="theme-age-gate__field">
                                <label for="age-verification-language" class="theme-age-gate__label mb-2 block font-sans text-sm font-bold uppercase text-theme-gold">
                                    {{ 'age_verification.language_label'|trans }}
                                </label>
                                <div class="theme-age-gate__control group relative">
                                    <select
                                        id="age-verification-language"
                                        class="theme-age-gate__select min-h-14 w-full appearance-none border border-theme-gold bg-theme-black py-3 pr-10 pl-4 font-sans text-base font-medium text-theme-white outline-none transition hover:border-theme-gold-soft focus:border-theme-gold-soft focus:ring-2 focus:ring-theme-gold/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="theme-age-gate__chevron pointer-events-none absolute inset-y-0 right-0 flex w-10 items-center justify-center text-white/60 transition group-focus-within:text-theme-gold" 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 class="theme-age-gate__field">
                        <label for="age-verification-birth-year" class="theme-age-gate__label mb-2 block font-sans text-sm font-bold uppercase text-theme-gold">
                            {{ 'age_verification.birth_year_label'|trans }}
                        </label>
                        <input
                            id="age-verification-birth-year"
                            type="text"
                            class="theme-age-gate__year min-h-14 w-full border border-theme-gold bg-theme-black px-4 py-3 text-center font-mono text-2xl font-semibold tabular-nums tracking-[0.35em] text-theme-white outline-none transition placeholder:font-sans placeholder:text-base placeholder:font-normal placeholder:tracking-normal placeholder:text-white/45 focus:border-theme-gold-soft focus:ring-2 focus:ring-theme-gold/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="theme-age-gate__hint font-sans text-sm leading-6 text-white/70">
                        {{ 'age_verification.legal_age_hint'|trans({ '%age%': this.requiredAge }) }}
                    </p>

                    <div id="age-verification-feedback" class="theme-age-gate__feedback">
                        {% if errorMessage %}
                            <div
                                class="theme-age-gate__error border border-[#f1b7a6] border-l-4 bg-[rgba(94,35,28,0.55)] px-4 py-3 font-sans text-sm leading-6 text-[#f1b7a6]"
                                role="alert"
                                aria-live="assertive"
                            >
                                {{ errorMessage }}
                            </div>
                        {% endif %}
                    </div>

                    <button
                        id="age-verification-submit"
                        type="submit"
                        class="theme-age-gate__submit theme-button-fill flex min-h-12 w-full items-center justify-center px-5 py-3 font-serif text-sm font-bold uppercase focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-theme-gold 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="theme-age-gate__privacy mt-6 text-pretty font-sans text-xs leading-5 text-white/65">
                    {{ 'age_verification.privacy'|trans }}
                </p>
            </div>
        </div>
    {% endif %}
</div>
