{% extends "base.html" %}

{% block title %}Page Not Found - Real-Time Object Detection{% endblock %}

{% block content %}
<div class="error-container">
    <div class="error-card">
        <div class="error-icon">
            <i class="fas fa-search"></i>
        </div>
        <h1 class="error-title">404 - Page Not Found</h1>
        <p class="error-description">
            The page you're looking for doesn't exist or has been moved.
        </p>
        <div class="error-actions">
            <a href="{{ url_for('index') }}" class="btn btn-primary">
                <i class="fas fa-home"></i>
                Go Home
            </a>
            {% if current_user.is_authenticated %}
                <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">
                    <i class="fas fa-tachometer-alt"></i>
                    Dashboard
                </a>
            {% endif %}
        </div>
    </div>
</div>

<style>
.error-container {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.error-card {
    background: hsl(var(--surface));
    padding: var(--space-2xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-3d);
    text-align: center;
    max-width: 500px;
}

.error-icon {
    font-size: 4rem;
    color: hsl(var(--text-muted));
    margin-bottom: var(--space-lg);
}

.error-title {
    font-size: 2rem;
    font-weight: 700;
    color: hsl(var(--text));
    margin-bottom: var(--space-md);
}

.error-description {
    color: hsl(var(--text-secondary));
    font-size: 1.125rem;
    margin-bottom: var(--space-2xl);
    line-height: 1.6;
}

.error-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}
</style>
{% endblock %}