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


{% block bodyclass %}{{ block.super }} min-h-screen bg-light-50 dark:bg-dark-50 flex flex-col justify-center py-12
    sm:px-6 lg:px-8{% endblock %}

{% block usertools %}{% endblock %}

{% block nav-global %}{% endblock %}

{% block nav-sidebar %}{% endblock %}

{% block header %}{% endblock %}

{% block content_title %}{% endblock %}

{% block contentclass %}{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}

    <div class="bg-light-0 dark:bg-dark-0 flex-none sm:mx-auto sm:w-full sm:max-w-md">
        <div class="py-8 px-4 shadow sm:rounded-lg sm:px-10">

            {% block branding_login %}
                <picture>
                    <source srcset="https://static.snoweb.fr/media/icon-snoweb-dark-no-aspect.svg"
                            media="(prefers-color-scheme: dark)">
                    <img class="mx-auto h-12 w-auto"
                         src="https://static.snoweb.fr/media/icon-snoweb-light-no-aspect.svg"
                         alt="Snoweb Logo">
                </picture>
            {% endblock %}

            <h2 class="my-6 text-center text-3xl font-extrabold text-light-900 dark:text-dark-900">
                {% translate "Log in" %}
            </h2>

            {% if form.errors and not form.non_field_errors %}
                <p class="text-center text-red-900">
                    {% if form.errors.items|length == 1 %}{% translate "Please correct the error below." %}{% else %}
                        {% translate "Please correct the errors below." %}{% endif %}
                </p>
            {% endif %}

            {% if form.non_field_errors %}
                {% for error in form.non_field_errors %}
                    <p class="text-center text-red-900">
                        {{ error }}
                    </p>
                {% endfor %}
            {% endif %}

            {% if user.is_authenticated %}
                <p class="text-center text-light-900 dark:text-dark-900">
                    {% 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 class="space-y-6" action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
                <div class="w-full-input">
                    {{ form.username.errors }}
                    {{ form.username.label_tag }} {{ form.username }}
                </div>
                <div class="w-full-input">
                    {{ form.password.errors }}
                    {{ form.password.label_tag }} {{ form.password }}
                    <input type="hidden" name="next" value="{{ next }}">
                </div>
                {% url 'admin_password_reset' as password_reset_url %}
                {% if password_reset_url %}
                    <div class="text-sm">
                        <a class="font-medium text-primary-600 hover:text-primary-500"
                           href="{{ password_reset_url }}">{% translate 'Forgotten your password or username?' %}</a>
                    </div>
                {% endif %}
                <div>
                    <input class="w-full flex justify-center py-2 px-4 rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                           type="submit"
                           value="{% translate 'Log in' %}">
                </div>
            </form>

            {% block extra_content %}
            {% endblock %}
        </div>
    </div>

{% endblock %}
