{% extends "base.html" %}
{% load crispy_forms_tags %}
{% load django_bootstrap5 %}
{% load i18n %}
{% load allauth account socialaccount %}
{% block title %}
    {% trans "Sign In" %}
{% endblock %}
{% block content %}
    <div class="container py-5">
        <div class="row justify-content-center align-items-center">
            <div class="col-lg-5 col-md-7">
                <div class="card shadow-lg border-0 rounded-4">
                    <div class="card-body p-5">
                        <div class="text-center mb-4">
                            <div class="mb-3">
                                <i class="bi bi-person-circle display-3 text-primary"></i>
                            </div>
                            <h2 class="fw-bold">{% trans "Welcome Back" %}</h2>
                            <p class="text-muted">{% trans "Sign in to continue to your account." %}</p>
                        </div>
                        {% if not SOCIALACCOUNT_ONLY %}
                            <div class="text-center mb-4">
                                <small class="text-muted">
                                    {% blocktranslate %}
                            Don't have an account?
                            <a href="{{ signup_url }}" class="text-decoration-none fw-semibold">
                                Sign Up
                            </a>
                            {% endblocktranslate %}
                                </small>
                            </div>
                            <form method="post" action="{% url 'account_login' %}">
                                {% csrf_token %}
                                {{ form.non_field_errors }}
                                {{ form|crispy }}
                                {{ redirect_field }}
                                <div class="d-flex justify-content-end mb-3">
                                    <a href="{% url 'account_reset_password' %}"
                                       class="text-decoration-none small">{% trans "Forgot Password?" %}</a>
                                </div>
                                <div class="d-grid">
                                    <button class="btn btn-primary btn-lg" type="submit">
                                        <i class="bi bi-box-arrow-in-right me-2"></i>
                                        {% trans "Sign In" %}
                                    </button>
                                </div>
                            </form>
                        {% endif %}
                        {% if LOGIN_BY_CODE_ENABLED or PASSKEY_LOGIN_ENABLED %}
                            <div class="my-4">
                                <hr>
                            </div>
                            <div class="d-grid gap-2">
                                {% if PASSKEY_LOGIN_ENABLED %}
                                    <button type="submit"
                                            form="mfa_login"
                                            id="passkey_login"
                                            class="btn btn-outline-primary">
                                        <i class="bi bi-shield-lock me-2"></i>
                                        {% trans "Sign in with Passkey" %}
                                    </button>
                                {% endif %}
                                {% if LOGIN_BY_CODE_ENABLED %}
                                    <a href="{{ request_login_code_url }}" class="btn btn-outline-secondary">
                                        <i class="bi bi-envelope-check me-2"></i>
                                        {% trans "Send me a Sign-in Code" %}
                                    </a>
                                {% endif %}
                            </div>
                        {% endif %}
                        {% if SOCIALACCOUNT_ENABLED %}
                            <div class="my-4">
                                <hr>
                                <p class="text-center text-muted small mb-3">{% trans "OR" %}</p>
                            </div>
                           <div class="d-grid gap-2">
                                <a href="{% provider_login_url 'google' %}"
                                   class="btn btn-outline-danger">Continue with Google</a>
                                <a href="{% provider_login_url 'microsoft' %}"
                                   class="btn btn-outline-primary">Continue with Microsoft</a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_body %}
    {{ block.super }}
    {% if PASSKEY_LOGIN_ENABLED %}
        {% include "mfa/webauthn/snippets/login_script.html" with button_id="passkey_login" %}
    {% endif %}
{% endblock %}