{% extends 'unfold/layouts/unauthenticated.html' %}

{% load i18n static unfold %}

{% block extrastyle %}
    {{ block.super }}
    {{ form.media }}
{% endblock %}

{% block title %}
    {{ title }} | {{ site_title }}
{% endblock %}

{% block content %}
    {% include "unfold/helpers/unauthenticated_title.html" with title=site_title|default:_('Django site admin') subtitle=_('Welcome back to') %}

    {% include "unfold/helpers/messages.html" %}

    {% if form.errors or form.non_field_errors %}
        <div class="flex flex-col gap-4 mb-8 *:mb-0">
            {% include "unfold/helpers/messages/errornote.html" with errors=form.errors %}

            {% include "unfold/helpers/messages/error.html" with errors=form.non_field_errors %}

            {% if user.is_authenticated %}
                {% blocktranslate trimmed asvar message %}
                    You are authenticated as {{ username }}, but are not authorized to
                    access this page. Would you like to login to a different account?
                {% endblocktranslate %}

                {% include "unfold/helpers/messages/error.html" with error=message %}
            {% endif %}
        </div>
    {% endif %}

    {% block login_before %}{% endblock %}

    <form action="{{ app_path }}" method="post" id="login-form">
        {% csrf_token %}

        {% include "unfold/helpers/field.html" with field=form.username %}

        {% include "unfold/helpers/field.html" with field=form.password %}

        <div class="flex flex-col gap-3 mt-6">
            {% component "unfold/components/button.html" with submit=1 variant="primary" class="submit-row w-full" %}
                {% translate 'Log in' %} <span class="material-symbols-outlined relative right-0 transition-all group-hover:-right-1 text-sm">arrow_forward</span>
            {% endcomponent %}

            {% url 'admin_password_reset' as password_reset_url %}
            {% url 'admin:admin_password_reset' as unfold_password_reset_url %}

            {% if password_reset_url or unfold_password_reset_url %}
                {% component "unfold/components/button.html" with href=password_reset_url|default:unfold_password_reset_url variant="secondary" class="password-reset-link w-full" %}
                    {% translate 'Forgotten your password or username?' %}
                {% endcomponent %}
            {% endif %}
        </div>
    </form>

    {% block login_after %}{% endblock %}
{% endblock %}
