{% extends "base.html" %}

{% block title %}{{ error_info.title if error_info else _('Page Not Found') }} - {{ app_name }}{% endblock %}

{% block content %}
<div class="flex items-center justify-center min-h-[60vh] px-4 py-8">
    <div class="w-full max-w-md text-center">
        <div class="bg-card-light dark:bg-card-dark rounded-xl border border-border-light dark:border-border-dark shadow-sm p-6 sm:p-8">
            <div class="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-amber-100 dark:bg-amber-900/30 mb-4">
                <i class="fas fa-search text-2xl sm:text-3xl text-amber-500"></i>
            </div>
            <h1 class="text-5xl font-bold text-text-light/20 dark:text-text-dark/20 mb-2">404</h1>
            <h2 class="text-lg font-semibold text-text-light dark:text-text-dark mb-2">
                {{ error_info.title if error_info else _('Page Not Found') }}
            </h2>
            <p class="text-sm text-text-light/60 dark:text-text-dark/60 mb-6">
                {{ error_info.message if error_info else _("The page you're looking for doesn't exist or has been moved.") }}
            </p>
            <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
                <a href="{{ url_for('main.dashboard') }}" class="btn btn-primary">
                    <i class="fas fa-home"></i> {{ _('Go to Dashboard') }}
                </a>
                <button onclick="history.back()" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> {{ _('Go Back') }}
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
