<!DOCTYPE html>
<html lang="es">
<head>
    <meta name="description" content="AlgoMania es un juez en línea de programación competitiva en español que permite evaluar automáticamente tus soluciones a problemas de programación.">
    <title>AlgoMania</title>
    <link rel="stylesheet" href="/css/output.css">
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
</head>
<body class="bg-gray-100">

    <!-- Navbar -->
    <div><nav class="bg-white shadow-md">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-2">
        <div class="flex justify-between h-16">
            <a href="/" class="flex items-center">
                <div class="flex-shrink-0 flex items-center text-3xl font-bold">
                    <span class="text-blue-600">Algo</span><span class="text-red-500">Mania</span>
                </div>
            </a>

            <div class="hidden md:flex space-x-8 items-center">
                <a href="/" class="text-gray-700 hover:text-blue-600 transition-colors duration-300 ease-in-out">Inicio</a>
                <a href="/problems" class="text-gray-700 hover:text-blue-600 transition-colors duration-300 ease-in-out">Problemas</a>
                <a href="/contests" class="text-gray-700 hover:text-blue-600 transition-colors duration-300 ease-in-out">Concursos</a>
                <a href="/statistics" class="text-gray-700 hover:text-blue-600 transition-colors duration-300 ease-in-out">Estadísticas</a>
                <a href="/contact" class="text-gray-700 hover:text-blue-600 transition-colors duration-300 ease-in-out">Contacto</a>
            </div>

            <div class="flex items-center ml-4 h-16">
                <a id="navbar-userlink" href="/login" class="flex items-center h-full">
                    <span id="navbar-username"
                          class="mx-5 font-medium text-gray-800 transition-colors duration-300 ease-in-out hover:text-blue-600">
                    </span>
                    <img id="navbar-avatar"
                         src="/images/default-avatar.png"
                         onerror="this.onerror=null;this.src='/images/default-avatar.png';"
                         class="h-10 w-10 rounded-full border-2 border-gray-300 hover:border-blue-600 transition-all duration-300 ease-in-out object-cover">
                </a>
            </div>
        </div>
    </div>

    <script type="module">
        import { logout, logoutNoRedirect } from "/scripts/account.js";
        (async function() {
            const token = localStorage.getItem('accessToken');
            if (!token) return;

            const userId = localStorage.getItem('userId');

            try {
                const res = await fetch('/api/account/me', {
                    headers: { 'Authorization': `Bearer ${token}` }
                });

                if (res.status === 401 || res.status == 404) {
                    logoutNoRedirect();
                    return;
                }

                const user = (await res.json()).data;

                document.getElementById('navbar-username').textContent = user.username;
                document.getElementById('navbar-userlink').href = `/account/${user.id}`;

                const version = localStorage.getItem("avatarVersion") || 0;

                document.getElementById('navbar-avatar').src = `/uploads/profile-img/${user.id}.png?v=${version}`;
            } catch {
                logout();
            }
        })();
    </script>
</nav></div>

    <!-- Contenido -->
    <div class="min-h-screen bg-gray-100 p-4">
    <div class="w-1/2 mx-auto mt-20 bg-white shadow-lg rounded-xl text-center py-16">
        <div class="text-8xl font-bold text-red-600 mb-6">404</div>
        <h1 class="text-4xl font-bold text-gray-800 mb-2">Recurso no encontrado</h1>
        <p class="text-gray-500 mb-6">Lo sentimos, la página que buscas no existe o ha sido eliminada.</p>
        <a href="/"
           class="inline-flex items-center gap-4 bg-blue-600 text-white font-semibold py-2 px-3 rounded hover:bg-blue-700 transition-colors">
            <img src="/images/home-icon.png" class="w-5 h-5 filter invert brightness-0">
            <span>Volver a inicio</span>
        </a>
    </div>
</div>

</body>
<!--
<script src="http://localhost:35729/livereload.js"></script>
-->
</html>
