{{define "yang-tree.html"}}
{{template "base" .}}
{{end}}

{{define "content"}}
<div class="configure-page">
  {{if .Loading}}
  <div class="alert alert-info"
       hx-get="{{.TreeBase}}"
       hx-trigger="every 3s"
       hx-target="#content"
       hx-swap="innerHTML">
    Downloading YANG schema from device&hellip; this takes a moment on first login.
  </div>
  {{else}}
  <div class="yang-layout">

    {{/* ── Left pane: navigation tree ───────────────────────── */}}
    <div class="yang-tree-pane info-card">
      <div class="card-header">{{if .ReadOnly}}View all{{else}}Edit all{{end}}</div>
      <ul class="yang-tree"{{if .InitialPath}} data-initial-path="{{.InitialPath}}"{{end}}>
        <li>
          <details class="yt-node" open>
            <summary class="yt-label">
              {{template "icon-yt-chevron"}}
              <span class="yt-name yt-root">/</span>
            </summary>
            <ul class="yt-children">
              {{template "yang-tree-nodes" .Nodes}}
            </ul>
          </details>
        </li>
      </ul>
    </div>

    {{/* ── Right pane: node detail ────────────────────────────  */}}
    <div class="yang-detail-pane" id="yang-detail"
         {{if .InitialPath}}
         hx-get="{{.TreeBase}}/node?path={{.InitialPath | urlquery}}"
         hx-trigger="load"
         hx-swap="innerHTML"
         {{end}}>
      {{if not .InitialPath}}
      <div class="yang-detail-empty">
        {{template "icon-search-empty"}}
        <p>Select a node to inspect.</p>
      </div>
      {{end}}
    </div>

  </div>
  {{end}}

  {{if not .ReadOnly}}{{template "configure-toolbar" .}}{{end}}
</div>
{{end}}