{% extends "base.html" %}
{% block title %}导航 · 本地导航{% endblock %}
{% block body %}
<div class="app-shell">
<header class="topbar">
  <h1>本地导航</h1>
  <nav>
    <span class="user">{{ current_user.username }}</span>
    <a href="{{ url_for('admin_groups') }}">分组管理</a>
    <a href="{{ url_for('admin_services') }}">服务管理</a>
    <a href="{{ url_for('logout') }}">退出</a>
  </nav>
</header>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="flash-wrap" style="padding-top: 0.5rem">
  {% for cat, msg in messages %}
  <div class="flash {{ cat }}">{{ msg }}</div>
  {% endfor %}
</div>
{% endif %}
{% endwith %}
<div class="layout-main">
  <aside class="sidebar" id="sidebar">
    {% for group, services in grouped %}
    <div class="sidebar-section">
      <h2>{{ group.name }}</h2>
      {% for svc in services %}
      <a
        href="#"
        class="nav-link"
        role="button"
        data-url="{{ svc.build_url() }}"
        data-name="{{ svc.name | e }}"
        >{{ svc.name }}</a
      >
      {% else %}
      <div class="hint" style="padding: 0 1rem">该分组下暂无服务</div>
      {% endfor %}
    </div>
    {% else %}
    <div class="hint" style="padding: 1rem">
      暂无分组与服务，请到「分组管理」「服务管理」添加。
    </div>
    {% endfor %}
  </aside>
  <div class="frame-wrap">
    <div class="frame-placeholder" id="placeholder" aria-hidden="true"></div>
    <iframe id="svc-frame" title="内嵌服务" hidden></iframe>
  </div>
</div>
</div>
<script>
  (function () {
    var frame = document.getElementById("svc-frame");
    var placeholder = document.getElementById("placeholder");
    var links = document.querySelectorAll(".nav-link[data-url]");

    function setActive(el) {
      links.forEach(function (a) {
        a.classList.remove("active");
      });
      if (el) el.classList.add("active");
    }

    links.forEach(function (a) {
      a.addEventListener("click", function (e) {
        e.preventDefault();
        var url = a.getAttribute("data-url");
        if (!url) return;
        placeholder.hidden = true;
        frame.hidden = false;
        frame.src = url;
        setActive(a);
      });
    });
  })();
</script>
{% endblock %}