{% 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="row flex-center ">
            <div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3">
                <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 %}

                        </div>
                        <form method="post" action="{% url 'account_login' %}" class="form needs-validation" novalidate dir="rtl">
                            {% csrf_token %}
                            <div class="mb-3 text-start">
                                <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 text-start">
                                <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>
        <section class="pt-lg-0 pt-xl-8">
            {% include 'footer.html' %}
        </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 %}