{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="csrf-token" content="{{ csrf_token }}">
    <title>{% block title %}ThrillWiki{% endblock %}</title>

    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <!-- Prevent flash of wrong theme -->
    <script>
      let theme = localStorage.getItem("theme");
      if (!theme) {
        theme = window.matchMedia("(prefers-color-scheme: dark)").matches
          ? "dark"
          : "light";
        localStorage.setItem("theme", theme);
      }
      if (theme === "dark") {
        document.documentElement.classList.add("dark");
      }
    </script>

    <!-- HTMX -->
    <script src="https://unpkg.com/htmx.org@1.9.6"></script>

    <!-- Tailwind CSS -->
    <link href="{% static 'css/tailwind.css' %}" rel="stylesheet" />

    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />

    {% block extra_head %}{% endblock %}
  </head>
  <body
    class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950 dark:text-white"
  >
    <!-- Header -->
    <header
      class="border-b shadow-lg bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
    >
      <nav class="container mx-auto nav-container">
        <div class="flex items-center justify-between">
          <!-- Logo -->
          <div class="flex items-center">
            <a
              href="{% url 'home' %}"
              class="font-bold text-transparent transition-transform site-logo bg-gradient-to-r from-primary to-secondary bg-clip-text hover:scale-105"
            >
              ThrillWiki
            </a>
          </div>

          <!-- Navigation Links (Always Visible) -->
          <div class="flex items-center space-x-2 sm:space-x-4">
            <a href="{% url 'parks:park_list' %}" class="nav-link">
              <i class="fas fa-map-marker-alt"></i>
              <span>Parks</span>
            </a>
            <a href="{% url 'rides:ride_list' %}" class="nav-link">
              <i class="fas fa-rocket"></i>
              <span>Rides</span>
            </a>
          </div>

          <!-- Search Bar -->
          <div class="flex-1 hidden max-w-md mx-8 lg:flex">
            <form action="{% url 'search' %}" method="get" class="w-full">
              <div class="relative">
                <input
                  type="text"
                  name="q"
                  placeholder="Search parks and rides..."
                  class="form-input"
                />
              </div>
            </form>
          </div>

          <!-- Right Side Menu -->
          <div class="flex items-center space-x-2 sm:space-x-6">
            <!-- Theme Toggle -->
            <label for="theme-toggle" class="cursor-pointer">
              <input type="checkbox" id="theme-toggle" class="hidden" />
              <div
                class="inline-flex items-center justify-center p-2 text-gray-500 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary theme-toggle-btn"
                role="button"
                aria-label="Toggle dark mode"
              >
                <i class="text-xl fas"></i>
              </div>
            </label>

            <!-- User Menu -->
            {% if user.is_authenticated %}
              {% if has_moderation_access %}
                <a href="{% url 'moderation:edit_submissions' %}" class="nav-link">
                  <i class="fas fa-shield-alt"></i>
                  <span>Moderation</span>
                </a>
              {% endif %}
              <div class="relative" x-data="{ open: false }">
                <button
                  @click="open = !open"
                  class="flex items-center space-x-2 transition-transform hover:scale-105"
                >
                  {% if user.profile.avatar %}
                  <img
                    src="{{ user.profile.avatar.url }}"
                    alt="{{ user.username }}"
                    class="w-8 h-8 rounded-full ring-2 ring-primary/20"
                  />
                  {% else %}
                  <div
                    class="flex items-center justify-center w-8 h-8 text-white rounded-full bg-gradient-to-br from-primary to-secondary"
                  >
                    {{ user.username.0|upper }}
                  </div>
                  {% endif %}
                  <span>{{ user.username }}</span>
                </button>

                <!-- Dropdown Menu -->
                <div
                  x-show="open"
                  @click.away="open = false"
                  class="absolute right-0 w-48 py-1 mt-2 bg-white rounded-md shadow-lg dark:bg-gray-800"
                >
                  <a
                    href="{% url 'profile' user.username %}"
                    class="menu-item"
                  >
                    <i class="w-5 fas fa-user"></i>
                    <span>Profile</span>
                  </a>
                  <a href="{% url 'settings' %}" class="menu-item">
                    <i class="w-5 fas fa-cog"></i>
                    <span>Settings</span>
                  </a>
                  {% if has_admin_access %}
                  <a href="{% url 'admin:index' %}" class="menu-item">
                    <i class="w-5 fas fa-shield-alt"></i>
                    <span>Admin</span>
                  </a>
                  {% endif %}
                  <form method="post" action="{% url 'account_logout' %}">
                    {% csrf_token %}
                    <button type="submit" class="w-full menu-item">
                      <i class="w-5 fas fa-sign-out-alt"></i>
                      <span>Logout</span>
                    </button>
                  </form>
                </div>
              </div>
            {% else %}
              <!-- Login/Register (Desktop) -->
              <div class="hidden space-x-3 lg:flex">
                <a href="{% url 'account_login' %}" class="btn-secondary">
                  <i class="mr-2 fas fa-sign-in-alt"></i>
                  Login
                </a>
                <a href="{% url 'account_signup' %}" class="btn-primary">
                  <i class="mr-2 fas fa-user-plus"></i>
                  Register
                </a>
              </div>
            {% endif %}

            <!-- Mobile Menu Button -->
            <button
              id="mobileMenuBtn"
              class="p-2 text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
              aria-label="Toggle mobile menu"
            >
              <i class="text-2xl fas fa-bars"></i>
            </button>
          </div>
        </div>

        <!-- Mobile Menu -->
        <div id="mobileMenu">
          <div class="space-y-4">
            <!-- Search (Mobile) -->
            <form action="{% url 'search' %}" method="get" class="mb-4">
              <input
                type="text"
                name="q"
                placeholder="Search parks and rides..."
                class="form-input"
              />
            </form>

            {% if not user.is_authenticated %}
            <!-- Login/Register (Mobile) -->
            <div class="flex items-center space-x-3">
              <a
                href="{% url 'account_login' %}"
                class="flex-1 mobile-nav-link secondary"
              >
                <i class="fas fa-sign-in-alt"></i>
                <span>Login</span>
              </a>
              <a
                href="{% url 'account_signup' %}"
                class="flex-1 mobile-nav-link primary"
              >
                <i class="fas fa-user-plus"></i>
                <span>Register</span>
              </a>
            </div>
            {% endif %}
          </div>
        </div>
      </nav>
    </header>

    <!-- Flash Messages -->
    {% if messages %}
    <div class="container px-6 mx-auto mt-4">
      {% for message in messages %}
      <div
        class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}"
      >
        {{ message }}
      </div>
      {% endfor %}
    </div>
    {% endif %}

    <!-- Main Content -->
    <main class="container flex-grow px-6 py-8 mx-auto">
      {% block content %}{% endblock %}
    </main>

    <!-- Footer -->
    <footer
      class="mt-auto border-t bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
    >
      <div class="container px-6 py-6 mx-auto">
        <div class="flex items-center justify-between">
          <div class="text-gray-600 dark:text-gray-400">
            <p>&copy; {% now "Y" %} ThrillWiki. All rights reserved.</p>
          </div>
          <div class="space-x-4">
            <a
              href="{% url 'terms' %}"
              class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
              >Terms</a
            >
            <a
              href="{% url 'privacy' %}"
              class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
              >Privacy</a
            >
          </div>
        </div>
      </div>
    </footer>

    <!-- Custom JavaScript -->
    <script src="{% static 'js/main.js' %}"></script>
    {% block extra_js %}{% endblock %}
  </body>
</html>
