<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="icon" href="{{ favicon }}"/>
    <title>{% block title %}Edgy Admin | {{ title }}{% endblock %}</title>
    {% include 'admin/base_definitions.html.jinja' %}
    {% include 'admin/base_head.html.jinja' %}
    {% endblock %}
</head>
<body class="bg-gray-100 text-gray-900">
  <div id="loading-overlay" class="fixed inset-0 bg-white bg-opacity-70 z-50 flex items-center justify-center hidden">
    <div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12"></div>
  </div>
  {% if messages %}
    <div class="w-full">
  <div class="space-y-2">
    {% for message in messages %}
      <div class="flex items-start gap-3 px-4 py-3 rounded-md shadow-sm text-sm font-medium w-full relative
                  {% if message.level == 'success' %}bg-green-100 text-green-800
                  {% elif message.level == 'error' %}bg-red-100 text-red-800
                  {% elif message.level == 'warning' %}bg-yellow-100 text-yellow-800
                  {% elif message.level == 'info' %}bg-blue-100 text-blue-800
                  {% endif %}">
        <i class="w-5 h-5 mt-0.5 shrink-0 {% if message.level == 'success' %}fa-solid fa-circle-check
                        {% elif message.level == 'error' %}fa-solid fa-circle-xmark
                        {% elif message.level == 'warning' %}fa-solid fa-triangle-exclamation
                        {% elif message.level == 'info' %}fa-solid fa-circle-info
                        {% endif %}"></i>

        <div class="text-base leading-snug flex-1">
          {{ message.text }}
        </div>

        <button type="button"
                class="absolute px-4 top-3 right-2 text-base text-inherit hover:opacity-70 focus:outline-none"
                onclick="this.parentElement.remove()"
                title="Dismiss">
          ×
        </button>
      </div>
    {% endfor %}
  </div>
</div>

  {% endif %}

    <div class="flex min-h-screen">
        <!-- Sidebar -->
        <aside class="w-64 bg-edgy-pink shadow-md flex flex-col text-white">
            <div class="p-4 text-2xl font-bold text-center border-b border-white/20">Edgy Admin</div>
            <nav class="flex-1 p-4 overflow-y-auto">
                <ul class="space-y-2 text-sm">
                    <li>
                        <a href="{{ url_prefix }}/" class="flex items-center gap-3 px-4 py-2 rounded-md hover:bg-white/20 transition">
                            <i class="fa-solid fa-chart-bar w-5 h-5"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    <li>
                      <a href="{{ url_prefix }}/models"
                           class="flex items-center gap-3 px-4 py-2 rounded-md hover:bg-white/20 transition">
                          <i class="fa-solid fa-database w-5 h-5"></i>
                          <span class="capitalize">Models (Search)</span>
                      </a>
                  </li>
                </ul>
            </nav>
        </aside>

        <!-- Main content -->
        <main class="flex-1 flex flex-col overflow-hidden">
            <!-- Top Navbar -->
            <header class="bg-white shadow px-6 py-4 flex justify-between items-center">
                <h1 class="text-2xl font-semibold text-edgy-pink">{% block header %}Dashboard{% endblock %}</h1>
                {% if user %}<div class="text-sm text-gray-500">Welcome, {{user.display_name}}</div>{% endif %}
            </header>

            <!-- Page Content -->
            <section class="p-6 flex-1 overflow-y-auto">
                {% block content %}
                <p class="text-gray-700">Welcome to Edgy Admin.</p>
                {% endblock %}
            </section>
        </main>
    </div>

  {% block endscripts %}
  <script>
    // Show loading on form submit
    const loading_overlay = document.getElementById("loading-overlay")
    document.addEventListener("DOMContentLoaded", function () {
      // reset in case of navigation
      loading_overlay.classList.add("hidden");
      document.querySelectorAll("form").forEach(form => {
        form.addEventListener("submit", function () {
          loading_overlay.classList.remove("hidden");
        });
      });

      // Optional: Show loading on navigation clicks
      document.querySelectorAll("a").forEach(link => {
        link.addEventListener("click", function (e) {
          if (link.getAttribute("href") && !link.getAttribute("href").startsWith("#")) {
            loading_overlay.classList.remove("hidden");
          }
        });
      });
    });
  </script>
  {% endblock %}
</body>
</html>
