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

{% block title %}
  Forbidden - 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-red-400">403</div>
        <h1 class="text-3xl font-bold mt-4 mb-2">Access Forbidden</h1>
        <p class="text-gray-400 mb-4">
          You don't have permission to access this resource. Please log in or contact an administrator.
        </p>
        <div class="bg-[#2a2f35] p-4 rounded-lg mb-4 text-left">
          <h3 class="font-medium mb-2 text-gray-300">Using a Reverse Proxy?</h3>
          <p class="text-sm text-gray-400">
            If you're accessing YamTrack through a reverse proxy, you need to set the <code class="bg-[#39404b] px-1 py-0.5 rounded">URLS</code> environment variable to your application URL.
          </p>

          <p class="text-sm text-gray-400 mt-2">
            For example, <code class="bg-[#39404b] px-1 py-0.5 rounded">https://yamtrack.mydomain.com</code>.
          </p>
        </div>
        <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 'account_login' %}"
           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">
          {% include "app/icons/padlock.svg" with classes="w-5 h-5" %}
          <span>Log In</span></a>

        <a href="{% url 'home' %}"
           class="flex items-center justify-center gap-2 px-6 py-3 bg-[#39404b] text-white rounded-md hover:bg-[#454d5a] transition-colors">
          {% include "app/icons/house.svg" with classes="w-5 h-5" %}
          <span>Back to Home</span></a>
      </div>
    </div>
  </div>
{% endblock body %}

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