{% 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 %}
                             <!-- 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 %}