{% extends 'base.html' %}

{% block title %}Page Not Found - Optinet Global Links{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6 text-center">
            <div class="error-page">
                <h1 class="display-1 text-info">404</h1>
                <h2 class="mb-4">Page Not Found</h2>
                <p class="lead text-muted mb-4">
                    The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.
                </p>
                <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="history.back()" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Go Back
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.error-page {
    padding: 2rem 0;
}
.error-page h1 {
    font-size: 8rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.error-actions {
    margin-top: 2rem;
}
</style>
{% endblock %}