{% set layout = layout|default('hero-left') %}
{% set passwordless = passwordless|default(true) %}
{% set magic_link = magic_link|default(true) %}
{% set passkeys = passkeys|default(true) %}
{% set seamless = seamless is defined ? seamless : false %}
{% set panel_pad = seamless ? '' : 'py-8 px-4 sm:px-10' %}
{% set show_tabs = show_tabs is defined ? show_tabs : true %}
{% set hash_nav = hash_nav is defined ? hash_nav : not seamless %}
{# Post-login target for the passkey flow, fed to window.location below. An
   explicit `redirect` (passed by the includer — e.g. the application form, which
   knows the offer's canonical reader URL) always wins; otherwise a SIGNED
   ?redirect= or the current page is used. Resolved by cms_login_redirect() so a
   raw, unsigned app.request.query.get('redirect') is never trusted here — it
   would be an open redirect / DOM-XSS gated only on a successful passkey login.
   (The Referer is unreliable anyway: in a render_esi fragment it is the internal
   /_fragment URI, and on the offer reader it collapses to the bare list page,
   dropping the offer's auto_item — hence the explicit `redirect`.) #}
{% set success_redirect = cms_login_redirect(redirect|default(null)) %}
{% set c = 'ferienpass/cms-signin' %}

<div {{ stimulus_controller(c, { hashNav: hash_nav }) }}
     class="{{ layout == 'hero-left' ? 'md:flex md:items-start md:gap-12 lg:gap-16' : (seamless ? '' : 'mx-auto max-w-lg') }}">

    {% if layout == 'hero-left' %}
        {# ---- Hero / context column ---- #}
        <aside class="md:flex-1 md:mr-0 mb-10 md:mb-0" aria-labelledby="signin-hero-title">
            {% set aside_container_attributes = attrs(aside_container_attributes|default).addClass('bg-primary-500/10 w-full h-full px-4 sm:px-8 md:px-10 lg:px-12 py-6 md:py-12 lg:py-16 relative rounded-lg') %}
            <div {{ aside_container_attributes }}>
                <span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-primary-700 dark:text-primary-300">
                    <span class="inline-block h-px w-6 bg-primary-500" aria-hidden="true"></span>
                    <span {{ stimulus_target(c, 'cond') }} data-when="new">{{ 'signIn.aside.kicker'|trans({}, 'cms') }}</span>
                    <span {{ stimulus_target(c, 'cond') }} data-when="returning" style="display: none">{{ 'signIn.aside.returning.kicker'|trans({}, 'cms') }}</span>
                </span>

                {% set aside_headline_attributes = attrs(aside_headline_attributes|default).addClass('mt-4 text-3xl lg:text-4xl font-bold leading-tight text-primary-800/90 dark:text-primary-200/90') %}
                <h2 id="signin-hero-title" {{ aside_headline_attributes }}>
                    <span {{ stimulus_target(c, 'cond') }} data-when="new">{{ 'signIn.aside.title'|trans({}, 'cms') }}</span>
                    <span {{ stimulus_target(c, 'cond') }} data-when="returning" style="display: none">{{ 'signIn.aside.returning.title'|trans({}, 'cms') }}</span>
                </h2>

                <p class="mt-3 text-sm md:text-base text-primary-800 dark:text-primary-200/90 max-w-prose">
                    <span {{ stimulus_target(c, 'cond') }} data-when="new">{{ 'signIn.aside.text'|trans({}, 'cms')|raw }}</span>
                    <span {{ stimulus_target(c, 'cond') }} data-when="returning" style="display: none">{{ 'signIn.aside.returning.text'|trans({}, 'cms')|raw }}</span>
                </p>

                {# ---- 3-step explanation ---- #}
                {% block aside_steps %}
                    <ol class="mt-6 grid gap-3">
                        {% for step in 1..3 %}
                            <li class="flex items-start gap-3 rounded-lg border border-primary-500/20 bg-white dark:bg-gray-800 px-4 py-3">
                                <span class="mt-0.5 grid h-7 w-7 flex-none place-items-center rounded-lg bg-primary-600 text-sm font-bold text-white">{{ step }}</span>
                                <span>
                                    <span class="block text-sm font-semibold text-gray-800 dark:text-gray-100">{{ ('signIn.aside.steps.' ~ step ~ '.title')|trans({}, 'cms') }}</span>
                                    <span class="block text-xs leading-snug text-gray-500 dark:text-gray-400">{{ ('signIn.aside.steps.' ~ step ~ '.text')|trans({}, 'cms') }}</span>
                                </span>
                            </li>
                        {% endfor %}
                    </ol>
                {% endblock %}

                {% block aside_bottom %}
                    <div aria-hidden="true"
                         class="hidden md:flex md:justify-center mt-10 px-12 opacity-95 dark:opacity-80 pointer-events-none">

                        {{ figure_html('public'~asset('images/launch.png', 'ferienpass_cms'), picture_config({
                            width: 300,
                            height: 300,
                            resizeMode: 'proportional',
                            densities: '1x, 2x'
                        })) }}

                    </div>
                {% endblock %}
            </div>
        </aside>
    {% endif %}

    {# ---- Form column ---- #}
    <div class="w-full {{ layout == 'hero-left' ? 'md:max-w-lg md:py-4' : '' }}">
        <div class="{{ seamless ? 'overflow-hidden' : 'overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-xl shadow-gray-900/5 dark:border-gray-700 dark:bg-gray-800 dark:shadow-black/20' }}">

                {% block tab_container %}
                    <div role="tablist" aria-label="{{ 'signIn.tabs.ariaLabel'|trans({}, 'cms') }}">

                        {% block tab_navigation %}
                          {% if show_tabs %}
                            <div class="border-b border-gray-200 dark:border-gray-700">
                                <nav class="-mb-px grid grid-cols-2">
                                    {% for tab in ['login', 'registration'] %}
                                        <button type="button"
                                                id="btn-tab-{{ tab }}"
                                                role="tab"
                                                aria-controls="tabpanel-{{ tab }}"
                                                aria-selected="false"
                                                {{ stimulus_action(c, tab == 'login' ? 'showLogin' : 'showRegister') }}
                                                {{ stimulus_target(c, tab == 'login' ? 'loginTab' : 'registerTab') }}
                                                class="flex flex-col items-center gap-0.5 py-4 px-2 text-center border-b-2 focus:outline-none transition border-transparent text-gray-500 dark:text-gray-300 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-100">
                                            <strong class="font-semibold tracking-wide text-sm leading-5">{{ ('signIn.tabs.' ~ tab)|trans({}, 'cms') }}</strong>
                                            <small class="text-xs font-medium text-gray-400 dark:text-gray-500">{{ ('signIn.tabs.' ~ tab ~ 'Sub')|trans({}, 'cms') }}</small>
                                        </button>
                                    {% endfor %}
                                </nav>
                            </div>
                          {% endif %}
                        {% endblock %}

                        {# ---- LOGIN PANEL ---- #}
                        <div class="{{ panel_pad }}"
                             role="tabpanel"
                             id="tabpanel-login"
                             aria-labelledby="btn-tab-login"
                             {{ stimulus_target(c, 'loginPanel') }}>

                            {# Recurring-user tagline (no PII stored — only a flag) #}
                            <p {{ stimulus_target(c, 'cond') }} data-when="returning" style="display: none" class="mb-4 text-sm leading-5 text-gray-500 dark:text-gray-400">
                                {{ 'signIn.returning.title'|trans({}, 'cms') }}
                            </p>

                            <div class="mb-6">
                                <p class="text-xl font-bold leading-tight text-gray-900 dark:text-white">
                                    <span {{ stimulus_target(c, 'cond') }} data-when="new">{{ 'login.intro.title'|trans({}, 'cms') }}</span>
                                    <span {{ stimulus_target(c, 'cond') }} data-when="returning-password" style="display: none">{{ 'login.intro.returning.title'|trans({}, 'cms') }}</span>
                                    <span {{ stimulus_target(c, 'cond') }} data-when="returning-not-password" style="display: none">{{ 'login.intro.returning.titleNeutral'|trans({}, 'cms') }}</span>
                                </p>
                                <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-300">
                                    <span {{ stimulus_target(c, 'cond') }} data-when="new">{{ 'login.intro.text'|trans({}, 'cms') }}</span>
                                    <span {{ stimulus_target(c, 'cond') }} data-when="returning" style="display: none">{{ 'login.intro.returning.textNeutral'|trans({}, 'cms') }}</span>
                                </p>
                            </div>

                            {% if passwordless and passkeys %}
                                <div {{ stimulus_target(c, 'cond') }} data-when="passkey-visible" class="mb-4"
                                     data-controller="web-auth--webauthn-stimulus"
                                     data-action="webauthn:assertion:success->ferienpass--cms-signin#rememberPasskey"
                                     data-web-auth--webauthn-stimulus-request-options-url-value="/assertion/options"
                                     data-web-auth--webauthn-stimulus-request-result-url-value="/assertion/result"
                                     data-web-auth--webauthn-stimulus-request-success-redirect-uri-value="{{ success_redirect }}">
                                    <button type="button"
                                            data-action="web-auth--webauthn-stimulus#signin"
                                            class="group flex w-full items-center gap-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 transition">
                                        <svg class="h-5 w-5 flex-none text-gray-700 dark:text-gray-200 group-hover:text-primary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="12" r="4"/><path d="M12 12h10"/><path d="M18 12v3"/><path d="M22 12v2"/></svg>
                                        <span class="flex-1">
                                            <span class="block text-sm font-semibold text-gray-800 dark:text-gray-100">{{ 'signIn.passkey.title'|trans({}, 'cms') }}</span>
                                            <span class="block text-xs text-gray-500 dark:text-gray-400">{{ 'signIn.passkey.text'|trans({}, 'cms') }}</span>
                                        </span>
                                        <svg class="h-4 w-4 flex-none text-gray-400 group-hover:text-primary-600 group-hover:translate-x-0.5 transition" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>
                                    </button>
                                </div>

                                <div {{ stimulus_target(c, 'cond') }} data-when="or-visible"
                                     class="my-5 flex items-center gap-3 text-xs font-semibold uppercase tracking-wider text-gray-400">
                                    <span class="h-px flex-1 bg-gray-200 dark:bg-gray-700"></span>
                                    {{ 'signIn.or'|trans({}, 'cms') }}
                                    <span class="h-px flex-1 bg-gray-200 dark:bg-gray-700"></span>
                                </div>
                            {% endif %}

                            <twig:Cms:SignIn:Login :redirect="redirect|default(null)" />

                        </div>

                        {# ---- REGISTRATION PANEL ---- #}
                        <div class="{{ panel_pad }}"
                             role="tabpanel"
                             id="tabpanel-registration"
                             aria-labelledby="btn-tab-registration"
                             style="display: none"
                             {{ stimulus_target(c, 'registerPanel') }}>

                            <twig:Cms:SignIn:Registration/>

                        </div>
                    </div>
                {% endblock %}

        </div>
    </div>
</div>
