{% extends "base.html" %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}{% trans "Passkey Sign Up" %}{% endblock %}

{% block content %}
<div class="container py-5">

    <div class="row justify-content-center">

        <div class="col-lg-5 col-md-7">

            <div class="card shadow-lg border-0 rounded-4">

                <div class="card-body p-5">

                    <!-- Header -->
                    <div class="text-center mb-4">

                        <div class="mb-3">
                            <i class="bi bi-shield-lock-fill display-2 text-primary"></i>
                        </div>

                        <h2 class="fw-bold">
                            {% trans "Create an Account with a Passkey" %}
                        </h2>

                        <p class="text-muted">
                            {% trans "Register securely using a passkey. No password is required." %}
                        </p>

                    </div>

                    <!-- Login Link -->
                    <div class="text-center mb-4">

                        <small class="text-muted">

                            {% blocktrans %}
                            Already have an account?
                            <a href="{{ login_url }}" class="text-decoration-none fw-semibold">
                                Sign In
                            </a>
                            {% endblocktrans %}

                        </small>

                    </div>

                    <!-- Signup Form -->
                    <form method="post"
                          action="{% url 'account_signup_by_passkey' %}"
                          novalidate>

                        {% csrf_token %}

                        {{ form|crispy }}

                        {{ redirect_field }}

                        <div class="d-grid mt-4">

                            <button
                                type="submit"
                                class="btn btn-primary btn-lg">

                                <i class="bi bi-person-plus-fill me-2"></i>

                                {% trans "Create Account" %}

                            </button>

                        </div>

                    </form>

                    <hr class="my-4">

                    <!-- Other Signup Options -->
                    <div class="d-grid">

                        <a href="{{ signup_url }}"
                           class="btn btn-outline-secondary">

                            <i class="bi bi-list-ul me-2"></i>

                            {% trans "Other Sign Up Options" %}

                        </a>

                    </div>

                </div>

            </div>

            <!-- Information Card -->
            <div class="card border-0 bg-light mt-4">

                <div class="card-body">

                    <h6 class="fw-semibold">

                        <i class="bi bi-info-circle-fill text-primary me-2"></i>

                        {% trans "Why use a passkey?" %}

                    </h6>

                    <ul class="small text-muted mb-0">
                        <li>{% trans "Sign in without remembering a password." %}</li>
                        <li>{% trans "Protect your account against phishing attacks." %}</li>
                        <li>{% trans "Use your fingerprint, face recognition, or device PIN for authentication." %}</li>
                        <li>{% trans "Enjoy faster and more secure access to your account." %}</li>
                    </ul>

                </div>

            </div>

        </div>

    </div>

</div>
{% endblock %}