{% extends layout | default('lila/base.html') %}
{% block title %}{{translate['Invalid or expired token']}}{% endblock %}

{% block content %}
<main
    class="min-h-screen bg-bg-body dark:bg-bg-body-dark flex flex-col justify-center items-center px-4 py-12 transition-colors duration-300 font-sans">
    <div class="card w-full max-w-md p-8 text-center transform hover:scale-101">
        <div
            class="w-16 h-16 bg-red-50 dark:bg-red-950/30 text-red-500 rounded-full flex items-center justify-center mx-auto mb-6 text-3xl">
            ⚠️
        </div>

        <h3 class="text-2xl font-black text-red-500 mb-4">
            {{translate['Invalid or expired token']}}
        </h3>

        <p class="text-sm text-slate-500 dark:text-slate-400 mb-8 leading-relaxed">
            {{translate['Your password reset link is invalid or has expired.']}}
        </p>

        <a href="/forgot-password" class="btn-primary w-full justify-center">
            {{translate['Request new password reset link']}}
        </a>
    </div>

    <!-- Language Selector -->
    <div class="mt-8 w-full max-w-md flex justify-center gap-2">
        <a href="?lang=es" class="btn-secondary">
            <span>🇪🇸</span> Español
        </a>
        <a href="?lang=en" class="btn-secondary">
            <span>🇺🇸</span> English
        </a>
    </div>
</main>
{% endblock %}