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

{% block title %}{% if form.errors %}{% translate "Error:" %} {% endif %}{{ block.super }}{% endblock %}
{% block sider_bar %}{% endblock %}
{% block header %}{% endblock %}

{% block body %}
    <div class="page page-center">
        <div class="container container-normal py-4">
            <div class="row align-items-center g-4">
                <div class="col-lg">
                    <div class="container-tight">
                        <div class="text-center mb-4">
                            <!-- BEGIN NAVBAR LOGO -->
                            <div aria-label="Tabler" class="navbar-brand navbar-brand-autodark">
                                {% if site_config.site_logo %}
                                    <img src="{% media_url site_config.site_logo %}" alt="" class="navbar-brand-image">
                                {% else %}
                                    <img src="{% static 'admin/svg/pinmok.svg' %}" alt="" class="navbar-brand-image">
                                {% endif %}
                                {{ site_config.site_name }}
                            </div>
                            <!-- END NAVBAR LOGO -->
                        </div>
                        <div class="card card-md">
                            {% if form.non_field_errors %}
                                <div class="card-header">
                                    {% for error in form.non_field_errors %}{% alert error %}{% endfor %}
                                </div>
                            {% endif %}
                            {% if form.errors and not form.non_field_errors %}
                                <div class="card-header">
                                    <div class="alert alert-danger">
                                        <div class="alert-icon">{% icon 'tabler-alert-circle' 'icon alert-icon' %}</div>
                                        {% blocktranslate trimmed count counter=form.errors.items|length %}
                                            Please correct the error below.{% plural %}Please correct the errors below.
                                        {% endblocktranslate %}
                                    </div>
                                </div>
                            {% endif %}
                            {% if user.is_authenticated %}
                                <div class="card-header">
                                    <div class="alert alert-danger">
                                        <div class="alert-icon">{% icon 'tabler-alert-circle' 'icon alert-icon' %}</div>
                                        {% 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>
                                </div>
                            {% endif %}
                            <div class="card-body">
                                <form action="{{ app_path }}" method="post" autocomplete="off" novalidate>
                                    {% csrf_token %}<input type="hidden" name="next" value="{{ next }}">
                                    <div class="mb-3">
                                        <label for="{{ form.username.id_for_label }}" class="required form-label">
                                            {{ form.username.label }}
                                        </label>
                                        <input type="text" name="{{ form.username.name }}" autocapitalize="none" autocomplete="username"
                                               id="{{ form.username.id_for_label }}" class="form-control" maxlength="150" required>
                                    </div>
                                    <div class="mb-3">
                                        <label for="{{ form.password.id_for_label }}" class="required form-label">
                                            {{ form.password.label }}
                                        </label>
                                        <input type="password" name="{{ form.password.name }}" autocomplete="current-password"
                                               id="{{ form.password.id_for_label }}" class="form-control" maxlength="150" required>
                                    </div>
                                    {% url 'admin_password_reset' as password_reset_url %}
                                    {% if password_reset_url %}
                                        <div class="mb-3">
                                            <a href="{{ password_reset_url }}" class="form-label text-end">
                                                {% translate 'Forgotten your login credentials?' %}
                                            </a>
                                        </div>
                                    {% endif %}
                                    <div class="form-footer">
                                        <button type="submit" class="btn btn-primary w-100">{% translate 'Log in' %}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg d-none d-lg-block">
                    <img src="{% static 'admin/svg/boy_with_key.svg' %}" alt="" class="img d-block mx-auto">
                </div>
            </div>
        </div>
    </div>
{% endblock %}