{% extends 'tournaments/base.html' %}

{% block head_title %} Création de compte {% endblock %}
{% block first_title %} Padel Club {% endblock %}
{% block second_title %} Création de compte {% endblock %}

{% block content %}
{% load static %}
{% load tz %}

<div class="grid-x">
    <div class="bubble">
        <label class="title">Bienvenue ! Votre compte a été créé avec succès</label>
        <div class="cell medium-6 large-6 padding10">
            <p>Un e-mail de confirmation a été envoyé à :<br>
            <strong>{{ user_email }}</strong></p>

            <p>Pour finaliser votre inscription, merci de :</p>
            <ol>
                <li>Vérifier votre boîte de réception (et vos spams si nécessaire)</li>
                <li>Cliquer sur le lien de confirmation dans l'e-mail</li>
            </ol>

            <!-- Resend activation section -->
            <div style="margin-top: 20px; padding: 15px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px;">
                <p><strong>Vous n'avez pas reçu l'e-mail ?</strong></p>
                <p>Si l'e-mail de confirmation n'arrive pas dans les prochaines minutes, vous pouvez en demander un nouveau :</p>

                <form method="post" action="{% url 'resend-activation' %}" style="margin-top: 10px;">
                    {% csrf_token %}
                    <input type="hidden" name="username_or_email" value="{{ user_email }}">
                    {% if next_url %}
                        <input type="hidden" name="next" value="{{ next_url }}">
                    {% endif %}
                    <button type="submit" class="rounded-button" style="background-color: #28a745; margin-top: 10px;">
                        Renvoyer l'e-mail d'activation
                    </button>
                </form>

                <p style="margin-top: 10px; font-size: 14px; color: #6c757d;">
                    Le lien sera envoyé à : <strong>{{ user_email }}</strong>
                </p>
            </div>
        </div>
        <div class="button-container">
            <a href="{{ next_url }}" class="rounded-button">Continuer</a>
        </div>
        <div class="support-link">
            <p>Un problème ? <a href="mailto:support@padelclub.app" class="styled-link">Contactez-nous</a></p>
        </div>
    </div>
</div>

<style>
    .button-container {
        margin-bottom: 20px;
    }
</style>
{% endblock %}