File: templates/404.twig

{% extends "base.twig" %}

{% block title %}{{ t('ui.error404.title', {}, 'common') }} - {{ parent() }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8 col-xl-6">
        <div class="card border-warning shadow">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">
                    <i class="fas fa-exclamation-triangle"></i>
                    {{ t('ui.error404.title', {}, 'common') }}
                </h5>
            </div>
            <div class="card-body text-center py-5">
                <div class="mb-4">
                    <i class="fas fa-search text-warning" style="font-size: 5rem; opacity: 0.7;"></i>
                </div>
                
                <h1 class="display-4 text-muted mb-3">404</h1>
                <h4 class="mb-3">{{ t('ui.error404.title', {}, 'common') }}</h4>
                <p class="text-muted mb-4">
                    {{ t('ui.error404.description', {}, 'common') }}
                    {% if requested_url %}
                    <br><small class="text-muted">{{ t('ui.error404.requested_prefix', {}, 'common') }} <code>{{ requested_url }}</code></small>
                    {% endif %}
                </p>
                
                <div class="row g-2 justify-content-center">
                    <div class="col-auto">
                        <a href="/" class="btn btn-primary">
                            <i class="fas fa-home me-2"></i>
                            {{ t('ui.error404.dashboard', {}, 'common') }}
                        </a>
                    </div>
                    <div class="col-auto">
                        <button class="btn btn-outline-secondary" onclick="history.back()">
                            <i class="fas fa-arrow-left me-2"></i>
                            {{ t('ui.error404.go_back', {}, 'common') }}
                        </button>
                    </div>
                </div>
                
                <hr class="my-4">
                
                <div class="mt-4 p-3 bg-light rounded">
                    <small class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        {{ t('ui.error404.contact_sysop', {}, 'common') }}
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card {
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
}

.btn {
    transition: all 0.2s ease-in-out;
}

.display-4 {
    font-weight: 300;
    font-family: 'Courier New', monospace;
}
</style>
{% endblock %}