{% extends "account/base_entrance.html" %}
{% load static i18n %}
{% load allauth account %}
{% load phoxtail_core_tags %}
{% block head_title %}
    {% trans "Sign In" %}
{% endblock head_title %}
{% block extra_head %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'phoxtail_core/css/account/login.css' %}">
{% endblock %}
{% block body %}
    {% if messages %}
        {% include "account/messages.html" %}
    {% endif %}
    <div class="auth-page">
        <div class="auth-container">
            <div class="auth-card">
                {% include "allauth/components/logo.html" %}
                <div class="auth-header">
                    <h1 class="auth-heading">{% trans "Login" %}</h1>
                    {% if not SOCIALACCOUNT_ONLY %}
                        <p class="auth-subtitle">
                            {% setvar link %}
                                <a href="{{ signup_url }}" class="auth-link">
                            {% endsetvar %}
                            {% setvar end_link %}
                                </a>
                            {% endsetvar %}
                            {% blocktranslate %}If you have not created an account yet, then please {{ link }}sign up{{ end_link }} first.{% endblocktranslate %}
                        </p>
                    {% endif %}
                </div>
                {% url 'account_login' as login_url %}
                <form class="auth-form"
                      method="post"
                      action="{{ login_url }}"
                      tags="entrance,login">
                    {% csrf_token %}
                    {% if form.non_field_errors %}
                        {% for error in form.non_field_errors %}
                            <p class="auth-error">
                                <span class="auth-error-dot"></span>
                                {{ error }}
                            </p>
                        {% endfor %}
                    {% endif %}
                    <div class="auth-field">
                        <label for="{{ form.login.id_for_label }}" class="auth-label">
                            {{ form.login.label }}
                            {% if form.login.field.required %}<span class="auth-required">*</span>{% endif %}
                        </label>
                        <div class="auth-input-wrapper">
                            {{ form.login|add_class:"auth-input" }}
                            <div class="auth-input-glow"></div>
                            {% if form.login.errors %}
                                <div class="auth-errors-block">
                                    {% for error in form.login.errors %}
                                        <p class="auth-error">
                                            <span class="auth-error-dot"></span>
                                            {{ error }}
                                        </p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="auth-field">
                        <label for="{{ form.password.id_for_label }}" class="auth-label">
                            {{ form.password.label }}
                            {% if form.password.field.required %}<span class="auth-required">*</span>{% endif %}
                        </label>
                        <div class="auth-input-wrapper">
                            {{ form.password|add_class:"auth-input" }}
                            <div class="auth-input-glow"></div>
                            {% if form.password.errors %}
                                <div class="auth-errors-block">
                                    {% for error in form.password.errors %}
                                        <p class="auth-error">
                                            <span class="auth-error-dot"></span>
                                            {{ error }}
                                        </p>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        <div class="auth-pt-2 auth-text-center">
                            <a href="{% url 'account_reset_password' %}"
                               class="auth-link auth-text-muted">{% trans "Forgot your password?" %}</a>
                        </div>
                    </div>
                    <div class="auth-checkbox-row">
                        <input type="checkbox"
                               name="{{ form.remember.html_name }}"
                               id="{{ form.remember.id_for_label }}"
                               class="auth-checkbox"
                               {% if form.remember.value %}checked{% endif %}>
                        <label for="{{ form.remember.id_for_label }}" class="auth-checkbox-label">{{ form.remember.label }}</label>
                    </div>
                    {{ redirect_field }}
                    <div class="auth-actions">
                        {% include "allauth/components/submit_button.html" with text_key="Login" button_type="submit" %}
                    </div>
                </form>
                {% if LOGIN_BY_CODE_ENABLED or PASSKEY_LOGIN_ENABLED %}
                    <div class="auth-section-divider">
                        {% if PASSKEY_LOGIN_ENABLED %}
                            {% include "allauth/components/submit_button.html" with text_key="Sign in with a passkey" button_type="submit" form_id="mfa_login" button_id="passkey_login" %}
                        {% endif %}
                        {% if LOGIN_BY_CODE_ENABLED %}
                            {% include "allauth/components/submit_button.html" with text_key="Send me a sign-in code" button_type="link" url=request_login_code_url %}
                        {% endif %}
                    </div>
                {% endif %}
                {% if SOCIALACCOUNT_ENABLED %}
                    <div class="auth-section-divider">{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}</div>
                {% endif %}
            </div>
        </div>
{% endblock body %}
{% block extra_body %}
    {{ block.super }}
    {% if PASSKEY_LOGIN_ENABLED %}
        {% include "mfa/webauthn/snippets/login_script.html" with button_id="passkey_login" %}
    {% endif %}
{% endblock %}