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

{% block extrastyle %}
    <style>
        .login-hero {
            position: relative;
            overflow: hidden;
            border-radius: 2rem;
            background: linear-gradient(135deg, var(--color-base-100) 0%, var(--color-base-200) 60%, var(--color-base-300) 100%);
            border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
        }

        .login-hero::before {
            content: "";
            position: absolute;
            inset: -40% auto auto -20%;
            width: 340px;
            height: 340px;
            background: radial-gradient(circle, color-mix(in oklab, var(--color-primary) 28%, transparent), transparent 70%);
            filter: blur(14px);
        }

        .login-hero::after {
            content: "";
            position: absolute;
            inset: auto -20% -60% auto;
            width: 420px;
            height: 420px;
            background: radial-gradient(circle, color-mix(in oklab, var(--color-accent) 25%, transparent), transparent 70%);
            filter: blur(18px);
        }
    </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 %}
    {% if form.errors and not form.non_field_errors %}
        <p class="errornote alert alert-error">
            {% blocktranslate count counter=form.errors.items|length %}Please correct the error below.{% plural %}Please
                correct the errors below.{% endblocktranslate %}
        </p>
    {% endif %}

    {% if form.non_field_errors %}
        {% for error in form.non_field_errors %}
            <p class="errornote alert alert-error">
                {{ error }}
            </p>
        {% endfor %}
    {% endif %}

    <div id="content-main" class="flex justify-center items-center min-h-[70vh] px-4 py-8">
        <div class="login-hero w-full max-w-5xl grid gap-6 md:grid-cols-2 p-6 md:p-10">
            <div class="relative z-10 flex flex-col justify-center gap-4">
                <p class="text-xs uppercase tracking-[0.3em] text-base-content/60">
                    {% trans "Welcome" %}
                </p>
                <h2 class="text-3xl font-semibold md:text-4xl">
                    {% translate "Admin Login" %}
                </h2>
                <p class="text-sm text-base-content/70">
                    {% trans "Sign in to manage your project with confidence." %}
                </p>
                <div class="mt-4 flex gap-2">
                    <span class="badge badge-outline">{% trans "Secure" %}</span>
                    <span class="badge badge-outline">{% trans "Fast" %}</span>
                    <span class="badge badge-outline">{% trans "Responsive" %}</span>
                </div>
            </div>
            <div class="relative z-10 card bg-base-100/90 shadow-lg border border-base-200">
                <div class="card-body">
                    <div class="flex items-center justify-between">
                        <h3 class="text-xl font-semibold">{% trans "Access" %}</h3>
                        <span class="text-xs text-base-content/60">{% trans "Admin Area" %}</span>
                    </div>

                {% if user.is_authenticated %}
                    <p class="errornote alert alert-warning">
                        {% 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 %}
                    </p>
                {% endif %}

                    <form action="{{ app_path }}" method="post" id="login-form" class="mt-4">{% csrf_token %}
                    <!-- Username Field -->
                    <div class="form-control">
                        {{ form.username.errors }}
                        <label class="label">
                            <span class="label-text">{{ form.username.label }}</span>
                        </label>
                        {{ form.username|add_class:"input input-bordered w-full" }}
                    </div>

                    <!-- Password Field -->
                    <div class="form-control mt-4">
                        {{ form.password.errors }}
                        <label class="label">
                            <span class="label-text">{{ form.password.label }}</span>
                        </label>
                        {{ form.password|add_class:"input input-bordered w-full" }}
                        <input type="hidden" name="next" value="{{ next }}">
                    </div>

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

                    <!-- Submit Button -->
                    <div class="form-control mt-6">
                        <button type="submit" class="btn btn-primary w-full">{% translate 'Log in' %}</button>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}