{% extends 'base.html' %}
{% load static %}

{% block title %}Страницата не е намерена - 404{% endblock %}

{% block extra_css %}
<style>
    .error-404-container {
        min-height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3rem 1rem;
    }

    .error-404-content {
        text-align: center;
        max-width: 700px;
        width: 100%;
        animation: fadeInUp 0.6s ease-out;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .error-404-number {
        font-family: 'Roboto Slab', serif;
        font-size: 12rem;
        font-weight: 700;
        background: linear-gradient(135deg, var(--gov-primary) 0%, var(--gov-secondary) 50%, var(--gov-accent) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
        margin-bottom: 1rem;
        text-shadow: 0 4px 20px rgba(0, 51, 102, 0.2);
        animation: pulse 2s ease-in-out infinite;
        position: relative;
    }

    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.02);
        }
    }

    .error-404-number::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(0, 102, 204, 0.1) 0%, transparent 70%);
        border-radius: 50%;
        z-index: -1;
        animation: ripple 3s ease-out infinite;
    }

    @keyframes ripple {
        0% {
            transform: translate(-50%, -50%) scale(0.8);
            opacity: 1;
        }
        100% {
            transform: translate(-50%, -50%) scale(1.5);
            opacity: 0;
        }
    }

    .error-404-title {
        font-family: 'Roboto Slab', serif;
        font-size: 2.5rem;
        color: var(--gov-primary);
        margin-bottom: 1rem;
        font-weight: 700;
    }

    .error-404-message {
        font-size: 1.2rem;
        color: var(--gov-gray);
        margin-bottom: 2.5rem;
        line-height: 1.8;
    }

    .error-404-illustration {
        margin: 2rem 0;
        opacity: 0.8;
    }

    .error-404-illustration svg {
        max-width: 300px;
        width: 100%;
        height: auto;
        animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-20px);
        }
    }

    .error-404-actions {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 2.5rem;
    }

    .error-404-actions .btn {
        min-width: 180px;
    }

    .error-404-helpful-links {
        margin-top: 3rem;
        padding-top: 2rem;
        border-top: 2px solid var(--gov-gray-light);
    }

    .error-404-helpful-links h3 {
        font-family: 'Roboto Slab', serif;
        color: var(--gov-primary);
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }

    .helpful-links-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }

    .helpful-link {
        display: block;
        padding: 1rem;
        background: linear-gradient(135deg, var(--gov-light) 0%, var(--gov-white) 100%);
        border-radius: 8px;
        text-decoration: none;
        color: var(--gov-primary);
        font-weight: 500;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        box-shadow: 0 2px 8px var(--gov-shadow);
    }

    .helpful-link:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 16px var(--gov-shadow-lg);
        border-color: var(--gov-secondary);
        color: var(--gov-secondary);
    }

    .helpful-link-icon {
        font-size: 1.5rem;
        display: block;
        margin-bottom: 0.5rem;
    }

    @media (max-width: 768px) {
        .error-404-number {
            font-size: 8rem;
        }

        .error-404-title {
            font-size: 1.75rem;
        }

        .error-404-message {
            font-size: 1rem;
        }

        .error-404-actions {
            flex-direction: column;
        }

        .error-404-actions .btn {
            width: 100%;
        }

        .helpful-links-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 480px) {
        .error-404-number {
            font-size: 6rem;
        }

        .error-404-title {
            font-size: 1.5rem;
        }

        .error-404-illustration svg {
            max-width: 200px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="error-404-container">
    <div class="error-404-content">
        <div class="error-404-number">404</div>
        
        <div class="error-404-illustration">
            <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" style="stop-color:#003366;stop-opacity:1" />
                        <stop offset="50%" style="stop-color:#0066cc;stop-opacity:1" />
                        <stop offset="100%" style="stop-color:#ffd700;stop-opacity:1" />
                    </linearGradient>
                </defs>
                <!-- Magnifying glass -->
                <circle cx="80" cy="80" r="50" fill="none" stroke="url(#grad1)" stroke-width="4" opacity="0.6"/>
                <line x1="120" y1="120" x2="160" y2="160" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round" opacity="0.6"/>
                <!-- Question mark -->
                <path d="M 100 50 Q 100 40 110 40 Q 120 40 120 50 Q 120 60 110 60 L 110 80 Q 110 90 100 90" 
                      fill="none" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
                <circle cx="100" cy="110" r="3" fill="url(#grad1)" opacity="0.8"/>
            </svg>
        </div>

        <h1 class="error-404-title">Страницата не е намерена</h1>
        
        <p class="error-404-message">
            Съжаляваме, но страницата, която търсите, не съществува или е преместена. 
            Моля, проверете адреса или използвайте навигацията по-долу, за да намерите това, което търсите.
        </p>

        <div class="error-404-actions">
            <a href="{% url 'reports:home' %}" class="btn btn-primary">
                <span style="margin-right: 0.5rem;">🏠</span>
                Начална страница
            </a>
            <a href="javascript:history.back()" class="btn btn-secondary">
                <span style="margin-right: 0.5rem;">←</span>
                Назад
            </a>
        </div>

        <div class="error-404-helpful-links">
            <h3>Полезни връзки</h3>
            <div class="helpful-links-grid">
                <a href="{% url 'reports:list' %}" class="helpful-link">
                    <span class="helpful-link-icon">📋</span>
                    Всички доклади
                </a>
                <a href="{% url 'reports:create' %}" class="helpful-link">
                    <span class="helpful-link-icon">➕</span>
                    Докладване на измама
                </a>
                <a href="{% url 'reports:search' %}" class="helpful-link">
                    <span class="helpful-link-icon">🔍</span>
                    Търсене
                </a>
                {% if user.is_authenticated %}
                <a href="{% url 'accounts:profile' %}" class="helpful-link">
                    <span class="helpful-link-icon">👤</span>
                    Моят профил
                </a>
                {% else %}
                <a href="{% url 'accounts:login' %}" class="helpful-link">
                    <span class="helpful-link-icon">🔐</span>
                    Вход в системата
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}