{% 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>
            {% 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="{{ _("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="{{ _("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-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 %}