{% extends 'base.html' %}

{% block title %}CSRF Verification Failed - Optinet Global Links{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8 text-center">
            <div class="error-page">
                <h1 class="display-1 text-warning">🔒</h1>
                <h2 class="mb-4">CSRF Verification Failed</h2>
                <p class="lead text-muted mb-4">
                    Your request was blocked due to security reasons. This usually happens when:
                </p>
                <div class="alert alert-info text-start mb-4">
                    <ul class="mb-0">
                        <li>Your session has expired</li>
                        <li>You've been inactive for too long</li>
                        <li>Your browser has disabled cookies</li>
                        <li>You're using an outdated page</li>
                    </ul>
                </div>
                <div class="error-actions">
                    <a href="{% url 'customers:dashboard' %}" class="btn btn-primary me-2">
                        <i class="bi bi-house"></i> Go to Dashboard
                    </a>
                    <button onclick="location.reload()" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-clockwise"></i> Refresh Page
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.error-page {
    padding: 2rem 0;
}
.error-page h1 {
    font-size: 6rem;
}
.error-actions {
    margin-top: 2rem;
}
</style>
{% endblock %}