{% extends "tungsten/layout/base.html" %}
{% block body %}
{% set hero = panel.login_hero %}
<div class="flex min-h-full">
  {# ------------------------------------------------------------ hero (large screens) #}
  <div class="relative hidden w-0 flex-[1.15] overflow-hidden bg-sidebar-950 lg:block">
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgb(var(--tw-c-primary-500)/0.12),transparent_55%)]"></div>
    {% include "tungsten/components/login-scene.html" %}
    <div class="relative flex h-full flex-col p-12 xl:p-16">
      <a href="{{ panel.url() }}" class="flex items-center gap-3">{% include "tungsten/components/brand.html" %}</a>
      {% if panel.brand_tagline %}<p class="mt-2 text-sm text-sidebar-300" data-tw-tagline>{{ __(panel.brand_tagline) }}</p>{% endif %}
      <div class="mt-16 max-w-xl xl:mt-24">
        {% if hero.eyebrow %}<p class="text-xs font-medium uppercase tracking-[0.3em] text-sidebar-400">{{ __(hero.eyebrow) }}</p>{% endif %}
        {% set heading = __(hero.heading) %}{% set highlight = __(hero.highlight) if hero.highlight else '' %}
        <h2 class="mt-5 text-4xl font-bold leading-tight tracking-tight text-white xl:text-5xl xl:leading-[1.1]">
          {%- if highlight and highlight in heading -%}
            {%- set parts = heading.split(highlight, 1) -%}
            {{ parts[0] }}<span class="bg-gradient-to-r from-primary-400 to-primary-500 bg-clip-text text-transparent">{{ highlight }}</span>{{ parts[1] }}
          {%- else -%}{{ heading }}{%- endif -%}
        </h2>
        {% if hero.text %}<p class="mt-5 text-lg text-sidebar-300">{{ __(hero.text) }}</p>{% endif %}
        {% if hero.features %}
        <ul class="mt-10 grid max-w-lg grid-cols-2 gap-3 xl:grid-cols-4">
          {% for f in hero.features %}
          <li class="rounded-xl bg-white/[0.03] p-4 ring-1 ring-inset ring-white/10 backdrop-blur-sm">
            <span class="text-primary-400">{{ icon(f.icon, 'h-6 w-6') }}</span>
            <p class="mt-3 text-sm leading-snug text-sidebar-200">{{ __(f.label) }}</p>
          </li>
          {% endfor %}
        </ul>
        {% endif %}
      </div>
    </div>
  </div>

  {# ------------------------------------------------------------ form #}
  <div class="relative flex flex-1 flex-col justify-center overflow-hidden bg-gray-50 px-4 py-12 sm:px-6 lg:px-12 dark:bg-gray-950">
    <div class="pointer-events-none absolute -end-32 -top-32 h-96 w-96 rounded-full bg-primary-200/40 blur-3xl dark:bg-primary-500/10" aria-hidden="true"></div>
    <div class="pointer-events-none absolute -bottom-40 -start-24 h-96 w-96 rounded-full bg-primary-100/60 blur-3xl dark:bg-primary-500/5" aria-hidden="true"></div>
    <div class="relative mx-auto w-full max-w-md">
      <div class="mb-8 lg:hidden">
        <div class="flex items-center justify-center gap-3 [&_span]:!text-gray-950 dark:[&_span]:!text-white">{% include "tungsten/components/brand.html" %}</div>
        {% if panel.brand_tagline %}<p class="mt-2 text-center text-sm text-gray-500 dark:text-gray-400">{{ __(panel.brand_tagline) }}</p>{% endif %}
      </div>
      <div class="rounded-3xl bg-white/90 p-6 shadow-xl shadow-gray-950/[0.04] ring-1 ring-gray-950/5 backdrop-blur sm:p-10 dark:bg-gray-900/90 dark:shadow-none dark:ring-white/10">
        {% block auth %}{% endblock %}
        {% if panel.locales | length > 1 %}
        <form method="post" action="{{ panel.url('_tw', 'locale') }}" class="mt-8 flex justify-center border-t border-gray-100 pt-6 dark:border-white/10" data-tw-languages>
          <input type="hidden" name="_token" value="{{ csrf_token }}">
          <label class="relative inline-flex items-center text-sm text-gray-600 dark:text-gray-300">
            <span class="pointer-events-none absolute start-2 text-gray-400">{{ icon('globe', 'h-4 w-4') }}</span>
            <span class="sr-only">{{ __('Language') }}</span>
            <select name="locale" onchange="this.form.requestSubmit()"
                    class="cursor-pointer appearance-none rounded-lg border-0 bg-transparent py-1.5 pe-8 ps-8 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-primary-500 dark:text-gray-200 dark:hover:bg-white/5">
              {% for lang in panel.language_options() %}
              <option value="{{ lang.code }}" lang="{{ lang.code }}" {% if lang.code == current_locale() %}selected{% endif %}>{{ lang.label }}</option>
              {% endfor %}
            </select>
          </label>
          <noscript><button type="submit" class="ms-2 text-sm font-medium {{ colors.LINK.primary }}">{{ __('Save') }}</button></noscript>
        </form>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}