{% extends "base.html" %}
{% load i18n %}
{% load allauth account %}
{% load crispy_forms_filters %}

{% block title %}{{ _("Sign In") }}{% endblock title %}

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <!-- Page Header -->
            <div class="text-center mb-4">
                <h1 class="fw-bold">{{ _("Sign In") }}</h1>
                <p>
                    {% translate 'If you have not created an account yet, then please' %}
                        
                        <a href="{% url 'signup' %}">{{ _("Sign Up") }}</a>
                   
                </p>
            </div>

            <!-- Login Form -->
            {% if not SOCIALACCOUNT_ONLY %}
            <form method="post" action="{% url 'login' %}" class="needs-validation" novalidate>
                {% csrf_token %}
                {{ form|crispy }}
                {{ redirect_field }}
                <div class="d-grid gap-2 mt-3">
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="bi bi-box-arrow-in-right"></i> {{ _("Sign In") }}
                    </button>
                </div>
            </form>
            {% endif %}

            <!-- Alternate Login Options -->
            {% if LOGIN_BY_CODE_ENABLED or PASSKEY_LOGIN_ENABLED %}
            <hr class="my-4">
            <div class="d-grid gap-2">
                {% if PASSKEY_LOGIN_ENABLED %}
                <button type="submit" form="mfa_login" id="passkey_login" class="btn btn-outline-primary btn-lg">
                    <i class="bi bi-key"></i> {{ _("Sign in with a passkey") }}
                </button>
                {% endif %}
                {% if LOGIN_BY_CODE_ENABLED %}
                <a href="{{ request_login_code_url }}" class="btn btn-outline-primary btn-lg">
                    <i class="bi bi-envelope"></i> {{ _("Mail me a sign-in code") }}
                </a>
                {% endif %}
            </div>
            {% endif %}

            <!-- Social Login -->
            {% if SOCIALACCOUNT_ENABLED %}
            <hr class="my-4">
            {% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
            {% endif %}
        </div>
    </div>
</div>
{% 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 %}