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

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

        .login-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;
        }

        .login-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;
        }

        .login-page .login-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%);
        }

        .login-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;
        }

        .login-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;
        }

        .login-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 }} login{% 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="login-page px-4 py-8">
        <div class="login-grid"></div>
        <div class="login-decoration" style="top: 15%; left: 5%;"></div>
        <div class="login-decoration" style="bottom: 20%; right: 8%; width: 150px; height: 150px;"></div>
        
        <div class="login-card p-8 md:p-10">
            {# ── Floating Avatar ── #}
            <div class="login-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-chart-pie" 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">{% if dash_ui_settings.site_name %}{{ dash_ui_settings.site_name }}{% else %}{{ site_title|default:_('Django administration') }}{% endif %}</h1>
                <p class="text-sm text-base-content/50 mt-1">{% trans "Access your admin panel securely." %}</p>
            </div>

            {% if form.errors and not form.non_field_errors %}
                <div class="alert alert-error mb-4 rounded-xl" role="alert">
                    <i class="fa-solid fa-circle-exclamation"></i>
                    {% blocktranslate count counter=form.errors.items|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
                </div>
            {% endif %}

            {% if form.non_field_errors %}
                {% for error in form.non_field_errors %}
                    <div class="alert alert-error mb-4 rounded-xl" role="alert">
                        <i class="fa-solid fa-circle-exclamation"></i>
                        {{ error }}
                    </div>
                {% endfor %}
            {% endif %}

            {% if user.is_authenticated %}
                <div class="alert alert-warning mb-4 rounded-xl" role="alert">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                    {% blocktranslate trimmed %}
                        You are authenticated as {{ username }}, but are not authorized to access this page. Would you like to login to a different account?
                    {% endblocktranslate %}
                </div>
            {% endif %}

            <form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
                <div class="space-y-4">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text text-sm font-medium">{{ form.username.label }}</span>
                        </label>
                        {{ form.username|add_class:"input w-full" }}
                        {% if form.username.errors %}
                            <label class="label">
                                <span class="label-text-alt text-error">{{ form.username.errors }}</span>
                            </label>
                        {% endif %}
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text text-sm font-medium">{{ form.password.label }}</span>
                        </label>
                        {{ form.password|add_class:"input w-full" }}
                        {% if form.password.errors %}
                            <label class="label">
                                <span class="label-text-alt text-error">{{ form.password.errors }}</span>
                            </label>
                        {% endif %}
                        <input type="hidden" name="next" value="{{ next }}">
                    </div>

                    {% url 'admin_password_reset' as password_reset_url %}
                    {% if password_reset_url %}
                        <div class="text-right">
                            <a href="{{ password_reset_url }}" class="text-sm link link-primary">
                                {% translate 'Forgotten your password or username?' %}
                            </a>
                        </div>
                    {% endif %}

                    <button type="submit" class="btn btn-primary w-full mt-6">
                        <i class="fa-solid fa-arrow-right-to-bracket"></i>
                        {% translate 'Log in' %}
                    </button>
                </div>
            </form>

            <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 %}