{# Общий каркас страниц веб-интерфейса Kind Clusters Dashboard.
   Автор: Сергей Антропов — https://devops.org.ru #}
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" href="/static/favicon.svg" type="image/svg+xml" />
  <link rel="alternate icon" href="/favicon.ico" />
  <title>{% block page_title %}{{ app_title }}{% endblock %} — kind</title>
  {# Тема до первой отрисовки: localStorage kind_k8s_theme или prefers-color-scheme #}
  <script>
    (function () {
      try {
        var k = "kind_k8s_theme";
        var v = localStorage.getItem(k);
        var t =
          v === "light" || v === "dark"
            ? v
            : window.matchMedia("(prefers-color-scheme: light)").matches
              ? "light"
              : "dark";
        document.documentElement.setAttribute("data-theme", t);
      } catch (e) {
        document.documentElement.setAttribute("data-theme", "dark");
      }
    })();
  </script>
  <link rel="stylesheet" href="/static/style.css" />
  <script src="/static/js/theme.js" defer></script>
  <script src="/static/js/nav-mobile.js" defer></script>
  {% block head_extra %}{% endblock %}
</head>
<body
  class="app-body{% block body_extra_class %}{% endblock %}"
  data-api-base="/api/v1"
  data-app-title="{{ app_title | e }}"
  {% block body_attrs %}{% endblock %}
>
  <a class="skip-link" href="#main-content">К основному содержимому</a>

  <header class="top-nav" role="banner">
    <div class="top-nav-inner">
      {# Логотип Kubernetes (SVG из набора Simple Icons, CC0) + название — одна ссылка на главную. #}
      <a href="/" class="nav-brand nav-brand-link">
        <img
          src="/static/icons/kubernetes.svg"
          alt=""
          class="nav-logo-img"
          width="28"
          height="28"
          decoding="async"
        />
        <span class="nav-title">{{ app_title }}</span>
      </a>
      {# При ширине < 920px — «гамбургер»; панель #top-nav-drawer справа (nav-mobile.js). #}
      <button
        type="button"
        class="nav-menu-toggle"
        id="nav-menu-toggle"
        aria-expanded="false"
        aria-controls="top-nav-drawer"
        aria-label="Открыть меню разделов"
      >
        <span class="nav-menu-toggle__bars" aria-hidden="true">
          <span class="nav-menu-toggle__bar"></span>
          <span class="nav-menu-toggle__bar"></span>
          <span class="nav-menu-toggle__bar"></span>
        </span>
      </button>
      <div
        class="nav-menu-backdrop"
        id="nav-menu-backdrop"
        hidden
        tabindex="-1"
        aria-hidden="true"
      ></div>
      {# Один ряд flex (десктоп): пилюли, API, тема; на мобильных — содержимое в выезжающей панели #}
      <nav class="nav-links top-nav-actions" id="top-nav-drawer" aria-label="Разделы и оформление">
        {# Шапка панели только на узких экранах (CSS); кнопка дублирует закрытие с «гамбургера». #}
        <div class="nav-drawer-header">
          <span class="nav-drawer-title">Меню</span>
          <button
            type="button"
            class="nav-drawer-close"
            id="nav-drawer-close"
            aria-label="Закрыть меню"
          >
            <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false">
              <path
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                d="M6 6l12 12M18 6L6 18"
              />
            </svg>
          </button>
        </div>
        {# Прокрутка только у пилюль: overflow-x на nav обрезал бы выпадающее меню API (position: absolute). #}
        <div class="nav-links-scroll">
          <a href="/" class="nav-link nav-pill{% if nav_active|default('') == 'panel' %} nav-pill--active{% endif %}">Панель</a>
          <a href="/clusters" class="nav-link nav-pill{% if nav_active|default('') == 'clusters' %} nav-pill--active{% endif %}">Кластеры</a>
          <a href="/cluster-addons" class="nav-link nav-pill{% if nav_active|default('') == 'cluster_addons' %} nav-pill--active{% endif %}">Аддоны</a>
          <a href="/journal" class="nav-link nav-pill{% if nav_active|default('') == 'journal' %} nav-pill--active{% endif %}">Журнал</a>
          <a href="/documentation" class="nav-link nav-pill{% if nav_active|default('') == 'documentation' %} nav-pill--active{% endif %}">Документация</a>
        </div>
        <div class="nav-dropdown">
          <button
            type="button"
            class="nav-link nav-pill nav-dropdown__trigger"
            id="nav-api-trigger"
            aria-expanded="false"
            aria-haspopup="true"
            aria-controls="nav-api-menu"
          >
            API
          </button>
          <ul class="nav-dropdown__menu" id="nav-api-menu" role="menu" hidden>
            <li role="none">
              <a
                role="menuitem"
                href="/docs"
                class="nav-dropdown__link nav-pill--ext"
                data-open-window="kind_swagger"
                >Swagger</a>
            </li>
            <li role="none">
              <a
                role="menuitem"
                href="/redoc"
                class="nav-dropdown__link nav-pill--ext"
                data-open-window="kind_redoc"
                >ReDoc</a>
            </li>
            <li role="none">
              <a
                role="menuitem"
                href="/api/v1/health"
                class="nav-dropdown__link nav-pill--ext"
                data-open-window="kind_health"
                >Health</a>
            </li>
            <li role="none">
              <a
                role="menuitem"
                href="https://hub.docker.com/r/kindest/node/tags"
                class="nav-dropdown__link nav-pill--ext"
                target="_blank"
                rel="noopener noreferrer"
                title="Список тегов kindest/node на Docker Hub (новое окно)"
                >Теги образов</a>
            </li>
          </ul>
        </div>
        <button type="button" id="theme-toggle" class="theme-toggle theme-toggle--nav-end">
          <svg
            class="theme-toggle__icon theme-toggle__icon--sun"
            viewBox="0 0 24 24"
            width="18"
            height="18"
            aria-hidden="true"
            focusable="false"
          >
            <circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2" />
            <path
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              d="M12 2v2M12 20v2M2 12h2M20 12h2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M19.07 4.93l-1.41 1.41M6.34 17.66l-1.41 1.41"
            />
          </svg>
          <svg
            class="theme-toggle__icon theme-toggle__icon--moon"
            viewBox="0 0 24 24"
            width="18"
            height="18"
            aria-hidden="true"
            focusable="false"
          >
            <path
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linejoin="round"
              d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
            />
          </svg>
        </button>
      </nav>
    </div>
  </header>

  <div id="toast" class="toast hidden" role="status" aria-live="polite"></div>
  {# Плавающие подсказки для иконок (position:fixed; не режутся overflow таблицы). #}
  <div id="action-tooltip" class="action-tooltip-floating hidden" role="tooltip"></div>

  <main id="main-content" class="app-main" tabindex="-1">
    {% block content %}{% endblock %}
  </main>

  <footer class="footer app-footer">
    {% block footer %}
    <div class="footer-inner">
      <p class="muted footer-line">Данные: том <code>clusters/</code> на хосте</p>
      <p class="footer-copyright">
        © {{ app_title }} ·
        <a href="https://devops.org.ru" target="_blank" rel="noopener">devops.org.ru</a>
      </p>
    </div>
    {% endblock %}
  </footer>

  {# Отдельное окно для Swagger/ReDoc/Health; выпадающее меню API. #}
  <script>
    (function () {
      var opts = "noopener,noreferrer,width=1240,height=840,scrollbars=yes,resizable=yes";
      function bindOpenWindow(scope) {
        (scope || document).querySelectorAll("[data-open-window]").forEach(function (a) {
          if (a.tagName !== "A") return;
          a.addEventListener("click", function (e) {
            e.preventDefault();
            var name = a.getAttribute("data-open-window") || "kind_ext";
            window.open(a.getAttribute("href"), name, opts);
          });
        });
      }
      bindOpenWindow();

      var dd = document.querySelector(".nav-dropdown");
      if (!dd) return;
      var btn = document.getElementById("nav-api-trigger");
      var menu = document.getElementById("nav-api-menu");
      if (!btn || !menu) return;

      function closeApiMenu() {
        dd.classList.remove("nav-dropdown--open");
        btn.setAttribute("aria-expanded", "false");
        menu.setAttribute("hidden", "");
      }
      function openApiMenu() {
        dd.classList.add("nav-dropdown--open");
        btn.setAttribute("aria-expanded", "true");
        menu.removeAttribute("hidden");
      }
      function toggleApiMenu() {
        if (menu.hasAttribute("hidden")) openApiMenu();
        else closeApiMenu();
      }

      btn.addEventListener("click", function (e) {
        e.stopPropagation();
        toggleApiMenu();
      });

      menu.querySelectorAll("a[role='menuitem']").forEach(function (a) {
        a.addEventListener("click", function () {
          closeApiMenu();
        });
      });

      /* Закрытие по клику вне блока API (фаза capture: не конфликтует с открытием по кнопке). */
      document.addEventListener(
        "click",
        function (e) {
          if (!dd.contains(e.target)) closeApiMenu();
        },
        true,
      );

      document.addEventListener("keydown", function (e) {
        if (e.key === "Escape") closeApiMenu();
      });
    })();
  </script>
  {% block scripts %}{% endblock %}
</body>
</html>
