{% extends "base.html" %}
{% load i18n %}
{% load crispy_forms_tags %}
{% load allauth account socialaccount %}
{% block title %}
    {% trans "Sign Up" %}
{% endblock %}
{% block content %}
    <div class="container py-5">
        <div class="row justify-content-center align-items-center">
            <div class="col-lg-6 col-md-8 col-sm-10">
                <div class="card border-0 shadow-lg rounded-4">
                    <div class="card-body p-5">
                        <!-- Header -->
                        <div class="text-center mb-4">
                            <div class="mb-3">
                                <i class="bi bi-person-plus-fill display-3 text-primary"></i>
                            </div>
                            <h2 class="fw-bold mb-2">{% trans "Create an Account" %}</h2>
                            <p class="text-muted">{% trans "Join us today. It only takes a minute." %}</p>
                        </div>
                        <!-- Login Link -->
                        <div class="text-center mb-4">
                            <small class="text-muted">
                                {% blocktranslate %}
                            Already have an account?
                            <a href="{{ login_url }}" class="text-decoration-none fw-semibold">
                                Sign In
                            </a>
                            {% endblocktranslate %}
                            </small>
                        </div>
                        <!-- Form -->
                        {% if not SOCIALACCOUNT_ONLY %}
                            <form method="post" action="{% url 'account_signup' %}" novalidate>
                                {% csrf_token %}
                                {{ form|crispy }}
                                {{ redirect_field }}
                                <div class="d-grid mt-4">
                                    <button class="btn btn-primary btn-lg">
                                        <i class="bi bi-person-check-fill me-2"></i>
                                        {% trans "Create Account" %}
                                    </button>
                                </div>
                            </form>
                        {% endif %}
                        <!-- Passkey -->
                        {% if PASSKEY_SIGNUP_ENABLED %}
                            <div class="my-4">
                                <hr>
                            </div>
                            <div class="d-grid">
                                <a href="{{ signup_by_passkey_url }}" class="btn btn-outline-primary">
                                    <i class="bi bi-shield-lock me-2"></i>
                                    {% trans "Sign up with Passkey" %}
                                </a>
                            </div>
                        {% endif %}
                        <!-- Social Login -->
                        {% if SOCIALACCOUNT_ENABLED %}
                            <div class="my-4">
                                <hr>
                                <div class="text-center">
                                    <span class="text-muted">{% trans "OR CONTINUE WITH" %}</span>
                                </div>
                            </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 %}