{% extends "welcome_base.html" %}
{% load crispy_forms_filters %}
{% load i18n static %}
{% load allauth account %}
{% block head_title %}
    {% trans "Sign In" %}
{% endblock head_title %}
{% block content %}
    <section class="main my-2">
        <div class="container" style="max-width:40rem;">
            <div class="class="row form-container" id="form-container"">
                <a class="d-flex flex-center text-decoration-none mb-4"
                   href="{% url 'home' %}">
                    <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                        <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                            <img class="d-dark-none"
                                 src="{% static 'images/logos/logo-d.png' %}"
                                 alt="{% trans 'home' %}"
                                 width="58" />
                            <img class="d-light-none"
                                 src="{% static 'images/logos/logo.png' %}"
                                 alt="{% trans 'home' %}"
                                 width="58" />
                        </div>
                    </div>
                </a>
                <div class="text-center">
                    <h3 class="mb-4">{% trans "Sign In" %}</h3>
                    {% if not SOCIALACCOUNT_ONLY %}
                        <form method="post"
                              action="{% url 'account_login' %}"
                              class="form needs-validation"
                              novalidate>
                            {% csrf_token %}
                            <div class="mb-3 ">
                                <label class="form-label" for="id_login">{{ _("Email") }}</label>
                                <div class="form-icon-container">
                                    <input type="email"
                                           name="login"
                                           id="id_login"
                                           class="form-control form-icon-input placeholder-center"
                                           placeholder="{{ _("Email") }}"
                                           required>
                                    <span class="fas fa-user text-body fs-9 form-icon"></span>
                                </div>
                            </div>
                            <div class="mb-3 ">
                                <label class="form-label" for="id_password">{{ _("Password") }}</label>
                                <div class="form-icon-container">
                                    <input type="password"
                                           name="password"
                                           id="id_password"
                                           class="form-control form-icon-input placeholder-center"
                                           placeholder="{{ _("Password") }}"
                                           required>
                                    <span class="fas fa-key text-body fs-9 form-icon"></span>
                                </div>
                            </div>
                            <div class="form-group form-check">
                                <input type="checkbox"
                                       name="remember"
                                       id="id_remember"
                                       class="form-check-input">
                                <label class="form-check-label mb-0 fs-9" for="id_remember">{{ _("Remember Me") }}</label>
                            </div>
                            <button type="submit" class="btn btn-phoenix-primary btn-sm w-100">{% trans "Sign In" %}</button>
                            <div class="text-start mt-1">
                                <a class="fs-9" href="{% url 'account_reset_password' %}">{{ _("Forgot Password?") }}</a>
                            </div>
                            {% include 'partials/form_errors.html' %}
                        </form>
                        <div class="text-center my-3 fs-9">
                            {% trans 'If you have not created an account yet, then please' %}
                            <a class="fs-9 fw-bold" href="{% url 'account_signup' %}">{% trans 'Sign Up' %}</a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </section>

        {% if LOGIN_BY_CODE_ENABLED or PASSKEY_LOGIN_ENABLED %}
            <hr>
            {% element button_group vertical=True %}
                {% if PASSKEY_LOGIN_ENABLED %}
                    {% element button type="submit" form="mfa_login" id="passkey_login" tags="prominent,login,outline,primary" %}
                        {% trans "Sign in with a passkey" %}
                    {% endelement %}
                {% endif %}
                {% if LOGIN_BY_CODE_ENABLED %}
                    {% element button href=request_login_code_url tags="prominent,login,outline,primary" %}
                        {% trans "Mail me a sign-in code" %}
                    {% endelement %}
                {% endif %}
            {% endelement %}
        {% endif %}
        {% if SOCIALACCOUNT_ENABLED %}
            {% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
        {% endif %}
{% endblock content %}
{% block extra_body %}
    {{ block.super }}
    {% if PASSKEY_LOGIN_ENABLED %}
        {% include "mfa/webauthn/snippets/login_script.html" with button_id="passkey_login" %}
    {% endif %}
{% endblock %}