{% extends "base.html" %}

{% block title %}{{ status_code }} - Mojo Dojo{% endblock %}

{% block content %}
<div class="flex flex-col items-center justify-center py-20 text-center"
     x-init="$store.dojo.isPageReady = true">
    <div class="p-6 bg-rose-500/10 rounded-full text-rose-500 mb-6 border border-rose-500/20 shadow-xl">
        <svg class="w-16 h-16"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
             viewBox="0 0 24 24">
            {% if status_code == 401 %}
            <path stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
            {% else %}
            <path stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
            {% endif %}
        </svg>
    </div>

    <h2 class="text-5xl font-black text-slate-800 dark:text-white uppercase tracking-tighter mb-2">
        {{ title }}
    </h2>

    <p class="text-slate-500 dark:text-slate-400 font-mono text-lg max-w-md mx-auto mb-8">
        {{ message }}
    </p>

    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
        <button onclick="window.history.back()"
                class="w-full sm:w-auto px-8 py-4 bg-slate-300 dark:bg-slate-800 hover:bg-slate-400 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-black uppercase tracking-widest rounded-xl transition-all active:scale-95 flex items-center justify-center gap-2">
            <svg class="w-5 h-5"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2.5"
                 viewBox="0 0 24 24">
                <path stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
            </svg>
            Go Back
        </button>

        <a href="/"
           class="w-full sm:w-auto px-8 py-4 bg-cyan-500 hover:bg-cyan-600 text-white font-black uppercase tracking-widest rounded-xl shadow-lg shadow-cyan-500/20 transition-all active:scale-95">
            {{ button_text or 'Return to Dojo' }}
        </a>
    </div>
</div>
{% endblock %}