<!DOCTYPE html>
<html lang="{{ app.request.locale }}">
<head>
    <meta charset="UTF-8">
    <title>{{ 'error_page.not_found.title'|trans }}</title>
    <meta name="robots" content="noindex,follow">
    <meta name="description" content="{{ 'error_page.not_found.description'|trans }}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% if app.environment == 'dev' %}
        {{ encore_entry_link_tags('app', null, 'front') }}
    {% else %}
        {{ encore_entry_link_tags('app', null, 'front', { nonce: csp_nonce('style') }) }}
    {% endif %}
</head>
<body class="bg-page text-foreground">
    <main class="flex min-h-screen items-center justify-center px-4 py-16">
        <section aria-labelledby="error-title" class="w-full max-w-2xl rounded-sm border border-border bg-surface px-6 py-12 text-center shadow-sm sm:px-12">
            <p class="text-sm font-semibold uppercase tracking-widest text-foreground-muted">404</p>
            <h1 id="error-title" class="mt-4 text-4xl font-semibold sm:text-5xl">
                {{ 'error_page.not_found.title'|trans }}
            </h1>
            <p class="mx-auto mt-6 max-w-xl text-base leading-7 text-foreground-muted">
                {{ 'error_page.not_found.description'|trans }}
            </p>
            <a
                href="{{ path('homepage') }}"
                class="mt-8 inline-flex min-h-11 items-center justify-center rounded-sm bg-foreground px-6 py-3 font-semibold text-on-foreground transition hover:bg-foreground/90 focus-visible:outline-2 focus-visible:outline-offset-4"
            >
                {{ 'error_page.not_found.back_home'|trans }}
            </a>
        </section>
    </main>
</body>
</html>
