{% extends "djadmin/admin_base.html" %}
{% load static %}

{% block title %}
    Sign In - {{ site_title|default:"Django Admin" }}
{% endblock %}

{% block extra_css %}
    {# Hardcoded CSS link because auth pages don't go through djadmin's asset management #}
    <link rel="stylesheet" href="{% static 'djadmin/theme/css/theme.css' %}">
{% endblock %}

{% block extra_js %}
    {# Hardcoded JS for dark mode toggle and mobile menu #}
    <script src="{% static 'djadmin/theme/js/admin.js' %}"></script>
{% endblock %}

{% block content %}
    <article class="auth">
        <header>
            <h1>Sign In</h1>
        </header>

        <form method="post" action="{% url 'login' %}">
            {% csrf_token %}

            {% if form.errors %}
                <div role="alert" class="error">
                    <p>
                        {% if form.non_field_errors %}
                            {{ form.non_field_errors }}
                        {% else %}
                            Please correct the errors below.
                        {% endif %}
                    </p>
                </div>
            {% endif %}

            <fieldset>
                <div>
                    <label for="{{ form.username.id_for_label }}">{{ form.username.label }}:</label>
                    {{ form.username }}
                    {% if form.username.errors %}
                        <p>{{ form.username.errors|join:", " }}</p>
                    {% endif %}
                </div>

                <div>
                    <label for="{{ form.password.id_for_label }}">{{ form.password.label }}:</label>
                    {{ form.password }}
                    {% if form.password.errors %}
                        <p>{{ form.password.errors|join:", " }}</p>
                    {% endif %}
                </div>
            </fieldset>

            <footer>
                <button type="submit" class="primary">Sign In</button>
            </footer>

            <input type="hidden" name="next" value="{{ next }}">
        </form>
    </article>
{% endblock %}