{% extends "base.html" %}
{% block title %}Error{% endblock %}

{% block content %}
<div class="flex flex-col items-center justify-center h-full gap-4">
  <div class="text-6xl">⚠️</div>
  <h1 class="text-2xl font-bold text-red-400">{{ title }}</h1>
  <p class="text-gray-400 text-center max-w-md">{{ message }}</p>
  <div class="flex gap-2 mt-4">
    <button onclick="location.reload()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded focusable" tabindex="0">Retry</button>
    <button onclick="history.back()" class="px-4 py-2 bg-gray-600 hover:bg-gray-500 rounded focusable" tabindex="0">Go Back</button>
  </div>
</div>
{% endblock %}