{% extends "base.html" %}
{% load static %}

{% block title %}
  Page not found - Yamtrack
{% endblock title %}

{% block body %}
  <div class="min-h-screen bg-[#212529] flex flex-col items-center justify-center text-white p-4">
    <div class="text-center max-w-md">
      <div class="mb-6">
        <div class="text-9xl font-bold text-indigo-500">404</div>
        <h1 class="text-3xl font-bold mt-4 mb-2">Page Not Found</h1>
        <p class="text-gray-400 mb-4">The page you are looking for doesn't exist or has been moved.</p>
        <p class="text-sm text-gray-500 mb-6">
          If you believe this was a bug, please <a href="https://github.com/fuzzygrim/yamtrack/issues"
    class="text-indigo-400 hover:underline">report the issue.</a>
        </p>
      </div>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="{% url 'home' %}"
           class="flex items-center justify-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
               class="w-5 h-5">
            <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
            <polyline points="9 22 9 12 15 12 15 22"></polyline>
          </svg>
          <span>Back to Home</span></a>
      </div>
    </div>
  </div>
{% endblock body %}

{% block messages_sidebar_offset %}
  top-10 lg:top-64
{% endblock messages_sidebar_offset %}
