{% load static %}
<!doctype html>
<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      {% block title %}{{ title|default:"API Portal" }}{% endblock %}
    </title>

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Custom CSS -->
    <link
      rel="stylesheet"
      href="{% static 'modern_drf_swagger/css/styles.css' %}"
    />

    <!-- Tailwind Dark Mode Configuration -->
    <script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              primary: "#3b82f6",
              secondary: "#8b5cf6",
            },
          },
        },
      };

      // API Portal base URL (allows portal to work at any URL prefix)
      window.PORTAL_BASE_URL = "{{ portal_base_url|default:'/portal' }}";
    </script>

    {% block extra_head %}
    
    {% endblock %}
  </head>
  <body
    class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200"
  >
    <div class="flex h-screen overflow-hidden">
      <!-- Sidebar -->
      <aside
        class="w-64 bg-gray-100 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 flex flex-col transition-colors duration-200"
        id="sidebar"
      >
        <div class="p-6 border-b border-gray-300 dark:border-gray-700">
          <div class="flex items-center justify-between">
            <h1 class="text-2xl font-bold text-blue-600 dark:text-blue-400">
              {{ portal_name|default:"API Portal" }}
            </h1>
            {% if portal_version %}
            <span
              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 border border-blue-200 dark:border-blue-700"
            >
              v{{ portal_version }}
            </span>
            {% endif %}
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            {{ user.username }}
          </p>
        </div>

        <nav class="flex-1 overflow-y-auto custom-scrollbar p-4">
          <ul class="space-y-2">
            <li>
              <a
                href="{% url 'modern_drf_swagger:docs' %}"
                class="nav-item flex items-center px-4 py-3 rounded-lg {% if request.resolver_match.url_name == 'docs' %}active{% endif %}"
              >
                <svg
                  class="w-5 h-5 mr-3"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                  ></path>
                </svg>
                Documentation
              </a>
            </li>
            <li>
              <a
                href="{% url 'modern_drf_swagger:analytics' %}"
                class="nav-item flex items-center px-4 py-3 rounded-lg {% if request.resolver_match.url_name == 'analytics' %}active{% endif %}"
              >
                <svg
                  class="w-5 h-5 mr-3"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
                  ></path>
                </svg>
                Analytics
              </a>
            </li>
            <li>
              <a
                href="{% url 'modern_drf_swagger:history' %}"
                class="nav-item flex items-center px-4 py-3 rounded-lg {% if request.resolver_match.url_name == 'history' %}active{% endif %}"
              >
                <svg
                  class="w-5 h-5 mr-3"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                  ></path>
                </svg>
                History
              </a>
            </li>
          </ul>
        </nav>

        <div class="p-4 border-t border-gray-300 dark:border-gray-700">
          <!-- Logout -->
          <a
            href="{% url 'modern_drf_swagger:logout' %}"
            class="nav-item flex items-center px-4 py-3 rounded-lg text-red-500 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900 dark:hover:bg-opacity-20"
          >
            <svg
              class="w-5 h-5 mr-3"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
              ></path>
            </svg>
            Logout
          </a>
        </div>
      </aside>

      <!-- Main Content -->
      <main class="flex-1 overflow-y-auto custom-scrollbar relative">
        <!-- Theme Switcher - Top Right -->

        <div class="container mx-auto p-6">
          {% block content %} {% endblock %}
        </div>
      </main>
    </div>

    <!-- Toast Container -->
    <div id="toast-container"></div>

    <!-- Common JavaScript -->
    <script>
      // Toast notification function
      function showToast(message, type = "info") {
        const container = document.getElementById("toast-container");
        const toast = document.createElement("div");
        toast.className = `toast toast-${type}`;
        toast.textContent = message;
        container.appendChild(toast);

        setTimeout(() => {
          toast.style.opacity = "0";
          setTimeout(() => toast.remove(), 300);
        }, 3000);
      }

      // CSRF token helper
      function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== "") {
          const cookies = document.cookie.split(";");
          for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === name + "=") {
              cookieValue = decodeURIComponent(
                cookie.substring(name.length + 1),
              );
              break;
            }
          }
        }
        return cookieValue;
      }

      const csrftoken = getCookie("csrftoken");

      // Theme Management
      (function () {
        const html = document.documentElement;
        const themeToggle = document.getElementById("theme-toggle");
        const themeIconSun = document.getElementById("theme-icon-sun");
        const themeIconMoon = document.getElementById("theme-icon-moon");

        // Get saved theme or default to dark
        const savedTheme = localStorage.getItem("theme") || "dark";

        function setTheme(theme) {
          if (theme === "dark") {
            html.classList.add("dark");
            themeIconMoon.classList.remove("hidden");
            themeIconSun.classList.add("hidden");
          } else {
            html.classList.remove("dark");
            themeIconMoon.classList.add("hidden");
            themeIconSun.classList.remove("hidden");
          }
          localStorage.setItem("theme", theme);
        }

        // Apply saved theme immediately
        setTheme(savedTheme);

        // Toggle theme on button click
        themeToggle.addEventListener("click", function () {
          const currentTheme = html.classList.contains("dark")
            ? "dark"
            : "light";
          const newTheme = currentTheme === "dark" ? "light" : "dark";
          setTheme(newTheme);
        });
      })();
    </script>

    {% block extra_scripts %}
    
    {% endblock %}
  </body>
</html>
