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

{% block extrastyle %}
    <style>
        .logout-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .logout-page::before {
            content: '';
            position: absolute;
            top: -20%;
            left: -10%;
            width: 60%;
            height: 70%;
            background: radial-gradient(ellipse, color-mix(in oklab, var(--color-primary) 15%, transparent), transparent 60%);
            filter: blur(60px);
            pointer-events: none;
        }

        .logout-page::after {
            content: '';
            position: absolute;
            bottom: -20%;
            right: -10%;
            width: 60%;
            height: 70%;
            background: radial-gradient(ellipse, color-mix(in oklab, var(--color-accent) 12%, transparent), transparent 60%);
            filter: blur(60px);
            pointer-events: none;
        }

        .logout-page .logout-grid {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(color-mix(in oklab, var(--color-base-content) 4%, transparent) 1px, transparent 1px),
                linear-gradient(90deg, color-mix(in oklab, var(--color-base-content) 4%, transparent) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: 0;
            mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 15%, transparent 75%);
            -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 15%, transparent 75%);
        }

        .logout-card {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 440px;
            background: color-mix(in oklab, var(--color-base-100) 60%, transparent);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
            border-radius: 1.75rem;
            box-shadow: 0 24px 80px color-mix(in oklab, var(--color-base-content) 8%, transparent);
            padding-top: 6rem;
        }

        .logout-avatar {
            position: absolute;
            top: -4rem;
            left: 50%;
            transform: translateX(-50%);
            width: 8rem;
            height: 8rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in oklab, var(--color-primary) 15%, var(--color-base-100));
            border: 4px solid var(--color-base-100);
            box-shadow: 0 4px 16px color-mix(in oklab, var(--color-primary) 12%, transparent);
            z-index: 2;
        }

        .logout-decoration {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: radial-gradient(circle, color-mix(in oklab, var(--color-primary) 20%, transparent), transparent);
            filter: blur(40px);
            pointer-events: none;
        }
    </style>
{% endblock %}

{% block bodyclass %}{{ block.super }} logout{% endblock %}

{% block usertools %}{% endblock %}
{% block nav-global %}{% endblock %}
{% block nav-sidebar %}{% endblock %}
{% block content_title %}{% endblock %}
{% block nav-breadcrumbs %}{% endblock %}
{% block breadcrumbs_wrapper %}{% endblock breadcrumbs_wrapper %}
{% block top-navbar %}{% endblock %}

{% block main_content_wrapper %}{% block content %}
    <div class="logout-page px-4 py-8">
        <div class="logout-grid"></div>
        <div class="logout-decoration" style="top: 15%; left: 5%;"></div>
        <div class="logout-decoration" style="bottom: 20%; right: 8%; width: 150px; height: 150px;"></div>
        
        <div class="logout-card p-8 md:p-10">
            {# ── Floating Avatar ── #}
            <div class="logout-avatar">
                {% if dash_ui_settings.logo_url %}
                    <img src="{{ dash_ui_settings.logo_url }}" alt="" loading="lazy"
                         style="width:5.5rem; height:5.5rem; border-radius:50%; object-fit:contain;">
                {% else %}
                    <i class="fa-solid fa-right-from-bracket" style="font-size:3rem; color:var(--color-primary);"></i>
                {% endif %}
            </div>

            <div class="text-center mb-8" style="margin-top:0.5rem;">
                <h1 class="text-2xl font-bold tracking-tight">{% trans "Logged Out" %}</h1>
                <p class="text-sm text-base-content/50 mt-1">{% trans "Thanks for spending some quality time with the Web site today." %}</p>
            </div>

            <div class="text-center">
                <a href="{% url 'admin:index' %}" class="btn btn-primary w-full">
                    <i class="fa-solid fa-arrow-right-to-bracket"></i>
                    {% trans 'Log in again' %}
                </a>
            </div>

            <div class="flex items-center justify-center gap-3 mt-8 text-xs text-base-content/30">
                <span class="flex items-center gap-1"><i class="fa-solid fa-lock"></i> {% trans "Secure" %}</span>
                <span class="w-1 h-1 rounded-full bg-base-content/20"></span>
                <span class="flex items-center gap-1"><i class="fa-solid fa-shield-halved"></i> {% trans "Encrypted" %}</span>
                <span class="w-1 h-1 rounded-full bg-base-content/20"></span>
                <span class="flex items-center gap-1"><i class="fa-solid fa-user-shield"></i> {% trans "Protected" %}</span>
            </div>
        </div>
    </div>
{% endblock content %}{% endblock main_content_wrapper %}