{% 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:"Modern DRF Swagger" }}{% endblock %}
    </title>

    <!-- Tailwind CSS CDN -->
    <!-- Note: CDN usage is intentional for this developer tool (like Swagger UI) -->
    <!-- The console warning is expected and can be safely ignored -->
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>

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

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

      // Modern DRF Swagger 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 Overlay (for mobile) -->
      <div
        id="sidebar-overlay"
        class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden lg:hidden"
        onclick="toggleSidebar()"
      ></div>

      <!-- Sidebar -->
      <aside
        class="sidebar w-64 bg-gray-100 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 flex flex-col transition-all duration-300 z-50"
        id="sidebar"
      >
        <div class="p-6 border-b border-gray-300 dark:border-gray-700">
          <div class="flex items-center justify-between gap-3 flex-wrap">
            <h1
              class="text-2xl font-bold text-blue-600 dark:text-blue-400 min-w-0 break-words flex-1"
            >
              {{ portal_name|default:"Modern DRF Swagger" }}
            </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 flex-shrink-0"
            >
              v{{ portal_version }}
            </span>
            {% endif %}
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            {{ user.username }}
          </p>
          {% if user_role %}
          <p class="text-xs text-blue-600 dark:text-blue-400 mt-1">
            Role: {{ user_role }}
          </p>
          {% endif %}
        </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>
            {% if can_view_analytics %}
            <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>
            {% endif %} {% if can_view_history %}
            <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>
            {% endif %}
          </ul>
        </nav>

        <div
          class="p-4 border-t border-gray-300 dark:border-gray-700 space-y-2"
        >
          <!-- Authorize -->
          <button
            onclick="window.globalAuth?.openAuthModal()"
            id="authorize-btn"
            class="w-full flex items-center justify-between px-4 py-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors group"
          >
            <div class="flex items-center">
              <svg
                class="w-5 h-5 mr-3 text-yellow-600 dark:text-yellow-400"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                ></path>
              </svg>
              <span>Authorize</span>
            </div>
            <span
              id="auth-status-indicator"
              class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"
              title="Not authenticated"
            ></span>
          </button>

          <!-- Logout -->
          <form
            method="post"
            action="{% url 'modern_drf_swagger:logout' %}"
            class="w-full"
          >
            {% csrf_token %}
            <button
              type="submit"
              class="w-full 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 transition-colors"
            >
              <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
            </button>
          </form>
        </div>
      </aside>

      <!-- Main Content -->
      <main class="flex-1 overflow-y-auto custom-scrollbar relative">
        <!-- Sidebar Toggle Button -->
        <button
          id="sidebar-toggle"
          onclick="toggleSidebar()"
          class="fixed top-4 left-4 z-30 p-2 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
          aria-label="Toggle sidebar"
        >
          <svg
            id="sidebar-toggle-icon"
            class="w-6 h-6 text-gray-700 dark:text-gray-300"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"
            ></path>
          </svg>
        </button>

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

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

    <!-- Authentication Modal -->
    <div
      id="auth-modal"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"
    >
      <div
        class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl max-w-md w-full mx-4"
      >
        <div
          class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700"
        >
          <h2
            class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2"
          >
            <svg
              class="w-6 h-6 text-yellow-600 dark:text-yellow-400"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
              ></path>
            </svg>
            Available Authorizations
          </h2>
          <button
            onclick="window.globalAuth?.closeAuthModal()"
            class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
          >
            <svg
              class="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              ></path>
            </svg>
          </button>
        </div>
        <div class="p-6 space-y-4">
          <!-- Auth Type Selector -->
          <div>
            <label
              class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
              >Authentication Type</label
            >
            <select
              id="auth-type"
              class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500"
            >
              <option value="bearer">Bearer Token (JWT)</option>
              <option value="basic">Basic Auth</option>
              <option value="apikey">API Key</option>
            </select>
          </div>

          <!-- Bearer Token Input -->
          <div id="bearer-auth-section">
            <label
              id="bearer-token-label"
              class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
              >Token</label
            >
            <input
              type="text"
              id="bearer-token"
              placeholder="Paste your JWT token here"
              class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 font-mono text-sm focus:ring-2 focus:ring-blue-500"
            />
            <p
              id="bearer-token-help"
              class="text-xs text-gray-500 dark:text-gray-400 mt-1"
            >
              Will be sent as: Authorization: Bearer {token}
            </p>
          </div>

          <!-- Basic Auth Inputs -->
          <div id="basic-auth-section" class="hidden space-y-3">
            <div>
              <label
                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
                >Username</label
              >
              <input
                type="text"
                id="basic-username"
                placeholder="Enter username"
                class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500"
              />
            </div>
            <div>
              <label
                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
                >Password</label
              >
              <input
                type="password"
                id="basic-password"
                placeholder="Enter password"
                class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500"
              />
            </div>
          </div>

          <!-- API Key Inputs -->
          <div id="apikey-auth-section" class="hidden space-y-3">
            <div>
              <label
                id="apikey-name-label"
                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
                >Header Name</label
              >
              <input
                type="text"
                id="apikey-header"
                placeholder="X-API-Key"
                value="X-API-Key"
                class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500"
              />
              <p
                id="apikey-help"
                class="text-xs text-gray-500 dark:text-gray-400 mt-1"
              >
                Will be sent as a request header
              </p>
            </div>
            <div>
              <label
                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
                >API Key</label
              >
              <input
                type="text"
                id="apikey-value"
                placeholder="Enter your API key"
                class="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 font-mono text-sm focus:ring-2 focus:ring-blue-500"
              />
            </div>
          </div>
        </div>
        <div
          class="flex gap-3 p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900"
        >
          <button
            onclick="window.globalAuth?.saveAuth()"
            class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors"
          >
            Authorize
          </button>
          <button
            onclick="window.globalAuth?.clearAuth()"
            class="flex-1 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-semibold py-2 px-4 rounded-lg transition-colors"
          >
            Clear
          </button>
          <button
            onclick="window.globalAuth?.closeAuthModal()"
            class="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
          >
            Cancel
          </button>
        </div>
      </div>
    </div>

    <!-- Common JavaScript -->
    <script src="{% static 'modern_drf_swagger/js/global-auth.js' %}"></script>
    <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");

      // Set dark mode by default
      (function () {
        const html = document.documentElement;
        // Always use dark mode
        html.classList.add("dark");
        localStorage.setItem("theme", "dark");
      })();

      // Sidebar toggle functionality
      function toggleSidebar() {
        const sidebar = document.getElementById("sidebar");
        const overlay = document.getElementById("sidebar-overlay");
        const icon = document.getElementById("sidebar-toggle-icon");
        const isOpen = sidebar.classList.contains("sidebar-open");

        if (isOpen) {
          sidebar.classList.remove("sidebar-open");
          overlay.classList.add("hidden");
          localStorage.setItem("sidebarState", "closed");
          // Update icon to hamburger menu
          icon.innerHTML = `
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"
            ></path>
          `;
        } else {
          sidebar.classList.add("sidebar-open");
          // Show overlay only on mobile
          if (window.innerWidth < 1024) {
            overlay.classList.remove("hidden");
          }
          localStorage.setItem("sidebarState", "open");
          // Update icon to X
          icon.innerHTML = `
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M6 18L18 6M6 6l12 12"
            ></path>
          `;
        }
      }

      // Initialize sidebar state
      (function () {
        const sidebar = document.getElementById("sidebar");
        const overlay = document.getElementById("sidebar-overlay");
        const icon = document.getElementById("sidebar-toggle-icon");
        const savedState = localStorage.getItem("sidebarState");
        const isSmallScreen = window.innerWidth < 1024;

        // On small screens, default to closed unless explicitly opened
        // On large screens, respect saved state or default to open
        if (isSmallScreen) {
          if (savedState === "open") {
            sidebar.classList.add("sidebar-open");
            icon.innerHTML = `
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              ></path>
            `;
          } else {
            sidebar.classList.remove("sidebar-open");
            icon.innerHTML = `
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h16"
              ></path>
            `;
          }
        } else {
          // Large screens - default to open unless closed
          if (savedState === "closed") {
            sidebar.classList.remove("sidebar-open");
            icon.innerHTML = `
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h16"
              ></path>
            `;
          } else {
            sidebar.classList.add("sidebar-open");
            icon.innerHTML = `
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              ></path>
            `;
          }
        }

        // Handle window resize
        let resizeTimer;
        window.addEventListener("resize", function () {
          clearTimeout(resizeTimer);
          resizeTimer = setTimeout(function () {
            const isSmallScreen = window.innerWidth < 1024;
            const isOpen = sidebar.classList.contains("sidebar-open");

            // Auto-close on small screens
            if (isSmallScreen && isOpen) {
              overlay.classList.remove("hidden");
            } else {
              overlay.classList.add("hidden");
            }

            // Auto-open on large screens if not explicitly closed
            if (!isSmallScreen && !isOpen && savedState !== "closed") {
              sidebar.classList.add("sidebar-open");
              icon.innerHTML = `
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M6 18L18 6M6 6l12 12"
                ></path>
              `;
            }
          }, 250);
        });
      })();
    </script>

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