{% 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-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: 2rem;
            box-shadow: 0 24px 80px color-mix(in oklab, var(--color-base-content) 8%, transparent);
        }

        .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 top-navbar %}{% endblock %}

{% block content %}
    <div class="login-page px-4 py-8">
        <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">
            <div class="text-center mb-8">
                <div class="flex justify-center mb-4">
                    <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary">
                        <i class="fa-solid fa-chart-pie text-2xl"></i>
                    </div>
                </div>
                <h1 class="text-2xl font-bold tracking-tight">{{ site_title|default:_('Django administration') }}</h1>
                <p class="text-sm text-base-content/50 mt-1">{% trans "Sign in to manage your project." %}</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 input-bordered 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 input-bordered 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-bolt"></i> {% trans "Fast" %}</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-mobile-screen"></i> {% trans "Responsive" %}</span>
            </div>
        </div>
    </div>
{% endblock %}