{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Verify Your Email Address" %}{% endblock %}
{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8">
            <div class="card border-0 shadow-lg rounded-4">
                <div class="card-body p-5 text-center">
                    <!-- Icon -->
                    <div class="mb-4">
                        <i class="bi bi-envelope-check-fill display-2 text-success"></i>
                    </div>
                    <!-- Heading -->
                    <h2 class="fw-bold mb-3">
                        {% trans "Verify Your Email Address" %}
                    </h2>
                    <p class="text-muted mb-4">
                        {% blocktrans %}
                        We've sent a verification email to the address you provided.
                        Please click the verification link in the email to activate your account.
                        {% endblocktrans %}
                    </p>
                    <!-- Information Alert -->
                    <div class="alert alert-info text-start">
                        <h6 class="alert-heading">
                            <i class="bi bi-info-circle-fill me-2"></i>
                            {% trans "Didn't receive the email?" %}
                        </h6>
                        <ul class="mb-0 ps-3">
                            <li>{% trans "Check your Spam or Junk folder." %}</li>
                            <li>{% trans "Ensure you entered the correct email address." %}</li>
                            <li>{% trans "Wait a few minutes, as email delivery may be delayed." %}</li>
                            <li>{% trans "If the email still doesn't arrive, request another verification email or contact support." %}</li>
                        </ul>
                    </div>
                    <!-- Action Buttons -->
                    <div class="d-grid gap-2 mt-4">
                        <a href="{% url 'account_email' %}"
                           class="btn btn-primary btn-lg">
                            <i class="bi bi-arrow-repeat me-2"></i>
                            {% trans "Manage Email Addresses" %}
                        </a>
                        <a href="{% url 'account_login' %}"
                           class="btn btn-outline-secondary">
                            <i class="bi bi-box-arrow-in-right me-2"></i>
                            {% trans "Back to Sign In" %}
                        </a>
                    </div>
                </div>
            </div>

            <!-- Help Section -->
            <div class="text-center mt-4">

                <small class="text-muted">

                    <i class="bi bi-life-preserver me-1"></i>

                    {% blocktrans %}
                    Need help? Contact our support team if you continue experiencing verification issues.
                    {% endblocktrans %}

                </small>

            </div>

        </div>

    </div>
</div>
{% endblock %}