{% extends "admin/base_site.html" %}
{% load i18n static forge_icons %}

{% block title %}{% trans "Signed out" %} | {{ forge.brand_name|default:site_header }}{% endblock %}

{% block extrastyle %}
  {{ block.super }}
  <style>
    html,
    body {
      height: 100%;
      overflow: hidden;
    }
  </style>
{% endblock %}

{% block content %}
<div class="fixed inset-0 overflow-hidden">
  <div class="absolute inset-0 pointer-events-none">
    <div class="absolute inset-0 bg-gradient-to-b from-slate-50 via-white to-slate-50 dark:from-forge-950 dark:via-forge-950 dark:to-forge-900"></div>
    <div class="absolute -top-24 left-1/2 -translate-x-1/2 h-72 w-[42rem] rounded-full blur-3xl opacity-50 bg-[radial-gradient(circle_at_center,color-mix(in_srgb,var(--forge-accent)_22%,transparent),transparent_60%)]"></div>
    <div class="absolute bottom-[-10rem] right-[-8rem] h-72 w-72 rounded-full blur-3xl opacity-30 bg-[radial-gradient(circle_at_center,#93c5fd,transparent_60%)] dark:bg-[radial-gradient(circle_at_center,#1d4ed8,transparent_60%)]"></div>
  </div>

  <div class="absolute inset-x-0 top-0 z-10 px-4 sm:px-6 py-4">
    <div class="flex items-center justify-between">
      <a
        href="{{ site_url|default:'/' }}"
        class="inline-flex items-center gap-2 rounded-xl px-2.5 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white hover:bg-white/60 dark:hover:bg-slate-900/40"
      >
        <span class="text-base leading-none">←</span>
        <span>{% trans "Back to site" %}</span>
      </a>

      <div class="relative">
        <button
          type="button"
          class="inline-flex items-center gap-2 rounded-xl border border-slate-200/70 dark:border-slate-700/70 bg-white/70 dark:bg-slate-900/50 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 shadow-sm hover:shadow-md transition-shadow"
          data-account-menu-toggle
          aria-haspopup="menu"
          aria-expanded="false"
        >
          {% forge_icon "sun" "h-4 w-4" %}
          <span>{% trans "Theme" %}</span>
          <span class="text-xs opacity-70">▾</span>
        </button>

        <div
          class="hidden absolute right-0 mt-2 w-44 rounded-xl border border-slate-200/70 dark:border-slate-700/70 bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl shadow-lg p-1"
          role="menu"
          data-account-menu
        >
          <button type="button" role="menuitem" data-set-theme="light" class="forge-theme-option w-full text-left rounded-lg px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800">
            {% trans "Light" %}
          </button>
          <button type="button" role="menuitem" data-set-theme="dark" class="forge-theme-option w-full text-left rounded-lg px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800">
            {% trans "Dark" %}
          </button>
          <button type="button" role="menuitem" data-set-theme="system" class="forge-theme-option w-full text-left rounded-lg px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800">
            {% trans "System" %}
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="relative min-h-full flex items-center justify-center px-4 py-12 pt-20">
    <div class="relative w-full max-w-md rounded-2xl border border-slate-200/70 dark:border-slate-700/70 bg-white/80 dark:bg-slate-900/70 backdrop-blur-xl shadow-[0_20px_60px_rgba(2,6,23,0.12)] p-8">
      <div class="flex flex-col items-center text-center mb-6">
        <div class="mb-4 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-100 dark:border-emerald-900/50">
          {% forge_icon "sparkles" "h-7 w-7 text-emerald-600 dark:text-emerald-400" %}
        </div>
        <div class="mb-4 inline-flex items-center justify-center rounded-xl border border-slate-200/70 dark:border-slate-700/70 bg-white/70 dark:bg-slate-900/70 p-2">
          <img
            src="{{ forge.brand_logo_src }}"
            alt="{{ forge.brand_name }}"
            width="132"
            height="40"
            class="forge-login-brand-logo max-w-[9rem] h-11 w-auto object-contain"
            loading="eager"
            decoding="async"
          >
        </div>
        <h1 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">
          {% trans "You are signed out" %}
        </h1>
        <p class="text-sm text-slate-600 dark:text-slate-300 mt-2 max-w-sm">
          {% blocktrans with name=forge.brand_name|default:site_header %}Your admin session for {{ name }} has ended. Sign in again anytime, or continue on the main site.{% endblocktrans %}
        </p>
      </div>

      <ul class="mb-6 space-y-2 rounded-xl border border-slate-200/80 dark:border-slate-700/80 bg-slate-50/80 dark:bg-slate-800/40 px-4 py-3 text-left text-sm text-slate-600 dark:text-slate-300">
        <li class="flex items-start gap-2">
          {% forge_icon "shield" "h-4 w-4 text-slate-400 shrink-0 mt-0.5" %}
          <span>{% trans "Your browser session was cleared securely." %}</span>
        </li>
        <li class="flex items-start gap-2">
          {% forge_icon "key" "h-4 w-4 text-slate-400 shrink-0 mt-0.5" %}
          <span>{% trans "Close this tab on shared devices if others can use the same computer." %}</span>
        </li>
      </ul>

      <div class="flex flex-col sm:flex-row gap-3">
        <a
          href="{% url 'admin:login' %}"
          class="flex-1 inline-flex justify-center items-center rounded-xl forge-accent-bg text-white py-2.5 px-4 font-semibold shadow-sm hover:shadow-md transition-shadow text-center"
        >
          {% forge_icon "arrow-right" "h-4 w-4 mr-2" %}
          {% trans "Sign in again" %}
        </a>
        <a
          href="{{ site_url|default:'/' }}"
          class="flex-1 inline-flex justify-center items-center rounded-xl border border-slate-300/80 dark:border-slate-600 bg-white/80 dark:bg-slate-800/60 text-slate-800 dark:text-slate-100 py-2.5 px-4 font-medium hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors text-center"
        >
          {% forge_icon "external-link" "h-4 w-4 mr-2 text-slate-500" %}
          {% trans "Back to site" %}
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}