{% extends "ushka_layout.html" %}

{% block title %}{{ status_code }} • {{ message }}{% endblock %}

{% block body_classes %}min-h-screen flex items-center justify-center p-4{% endblock %}

{% block main_content %}
    <main class="w-full max-w-lg mx-auto animate-fade-in text-center">
        
        <div class="mb-8 md:mb-12">
            <div class="kaomoji text-5xl md:text-7xl mb-6 animate-pulse">/ᐠ - ˕ •マ</div>
            <h1 class="text-5xl md:text-7xl font-black text-[var(--text-main)]">{{ status_code }}</h1>
            <p class="text-xl md:text-3xl font-bold text-[var(--text-sub)] mt-3">{{ message }}</p>
        </div>

        {% if available_urls %}
        <div class="card-cute text-left shadow-sm">
            <div class="p-5 border-b border-[var(--card-border)] bg-[var(--bg-color)]">
                <h2 class="text-lg font-bold text-[var(--text-main)]">
                    <i class="fa-solid fa-compass mr-2"></i> What's Available?
                </h2>
                <p class="text-sm text-[var(--text-sub)] mt-1">Here are some routes you might be looking for:</p>
            </div>
            <div class="p-4 bg-[var(--card-bg)]">
                <div class="max-h-60 overflow-y-auto pr-2 space-y-2">
                    {% for url in available_urls %}
                    <a href="/{{ url.0.lstrip('^/') }}" class="block p-3 rounded-lg hover:bg-[var(--bg-color)] text-[var(--text-main)] font-mono text-sm transition-colors">
                        <span class="font-bold mr-2 px-2 py-1 bg-[var(--text-main)] text-[var(--bg-color)] rounded">GET</span> {{ url.0 }}
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% else %}
        <div class="mt-10">
            <a href="/" class="btn-cute inline-flex items-center gap-3 px-8 py-4 text-lg">
                <i class="fa-solid fa-house"></i> Go Home
            </a>
        </div>
        {% endif %}

        <div class="mt-10 text-xs font-mono text-[var(--text-sub)] opacity-50">
            TS: {{ timestamp }}
        </div>
    </main>
{% endblock %}