{% 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 %}
                           <!-- Social Login Buttons -->
                    <div class="d-grid gap-2">
                        {% provider_login_url "google" as google_url %}
                        {% if google_url %}
                        <a href="{{ google_url }}" class="btn btn-outline-danger d-flex align-items-center justify-content-center gap-2">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg" width="20" height="20" alt="Google">
                            Continue with Google
                        </a>
                        {% endif %}

                        {% provider_login_url "facebook" as facebook_url %}
                        {% if facebook_url %}
                        <a href="{{ facebook_url }}" class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2">
                            <i class="bi bi-facebook"></i>
                            Continue with Facebook
                        </a>
                        {% endif %}

                        {% provider_login_url "twitter" as twitter_url %}
                        {% if twitter_url %}
                        <a href="{{ twitter_url }}" class="btn btn-outline-info d-flex align-items-center justify-content-center gap-2">
                            <i class="bi bi-twitter"></i>
                            Continue with Twitter
                        </a>
                        {% endif %}

                        {% provider_login_url "instagram" as instagram_url %}
                        {% if instagram_url %}
                        <a href="{{ instagram_url }}" class="btn btn-outline-warning d-flex align-items-center justify-content-center gap-2">
                            <i class="bi bi-instagram"></i>
                            Continue with Instagram
                        </a>
                        {% endif %}

                        {% provider_login_url "microsoft" as microsoft_url %}
                        {% if microsoft_url %}
                        <a href="{{ microsoft_url }}" class="btn btn-outline-dark d-flex align-items-center justify-content-center gap-2">
                            <i class="bi bi-microsoft"></i>
                            Continue with Microsoft
                        </a>
                        {% endif %}
                    </div>

                    <div class="text-center mt-4">
                        <p class="mb-0">
                            Don't have an account? 
                            <a href="{% url 'account_signup' %}" class="text-decoration-none">Sign Up</a>
                        </p>
                    </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 %}