{% 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-7 col-md-9">

            <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-1 text-primary"></i>
                    </div>

                    <!-- Heading -->
                    <h2 class="fw-bold mb-3">
                        {% trans "Verify Your Email Address" %}
                    </h2>

                    <!-- Description -->
                    <p class="text-muted">
                        {% blocktrans %}
                        Before continuing, we need to verify that you own the email address associated with your account.
                        This helps protect your account and ensures secure communication.
                        {% endblocktrans %}
                    </p>

                    <!-- Information -->
                    <div class="alert alert-info text-start mt-4">

                        <h6 class="alert-heading">
                            <i class="bi bi-info-circle-fill me-2"></i>
                            {% trans "Verification Email Sent" %}
                        </h6>

                        <p class="mb-0">
                            {% blocktrans %}
                            We've sent a verification email to your registered email address.
                            Please click the verification link in that email to complete the verification process.
                            If you don't see the email, check your Spam or Junk folder.
                            {% endblocktrans %}
                        </p>

                    </div>

                    <!-- Warning -->
                    <div class="alert alert-warning text-start mt-3">

                        <h6 class="alert-heading">
                            <i class="bi bi-exclamation-triangle-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 "Wait a few minutes for delivery." %}</li>
                            <li>{% trans "Verify that your email address is correct." %}</li>
                        </ul>

                    </div>

                    <!-- Actions -->
                    <div class="d-grid gap-2 mt-4">

                        <a href="{% url 'account_email' %}"
                           class="btn btn-primary btn-lg">

                            <i class="bi bi-envelope 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 Card -->
            <div class="card border-0 bg-light mt-4">

                <div class="card-body">

                    <h6 class="fw-semibold">

                        <i class="bi bi-lightbulb-fill text-warning me-2"></i>

                        {% trans "Need to change your email?" %}

                    </h6>

                    <p class="small text-muted mb-0">

                        {% blocktrans %}
                        If you entered the wrong email address or no longer have access to it,
                        you can update your email address from the Email Management page before verifying it.
                        {% endblocktrans %}

                    </p>

                </div>

            </div>

        </div>

    </div>

</div>
{% endblock %}