{{ define "title" }}{{ .Title }}{{ end }}
{{ define "description" }}Command reference for the CircleCI CLI.{{ end }}
{{ define "llms_href" }}../llms.txt{{ end }}
{{ define "body_class" }}has-site-nav page-reference{{ end }}
{{ define "main" }}
  {{ partial "navbar.html" (dict "root" "../" "onSurface" true) }}

  {{/* Mobile command-nav toggle. Pure CSS (checkbox + labels): the checkbox
       holds open/closed state, the fixed button toggles it wherever you scroll,
       and the backdrop label closes it. Hidden on wide screens via CSS. */}}
  <input type="checkbox" id="nav-toggle" class="nav-toggle">
  <label for="nav-toggle" class="nav-toggle-btn" aria-label="Toggle command navigation">
    <span class="nav-toggle-bars" aria-hidden="true"></span>
  </label>
  <label for="nav-toggle" class="nav-backdrop" aria-hidden="true"></label>

  <div class="layout">
    <aside class="sidebar">
      {{/* Build the command nav from the page's heading tree. The page has two
           top-level sections ("Getting started" and "Reference"); under
           Reference the commands are grouped (CI / Management / User / ...), so
           render down to H4: group -> command -> subcommand. */}}
      <nav class="toc" aria-label="Command reference">
        {{ partial "command-nav.html" (dict "items" .Fragments.Headings "parent" "" "depth" 1 "maxDepth" 4) }}
      </nav>
    </aside>

    <div class="content-area">
      <main class="content">
        {{ .Content }}
      </main>
      <footer class="ref-footer">
        <span>CircleCI CLI</span>
        <span>Generated from <code>circleci reference</code></span>
        <span><a href="../llms.txt">View as Markdown</a> · for LLMs</span>
      </footer>
    </div>
  </div>

  {{/* Progressive enhancement: open/close already works without JS via the
       checkbox. This just closes the mobile nav after a link is chosen or on
       Escape, so it doesn't stay covering the content. */}}
  <script>
    (function () {
      var toggle = document.getElementById('nav-toggle');
      var toc = document.querySelector('.toc');
      if (!toggle || !toc) return;
      toc.addEventListener('click', function (e) {
        if (e.target.closest('a')) toggle.checked = false;
      });
      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') toggle.checked = false;
      });
    })();
  </script>
{{ end }}