<!doctype html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}{{ project_name }}{% endblock title %} — Provisioning</title>
  <!-- Apply saved theme + nav-mode before paint to avoid flash -->
  <script>
    (function() {
      var t = localStorage.getItem("prov-theme");
      if (t) document.documentElement.setAttribute("data-theme", t);
      var m = localStorage.getItem("prov-nav-mode");
      if (m === "icons") document.documentElement.classList.add("nav-icons");
      else if (m === "names") document.documentElement.classList.add("nav-names");
    })();
  </script>
  <link href="/public/css/provisioning.css" rel="stylesheet">
  <style>
    .badge-xs { height: 1rem; }
    .badge-success, .badge-info, .badge-error, .badge-warning { color: #ffffff; }
    html.nav-icons .nav-label { display: none !important; }
    html.nav-icons .dropdown-content .nav-label { display: inline !important; }
    html.nav-names .nav-icon { display: none !important; }
    @media (max-width: 767px) {
      .ws-nav .nav-label, .ws-subnav .nav-label { display: none !important; }
      .ws-nav .dropdown-content .nav-label,
      .ws-subnav .dropdown-content .nav-label { display: inline !important; }
    }
    .btn svg.w-3, .btn svg.h-3 { width: 0.75rem; height: 0.75rem; }
    .btn svg.w-3\.5, .btn svg.h-3\.5 { width: 0.875rem; height: 0.875rem; }
    .btn svg.w-4, .btn svg.h-4 { width: 1rem; height: 1rem; }
    .btn svg.w-5, .btn svg.h-5 { width: 1.25rem; height: 1.25rem; }
  </style>
  <script src="/public/vendor/htmx.min.js"></script>
  {% block head %}{% endblock head %}
</head>
<body class="min-h-screen bg-base-100 text-base-content">

<div class="navbar bg-base-200 shadow-lg px-4">

  <!-- ── Mobile: burger + brand ─────────────────────────────────────────── -->
  <div class="navbar-start md:hidden">
    <div class="dropdown">
      <button tabindex="0" class="btn btn-ghost btn-sm" aria-label="Menu">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
      <ul tabindex="0" class="dropdown-content menu menu-sm bg-base-200 shadow-lg rounded-box z-50 w-56 mt-2 p-2 gap-0.5">
        <li><a href="/ui/" class="gap-1.5">Dashboard</a></li>
        {% if ws_name %}
        <li>
          <details>
            <summary class="gap-1.5 font-medium font-mono">{{ ws_name }}</summary>
            <ul>
              <li><a href="/ui/workspaces/{{ ws_name }}">Overview</a></li>
              {% if ws_envs %}
              <li class="disabled"><span class="text-[10px] opacity-40 uppercase tracking-wider px-1">Infrastructure</span></li>
              {% for env in ws_envs %}
              <li>
                <details>
                  <summary class="font-mono text-xs">{{ env }}</summary>
                  <ul>
                    <li><a href="/ui/workspaces/{{ ws_name }}/servers?env={{ env }}">Servers</a></li>
                    <li><a href="/ui/workspaces/{{ ws_name }}/components?env={{ env }}">Components</a></li>
                  </ul>
                </details>
              </li>
              {% endfor %}
              {% else %}
              <li><a href="/ui/workspaces/{{ ws_name }}/servers">Servers</a></li>
              <li><a href="/ui/workspaces/{{ ws_name }}/components">Components</a></li>
              {% endif %}
              <li><a href="/ui/workspaces/{{ ws_name }}/dag">DAG</a></li>
              <li><a href="/ui/workspaces/{{ ws_name }}/clusters">Clusters</a></li>
              <li class="divider my-0.5"></li>
              <li class="disabled"><span class="text-[10px] opacity-40 uppercase tracking-wider px-1">Reflect</span></li>
              <li><a href="/ui/modes">Modes</a></li>
              <li><a href="/ui/jobs">Track / Jobs</a></li>
              <li><a href="/ui/ontology">Knowledge</a></li>
              <li class="divider my-0.5"></li>
              <li><a href="/ui/workspaces">← All Workspaces</a></li>
            </ul>
          </details>
        </li>
        {% else %}
        <li><a href="/ui/workspaces" class="gap-1.5">Workspace</a></li>
        {% endif %}
        <li><a href="/ui/jobs" class="gap-1.5">Jobs</a></li>
        <li><a href="/ui/tools" class="gap-1.5">Tools</a></li>
        <li><a href="/ui/modes" class="gap-1.5">Modes</a></li>
        <li><a href="/ui/extensions" class="gap-1.5">Extensions</a></li>
        <li><a href="/ui/ontology" class="gap-1.5">Ontology</a></li>
        <li class="divider my-0.5"></li>
        <li>
          <a href="/ui/logout" class="gap-1.5"
             onclick="localStorage.removeItem('prov-last-workspace'); localStorage.removeItem('prov-auth');">Logout</a>
        </li>
      </ul>
    </div>
    <!-- Mobile brand -->
    <a href="/ui/" class="btn btn-ghost p-1 ml-1">
      {% if logo %}
      <img id="proj-logo-m" src="{{ logo }}" alt="{{ project_name }}"
           class="h-10 max-w-[8rem] object-contain object-left">
      {% else %}
      <span class="font-bold font-mono text-primary text-base tracking-tight">⚙ {{ project_name }}</span>
      {% endif %}
    </a>
  </div>

  <!-- ── Desktop: brand ─────────────────────────────────────────────────── -->
  <div class="navbar-start hidden md:flex items-center gap-2">
    {% block nav_brand %}
    <a href="/ui/" class="btn btn-ghost p-1">
      {% if logo or logo_dark %}
        {% if logo %}<img id="proj-logo-light" src="{{ logo }}" alt="{{ project_name }}"
          class="h-10 max-w-[9rem] object-contain object-left">{% endif %}
        {% if logo_dark %}<img id="proj-logo-dark" src="{{ logo_dark }}" alt="{{ project_name }}"
          class="h-10 max-w-[9rem] object-contain object-left">{% endif %}
      {% else %}
      <span class="font-bold font-mono text-primary text-lg tracking-tight">⚙ {{ project_name }}</span>
      {% endif %}
    </a>
    {% endblock nav_brand %}
  </div>

  <!-- ── Desktop: nav links ─────────────────────────────────────────────── -->
  <div class="navbar-center hidden md:flex">
    <div class="flex items-center gap-0.5 text-sm">

      <!-- Dashboard -->
      <a href="/ui/" class="btn btn-ghost btn-sm gap-1.5 {% block nav_dashboard %}{% endblock %}">
        <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
        </svg>
        <span class="nav-label">Dashboard</span>
      </a>

      <!-- Workspace — dropdown when ws_name is set, plain link otherwise -->
      <div class="dropdown dropdown-hover">
        <a tabindex="0"
           href="{% if ws_name %}/ui/workspaces/{{ ws_name }}{% else %}/ui/workspaces{% endif %}"
           class="btn btn-ghost btn-sm gap-1.5 {% block nav_workspaces %}{% endblock %}">
          <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
          </svg>
          <span class="nav-label">{% if ws_name %}{{ ws_name }}{% else %}Workspace{% endif %}</span>
          {% if ws_name %}
          <svg class="w-3 h-3 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
          </svg>
          {% endif %}
        </a>
        {% if ws_name %}
        <ul tabindex="0" class="dropdown-content menu bg-base-200 shadow-lg rounded-box z-50 w-60 p-2 mt-1 max-h-[85vh] overflow-y-auto">

          <!-- Overview -->
          <li><a href="/ui/workspaces/{{ ws_name }}" class="gap-1.5 {% block nav_ws_overview %}{% endblock %}">
            <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
            </svg>
            Overview
          </a></li>

          {% if ws_envs %}
          <!-- ── Per-environment infrastructure ────────────────────────────── -->
          <li class="divider my-0.5"></li>
          <li class="disabled">
            <span class="text-[10px] opacity-40 uppercase tracking-wider font-semibold px-1">Infrastructure</span>
          </li>
          {% for env in ws_envs %}
          <li>
            <details>
              <summary class="gap-1.5 font-mono text-xs py-1.5 text-primary/80">
                <svg class="w-3.5 h-3.5 flex-shrink-0 text-primary/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/>
                </svg>
                {{ env }}
              </summary>
              <ul>
                <!-- Infrastructure resources -->
                <li class="menu-title py-0.5"><span class="text-[9px] opacity-50 uppercase tracking-wider">Resources</span></li>
                <li><a href="/ui/workspaces/{{ ws_name }}/servers?env={{ env }}" class="gap-1.5 text-xs">
                  <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
                  </svg>
                  Servers
                </a></li>
                <li><a href="/ui/workspaces/{{ ws_name }}/components?env={{ env }}" class="gap-1.5 text-xs">
                  <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/>
                  </svg>
                  Components
                </a></li>
                <li><a href="/ui/workspaces/{{ ws_name }}/dag?env={{ env }}" class="gap-1.5 text-xs">
                  <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                  </svg>
                  DAG
                </a></li>
                <!-- Reflect subsection per env -->
                <li class="menu-title py-0.5 mt-1"><span class="text-[9px] opacity-50 uppercase tracking-wider">Reflect</span></li>
                <li><a href="/ui/modes" class="gap-1.5 text-xs">
                  <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                  </svg>
                  Modes
                </a></li>
                <li><a href="/ui/jobs" class="gap-1.5 text-xs">
                  <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                  </svg>
                  Track
                </a></li>
                <li>
                  <details>
                    <summary class="gap-1.5 text-xs py-1">
                      <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
                      </svg>
                      Knowledge
                    </summary>
                    <ul>
                      <li><a href="/ui/ontology" class="text-xs">Ontology</a></li>
                      <li><a href="/ui/workspaces/{{ ws_name }}/dag?env={{ env }}" class="text-xs">DAG View</a></li>
                    </ul>
                  </details>
                </li>
                <li><a href="/ui/workspaces/{{ ws_name }}" class="gap-1.5 text-xs">
                  <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
                  </svg>
                  Domain
                </a></li>
              </ul>
            </details>
          </li>
          {% endfor %}

          {% else %}
          <!-- ── Flat nav when no environments declared ─────────────────────── -->
          <li class="divider my-0.5"></li>
          <li><a href="/ui/workspaces/{{ ws_name }}/servers" class="gap-1.5 {% block nav_ws_servers %}{% endblock %}">
            <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
            </svg>
            Servers
          </a></li>
          <li><a href="/ui/workspaces/{{ ws_name }}/components" class="gap-1.5 {% block nav_ws_components %}{% endblock %}">
            <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/>
            </svg>
            Components
          </a></li>
          <li><a href="/ui/workspaces/{{ ws_name }}/dag" class="gap-1.5 {% block nav_ws_dag %}{% endblock %}">
            <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
            </svg>
            DAG
          </a></li>
          <li class="divider my-0.5"></li>
          <li class="disabled">
            <span class="text-[10px] opacity-40 uppercase tracking-wider font-semibold px-1">Reflect</span>
          </li>
          <li><a href="/ui/modes" class="gap-1.5">
            <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            Modes
          </a></li>
          <li><a href="/ui/jobs" class="gap-1.5">
            <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
            </svg>
            Track
          </a></li>
          <li>
            <details>
              <summary class="gap-1.5 text-xs py-1.5">
                <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
                </svg>
                Knowledge
              </summary>
              <ul>
                <li><a href="/ui/ontology">Ontology</a></li>
                <li><a href="/ui/workspaces/{{ ws_name }}/dag">DAG View</a></li>
              </ul>
            </details>
          </li>
          {% endif %}

          <!-- ── Workspace-level ────────────────────────────────────────────── -->
          <li class="divider my-0.5"></li>
          <li><a href="/ui/workspaces/{{ ws_name }}/clusters" class="gap-1.5 {% block nav_ws_clusters %}{% endblock %}">
            <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            Clusters
          </a></li>
          <li><a href="/ui/workspaces" class="gap-1.5 text-base-content/50 text-xs">← All Workspaces</a></li>
        </ul>
        {% endif %}
      </div>

      <!-- Jobs -->
      <a href="/ui/jobs" class="btn btn-ghost btn-sm gap-1.5 {% block nav_jobs %}{% endblock %}">
        <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
        </svg>
        <span class="nav-label">Jobs</span>
      </a>

      <!-- Tools -->
      <a href="/ui/tools" class="btn btn-ghost btn-sm gap-1.5 {% block nav_tools %}{% endblock %}">
        <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
        </svg>
        <span class="nav-label">Tools</span>
      </a>

      <!-- Modes -->
      <a href="/ui/modes" class="btn btn-ghost btn-sm gap-1.5 {% block nav_modes %}{% endblock %}">
        <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <span class="nav-label">Modes</span>
      </a>

      <!-- Extensions -->
      <a href="/ui/extensions" class="btn btn-ghost btn-sm gap-1.5 {% block nav_extensions %}{% endblock %}">
        <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/>
        </svg>
        <span class="nav-label">Extensions</span>
      </a>

      <!-- Ontology -->
      <a href="/ui/ontology" class="btn btn-ghost btn-sm gap-1.5 {% block nav_ontology %}{% endblock %}">
        <svg class="nav-icon w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
        </svg>
        <span class="nav-label">Ontology</span>
      </a>

    </div>
  </div>

  <!-- ── Right side ─────────────────────────────────────────────────────── -->
  <div class="navbar-end gap-1">

    <!-- Status badges -->
    {% if nats_enabled %}
    <span class="badge badge-success badge-xs">NATS</span>
    {% else %}
    <span class="badge badge-ghost badge-xs opacity-40">NATS</span>
    {% endif %}
    {% if jwt_enabled %}
    <span class="badge badge-info badge-xs">JWT</span>
    {% else %}
    <span class="badge badge-warning badge-xs">solo</span>
    {% endif %}

    <!-- MCP dropdown -->
    <div class="dropdown dropdown-end hidden sm:block">
      <button tabindex="0" class="btn btn-xs btn-ghost gap-1" title="MCP Tools">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2v-4M9 21H5a2 2 0 01-2-2v-4m0 0h18"/>
        </svg>
        <span class="text-xs font-mono">MCP</span>
        <span class="inline-block w-1.5 h-1.5 rounded-full bg-success"></span>
      </button>
      <div tabindex="0"
           class="dropdown-content bg-base-200 border border-base-content/10 rounded-box z-50 shadow-lg w-64 p-3 mt-1">
        <p class="text-xs font-semibold text-base-content/60 mb-2 uppercase tracking-wide">MCP Tools</p>
        <ul class="space-y-0.5 max-h-80 overflow-y-auto">
          {% for tool in tool_names %}
          <li class="text-xs font-mono text-base-content/80 py-0.5 px-1 rounded hover:bg-base-300">
            {{ tool }}
          </li>
          {% endfor %}
        </ul>
        <div class="mt-2 pt-2 border-t border-base-content/10 text-[11px] text-base-content/40 space-y-0.5">
          <div>HTTP: <code class="font-mono">/mcp</code></div>
          <div>stdio: <code class="font-mono">--mcp-stdio</code></div>
        </div>
      </div>
    </div>

    <!-- Gear → Workspaces -->
    <a href="/ui/workspaces" class="btn btn-xs btn-ghost hidden sm:inline-flex" title="Manage workspaces">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
      </svg>
    </a>

    <!-- Daemon loopback / IP dropdown -->
    <div class="dropdown dropdown-end hidden sm:block" id="loopback-wrap">
      <button tabindex="0" id="loopback-btn"
              class="btn btn-xs btn-ghost font-mono gap-1 text-base-content/50"
              title="Daemon status">
        <span id="loopback-dot" class="inline-block w-1.5 h-1.5 rounded-full bg-base-content/20"></span>
        <span id="loopback-host">loopback</span>
      </button>
      <div tabindex="0"
           class="dropdown-content bg-base-200 border border-base-content/10 rounded-box z-50 shadow-lg w-64 p-3 mt-1 text-xs">
        <div class="flex items-center justify-between mb-2">
          <span class="font-semibold text-base-content/60 uppercase tracking-wide">Daemon</span>
          <button onclick="daemonPing()" class="btn btn-xs btn-ghost py-0 h-5 min-h-0 text-base-content/40">
            ↺ ping
          </button>
        </div>
        <div id="loopback-details" class="space-y-1 text-base-content/70">
          <div class="text-base-content/30 italic">loading…</div>
        </div>
        <div class="mt-2 pt-2 border-t border-base-content/10 flex justify-between items-center">
          <code class="font-mono text-[11px] text-base-content/40" id="loopback-addr"></code>
          <button onclick="navigator.clipboard.writeText(document.getElementById('loopback-addr').textContent)"
                  class="btn btn-xs btn-ghost py-0 h-5 min-h-0 text-base-content/30"
                  title="Copy address">⎘</button>
        </div>
      </div>
    </div>

    <!-- Nav display mode toggle -->
    <button id="nav-mode-btn" class="btn btn-ghost btn-xs hidden sm:inline-flex"
            title="Toggle nav display (icons+labels / icons / labels)"
            aria-label="Toggle nav display">
      <svg id="nav-mode-icon" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/>
      </svg>
    </button>

    <!-- Identity + role badge -->
    {% if perm_sub %}
    <div class="hidden sm:flex items-center gap-1">
      <span class="font-mono text-[11px] text-base-content/30">{{ perm_sub }}</span>
      {% if can_admin %}
      <span class="badge badge-warning badge-xs font-mono">admin</span>
      {% elif can_operate %}
      <span class="badge badge-info badge-xs font-mono">op</span>
      {% else %}
      <span class="badge badge-ghost badge-xs font-mono">viewer</span>
      {% endif %}
    </div>
    {% endif %}

    <!-- Logout -->
    <a href="/ui/logout"
       class="btn btn-ghost btn-xs hidden sm:inline-flex opacity-40"
       title="Sign out"
       onclick="localStorage.removeItem('prov-last-workspace'); localStorage.removeItem('prov-auth');">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
    </a>

    <!-- Theme toggle -->
    <button id="theme-toggle" class="btn btn-ghost btn-xs" title="Toggle theme" aria-label="Toggle theme">
      <svg id="icon-sun" class="w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707M17.657 17.657l-.707-.707M6.343 6.343l-.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z"/>
      </svg>
      <svg id="icon-moon" class="w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z"/>
      </svg>
    </button>

  </div>
</div>

{% if ws_name %}
<div class="bg-base-200/50 border-b border-base-300 px-6 py-1.5 text-sm flex items-center gap-1.5">
  <a href="/ui/" class="text-base-content/40 hover:text-base-content font-mono text-xs">⚙ {{ project_name }}</a>
  <span class="text-base-content/20">/</span>
  <a href="/ui/workspaces" class="text-base-content/50 hover:text-base-content text-xs">workspaces</a>
  <span class="text-base-content/20">/</span>
  {% if current_env %}
  <a href="/ui/workspaces/{{ ws_name }}" class="font-mono text-primary/70 hover:text-primary text-xs">{{ ws_name }}</a>
  <span class="text-base-content/20">/</span>
  <span class="font-bold font-mono text-primary text-xs">{{ current_env }}</span>
  {% else %}
  <span class="font-bold font-mono text-primary text-xs">{{ ws_name }}</span>
  {% endif %}
  {% block breadcrumb_extra %}{% endblock %}
</div>
{% endif %}

<main class="{% block main_class %}container mx-auto px-4 py-6 max-w-7xl{% endblock main_class %}">
  {% block content %}{% endblock content %}
</main>

{% block scripts %}{% endblock scripts %}

<script>
function liveBtnClick(btn) {
  var spin = btn.querySelector('.live-spin');
  var icon = btn.querySelector('.live-icon');
  var lbl  = btn.querySelector('.live-label');
  if (spin) spin.classList.remove('hidden');
  if (icon) icon.style.display = 'none';
  if (lbl)  lbl.style.display  = 'none';
  btn.disabled = true;
  window.location.reload();
}
</script>

<script>
(function() {
  var html = document.documentElement;

  // ── Theme ──────────────────────────────────────────────────────────────
  var DARK = "dark", LIGHT = "light", THEME_KEY = "prov-theme";
  var btn      = document.getElementById("theme-toggle");
  var iconSun  = document.getElementById("icon-sun");
  var iconMoon = document.getElementById("icon-moon");

  var logoLight = document.getElementById("proj-logo-light");
  var logoDark  = document.getElementById("proj-logo-dark");

  function applyLogos(theme) {
    if (logoLight && !logoDark) { logoLight.style.display = ""; return; }
    if (logoLight) logoLight.style.display = (theme === DARK) ? "none" : "";
    if (logoDark)  logoDark.style.display  = (theme === DARK) ? "" : "none";
  }

  function currentTheme() { return html.getAttribute("data-theme") === DARK ? DARK : LIGHT; }

  function applyTheme(t) {
    html.setAttribute("data-theme", t);
    localStorage.setItem(THEME_KEY, t);
    if (t === DARK) { iconSun.classList.remove("hidden"); iconMoon.classList.add("hidden"); }
    else            { iconMoon.classList.remove("hidden"); iconSun.classList.add("hidden"); }
    applyLogos(t);
  }
  applyTheme(currentTheme());
  if (btn) btn.addEventListener("click", function() {
    applyTheme(currentTheme() === DARK ? LIGHT : DARK);
  });

  // ── Nav display mode ───────────────────────────────────────────────────
  var NAV_KEY   = "prov-nav-mode";
  var NAV_MODES = ["both", "icons", "names"];
  var navBtn    = document.getElementById("nav-mode-btn");
  var navIcon   = document.getElementById("nav-mode-icon");

  var NAV_PATHS = {
    both:  "M4 6h16M4 12h16M4 18h7",
    icons: "M4 6h4M4 12h4M4 18h4M10 6h10M10 12h10M10 18h10",
    names: "M4 6h16M4 12h16M4 18h16"
  };

  function currentNavMode() { return localStorage.getItem(NAV_KEY) || "both"; }

  function applyNavMode(mode) {
    html.classList.remove("nav-icons", "nav-names");
    if (mode === "icons") html.classList.add("nav-icons");
    if (mode === "names") html.classList.add("nav-names");
    localStorage.setItem(NAV_KEY, mode);
    if (navIcon) {
      var p = navIcon.querySelector("path");
      if (p) p.setAttribute("d", NAV_PATHS[mode] || NAV_PATHS.both);
    }
    if (navBtn) navBtn.title = "Nav: " + mode + " — click to change";
  }

  applyNavMode(currentNavMode());
  if (navBtn) navBtn.addEventListener("click", function() {
    var cur  = currentNavMode();
    var next = NAV_MODES[(NAV_MODES.indexOf(cur) + 1) % NAV_MODES.length];
    applyNavMode(next);
  });

  // ── Last workspace ─────────────────────────────────────────────────────
  {% if ws_name %}
  try { localStorage.setItem("prov-last-workspace", "{{ ws_name }}"); } catch (_) {}
  {% endif %}

})();

// ── Daemon loopback status ─────────────────────────────────────────────
(function() {
  var dot     = document.getElementById("loopback-dot");
  var host    = document.getElementById("loopback-host");
  var details = document.getElementById("loopback-details");
  var addr    = document.getElementById("loopback-addr");

  if (!dot) return;

  if (host) host.textContent = window.location.host;
  if (addr) addr.textContent = window.location.origin;

  function fmtUptime(secs) {
    if (secs < 60)   return secs + "s";
    if (secs < 3600) return Math.floor(secs / 60) + "m " + (secs % 60) + "s";
    var h = Math.floor(secs / 3600), m = Math.floor((secs % 3600) / 60);
    return h + "h " + m + "m";
  }

  function row(label, value) {
    return '<div class="flex justify-between">' +
      '<span class="text-base-content/40">' + label + '</span>' +
      '<span class="font-mono">' + value + '</span></div>';
  }

  function ping() {
    fetch("/health")
      .then(function(r) { return r.ok ? r.json() : Promise.reject(r.status); })
      .then(function(d) {
        if (dot) {
          dot.className = "inline-block w-1.5 h-1.5 rounded-full " +
            (d.status === "ok" ? "bg-success" : "bg-warning");
        }
        if (details) {
          details.innerHTML =
            row("tools",       d.tools       || 0) +
            row("invocations", d.invocations || 0);
        }
      })
      .catch(function() {
        if (dot)     dot.className = "inline-block w-1.5 h-1.5 rounded-full bg-error";
        if (details) details.innerHTML = '<div class="text-error/70 italic">unreachable</div>';
      });
  }

  window.daemonPing = ping;
  ping();
  setInterval(ping, 30000);
})();
</script>

<!-- Version footer -->
<div style="position:fixed;bottom:0.75rem;right:1rem;font-size:0.7rem;font-family:'JetBrains Mono','Fira Code',monospace;user-select:none;opacity:0.55;letter-spacing:0.03em;">
  <span style="color:#94a3b8">provisioning</span>
  <span style="color:#e8a838;font-weight:600"> v{{ daemon_version }}</span>
  <span style="color:#475569;margin:0 0.25rem">|</span>
  <span style="color:#64748b">2026</span>
  {% if now_hms %}
  <span style="color:#475569;margin:0 0.25rem">|</span>
  <span style="color:#64748b" title="page loaded at this time (UTC)">{{ now_hms }} UTC</span>
  {% endif %}
</div>

</body>
</html>
