{% include 'header.twig' %}

<style>
/* ===== Confirm Email Page Styling (UI/UX Improved) ===== */
.confirm-email-wrapper {
    padding: 20px; /* left & right breathing space */
    display: flex;
    justify-content: center;
}

.confirm-email-card {
    width: 100%;
    max-width: 500px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    animation: fadeIn 0.6s ease-in-out;
}

/* Card Header */
.confirm-email-card .card-header {
    background: linear-gradient(135deg, #ff416c, #ff4b2b); /* red gradient like dashboard */
    color: #fff;
    text-align: center;
    padding: 18px;
}
.confirm-email-card .card-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

/* Card Body */
.confirm-email-card .card-body {
    padding: 25px;
    text-align: center;
}
.confirm-email__description {
    font-size: 15px;
    color: #6b7280;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* Buttons */
.confirm-email__actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.confirm-email__actions .btn {
    font-weight: 600;
    padding: 12px 18px;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

/* Primary Button */
.confirm-email__actions .btn-big-primary {
    background: linear-gradient(135deg, #007bff, #21c5fb);
    border: none;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,123,255,0.3);
}
.confirm-email__actions .btn-big-primary:hover {
    background: linear-gradient(135deg, #0056b3, #0da4d9);
    transform: translateY(-2px);
}

/* Secondary Button */
.confirm-email__actions .btn-big-secondary {
    background: #f9fafb;
    color: #374151;
    border: 1px solid #e5e7eb;
}
.confirm-email__actions .btn-big-secondary:hover {
    background: #f3f4f6;
    transform: translateY(-2px);
}

/* Alerts */
.alert {
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 20px;
}

/* Modal Styling */
.modal-content {
    border-radius: 15px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.2);
}
.modal-header {
    background: linear-gradient(135deg, #007bff, #21c5fb);
    color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.modal-footer .btn {
    padding: 10px 18px;
    border-radius: 8px;
}

/* Animation */
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(20px);}
    to {opacity: 1; transform: translateY(0);}
}

/* ===== Responsive Fixes ===== */
@media (max-width: 768px) {
    .confirm-email-wrapper {
        padding: 15px;
    }
    .confirm-email-card {
        margin-top: 40px;
    }
    .confirm-email-card .card-header h3 {
        font-size: 18px;
    }
    .confirm-email__description {
        font-size: 14px;
    }
    .confirm-email__actions .btn {
        width: 100%;
    }
}
</style>

<div class="confirm-email-wrapper">
    <div class="confirm-email-card">
        <div class="card-header">
            <h3><i class="fas fa-envelope-open-text"></i> Confirm Email</h3>
        </div>
        <div class="card-body">
            <div class="confirm-email__description">
                Please check your inbox and click the link to confirm your email address.
            </div>

            <div class="confirm-email__actions">
                {% if settings["resend_max"] == user["resend_max"] %}
                    <div class="alert alert-warning w-100 text-center">
                        Sorry you have used <strong>{{user["resend_max"]}}</strong> confirmation mails, limit reached.
                    </div>
                {% else %}
                    <a href="confirm_email/resend">
                        <button class="btn btn-big-primary" id="resendEmailLink">
                            <i class="fas fa-paper-plane"></i> Resend Email
                        </button>
                    </a>
                {% endif %}

                {% if user["change_email"] == 2 %}
                    <button class="btn btn-big-secondary" id="changeEmailLink" data-toggle="modal" data-target="#changeEmailModal">
                        <i class="fas fa-edit"></i> Change Email
                    </button>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Change Email Modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="changeEmailModal" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <form class="modal-content" method="post" action="confirm_email/">
                <div class="modal-header">
                    <h4 class="modal-title">Change Email</h4>
                    <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div id="changeEmailError" class="alert alert-danger mb-3 d-none"></div>

                    {% if error %}
                        <div class="alert alert-danger">{{ errorText }}</div>
                    {% elseif success %}
                        <div class="alert alert-success">{{ successText }}</div>
                    {% endif %}

                    <div class="form-group">
                        <label for="current-email">Current email</label>
                        <input class="form-control" id="current-email" value="{{user["email"]}}" disabled>
                    </div>
                    <div class="form-group">
                        <label for="new-email">New email</label>
                        <input type="email" class="form-control" id="newemail" name="newemail" value="{{ data['newemail'] }}">
                    </div>
                    <div class="form-group">
                        <label for="current-password">Current password</label>
                        <input type="password" class="form-control" id="password" name="password" value="{{ data['password'] }}">
                    </div>
                    <input type="hidden" name="_csrf" value="q2dAlhcRfniS0513PBKOI9J7u5xuLrvb6RWTGNnKJp_0ODjAYiUJCMq0xD5PWtYT4Ur3xCRv062oRcRqs6AR_g==">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-big-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-big-primary" id="changeEmailSubmitBtn">Change Email</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="wrapper-content__footer mt-5">
    <div id="block_27">
        <div class="footer py-3 bg-light">
            <div class="text-center">
                <p class="mb-0">© Copyright. All Rights Reserved.</p>
            </div>
        </div>
    </div>
</div>

<!-- JS Enhancements -->
<script>
document.addEventListener("DOMContentLoaded", function(){
    // Auto-hide alerts after 5s
    setTimeout(() => {
        document.querySelectorAll(".alert").forEach(el => {
            el.classList.add("fade");
            setTimeout(() => el.style.display="none", 400);
        });
    }, 5000);
});
</script>