<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %} | Fladoja</title>
    
    <!-- Общие стили для всех страниц ошибок -->
    <style>
        :root {
            --error-primary: #4361ee;
            --error-danger: #ef233c;
            --error-warning: #f77f00;
            --error-dark: #1b263b;
            --error-light: #f8f9fa;
        }
        
        body.error-page {
            background-color: #f5f7fa;
            color: var(--error-dark);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        .error-header {
            background-color: var(--error-primary);
            color: white;
            padding: 1rem 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .error-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 2rem 1rem;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }
        
        .error-content {
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            padding: 2rem;
            text-align: center;
        }
        
        .error-code {
            font-size: 5rem;
            font-weight: 800;
            margin: 0;
            line-height: 1;
        }
        
        .error-message {
            font-size: 1.75rem;
            margin: 1rem 0;
        }
        
        .error-details {
            color: #666;
            margin-bottom: 2rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .error-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .error-btn {
            padding: 0.75rem 1.5rem;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        .error-btn-primary {
            background-color: var(--error-primary);
            color: white;
        }
        
        .error-btn-secondary {
            border: 1px solid #ddd;
            color: var(--error-dark);
        }
        
        .error-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .error-footer {
            text-align: center;
            padding: 1.5rem;
            color: #666;
            font-size: 0.9rem;
        }
        
        /* Адаптивность */
        @media (max-width: 768px) {
            .error-code {
                font-size: 3rem;
            }
            
            .error-message {
                font-size: 1.25rem;
            }
            
            .error-content {
                padding: 1.5rem;
            }
        }
    </style>
    
    <!-- Дополнительные стили для конкретных ошибок -->
    {% block extra_styles %}{% endblock %}
</head>
<body class="error-page">
    <!-- Шапка с логотипом -->
    <header class="error-header">
        <div class="error-container">
            <a href="/" style="color: white; text-decoration: none; font-weight: bold; font-size: 1.25rem;">
                Fladoja Framework
            </a>
        </div>
    </header>

    <!-- Основное содержимое -->
    <main class="error-container">
        <div class="error-content">
            {% block error_icon %}
                <div style="font-size: 3rem; margin-bottom: 1rem;">⚠️</div>
            {% endblock %}
            
            <h1 class="error-code">{% block error_code %}{% endblock %}</h1>
            <h2 class="error-message">{% block error_message %}{% endblock %}</h2>
            
            <div class="error-details">
                {% block error_details %}{% endblock %}
            </div>
            
            <div class="error-actions">
                {% block error_actions %}
                    <a href="/" class="error-btn error-btn-primary">На главную</a>
                    <a href="/contacts" class="error-btn error-btn-secondary">Техподдержка</a>
                {% endblock %}
            </div>
            
            {% block error_extra %}{% endblock %}
        </div>
    </main>

    <!-- Подвал -->
    <footer class="error-footer">
        <div class="error-container">
            <p>&copy; {{ now|date:'Y' }} Fladoja Framework. SiteProjectGo License.</p>
            <p style="margin-top: 0.5rem; font-size: 0.8rem;">
                Ошибка {% block error_id %}{{ error_id|default:"unknown" }}{% endblock %} • 
                Запрошенный URL: <code>{{ request.path }}</code>
            </p>
        </div>
    </footer>

    <!-- Скрипты -->
    {% block error_scripts %}
    <script>
        // Логирование ошибки
        console.error({
            errorCode: "{% block error_code_js %}{% endblock %}",
            path: "{{ request.path }}",
            timestamp: new Date().toISOString()
        });
    </script>
    {% endblock %}
</body>
</html>