<%- include("partials/layout-top", { title, pageWidth: "workspace", pageId: "navigation-builder" }) %>

<section class="card nav-builder" data-navigation-builder>
  <header class="section-header nav-builder-page-header">
    <div>
      <p class="eyebrow">Application shell</p>
      <h1>Navigation</h1>
      <p class="hint">Organize sidebar destinations into clear sections. Drag with a pointer or use the labelled move controls.</p>
    </div>
    <span class="badge" data-nav-dirty-badge hidden>Unsaved changes</span>
  </header>

  <form
    method="post"
    action="/admin/navigation"
    class="form-grid"
    id="nav-form"
    data-lumi-enhanced-form
    data-lumi-form-id="navigation-builder"
  >
    <fieldset class="field full nav-builder-settings">
      <legend>Sidebar behavior</legend>
      <div class="nav-builder-setting-grid">
        <label class="switch" for="nav-enabled">
          <input
            id="nav-enabled"
            type="checkbox"
            class="switch-input"
            name="nav_enabled"
            <%= navStructure.enabled ? "checked" : "" %>
          />
          <span class="switch-track" aria-hidden="true"></span>
          <span>
            <strong>Enable custom navigation</strong>
            <span class="hint switch-text" data-switch-state><%= navStructure.enabled ? "Enabled" : "Disabled" %></span>
          </span>
        </label>
        <label class="switch" for="nav-include-unassigned">
          <input
            id="nav-include-unassigned"
            type="checkbox"
            class="switch-input"
            name="nav_include_unassigned"
            <%= navStructure.includeUnassigned ? "checked" : "" %>
          />
          <span class="switch-track" aria-hidden="true"></span>
          <span>
            <strong>Include unassigned items</strong>
            <span class="hint switch-text" data-switch-state><%= navStructure.includeUnassigned ? "Enabled" : "Disabled" %></span>
          </span>
        </label>
      </div>
      <div class="form-grid nav-builder-unassigned-settings">
        <div class="field">
          <label for="nav-unassigned-label">Unassigned section label</label>
          <input id="nav-unassigned-label" name="nav_unassigned_label" value="<%= navStructure.unassignedLabel || 'Other' %>" />
        </div>
        <div class="field">
          <label for="nav-unassigned-id">Unassigned section ID</label>
          <input id="nav-unassigned-id" name="nav_unassigned_id" value="<%= navStructure.unassignedId || 'other' %>" autocapitalize="none" spellcheck="false" />
        </div>
        <div class="field">
          <label for="nav-unassigned-icon">Unassigned section icon</label>
          <select id="nav-unassigned-icon" name="nav_unassigned_icon">
            <option value="">Default (blocks)</option>
            <% (sectionIcons || []).forEach((icon) => { %>
            <option value="<%= icon %>" <%= navStructure.unassignedIcon === icon ? 'selected' : '' %>><%= icon %></option>
            <% }) %>
          </select>
        </div>
      </div>
    </fieldset>

    <div class="field full nav-builder-workspace">
      <div class="nav-toolbar" aria-label="Navigation editor actions">
        <button type="button" class="button subtle" data-add-section>Add section</button>
        <button type="button" class="button subtle" data-advanced-toggle aria-expanded="false" aria-controls="nav-advanced-panel">Advanced JSON</button>
      </div>

      <div class="nav-builder-body">
        <section aria-labelledby="nav-sections-heading">
          <div class="nav-builder-header">
            <div>
              <h2 id="nav-sections-heading">Sidebar sections</h2>
              <p class="hint">Items appear in this order in the application sidebar.</p>
            </div>
          </div>
          <div class="nav-section-list" data-section-list></div>
        </section>

        <aside class="nav-pool-card" aria-labelledby="nav-unassigned-heading">
          <div class="nav-builder-header">
            <div>
              <h2 id="nav-unassigned-heading">Unassigned items</h2>
              <p class="hint">Move an item into a section to give it a deliberate location.</p>
            </div>
          </div>
          <div class="nav-dd-list" data-unassigned-list data-group-label="Unassigned items"></div>
        </aside>
      </div>

      <section class="nav-advanced" id="nav-advanced-panel" data-advanced-panel aria-labelledby="nav-advanced-heading">
        <div class="section-header">
          <div>
            <h2 id="nav-advanced-heading">Advanced structure</h2>
            <p class="hint">Use JSON only when bulk editing is faster than the visual builder.</p>
          </div>
        </div>
        <div class="form-grid">
          <div class="field full">
            <label for="nav-sections-json">Sections JSON</label>
            <textarea name="nav_sections" rows="14" id="nav-sections-json" spellcheck="false" aria-describedby="nav-sections-json-help"><%- navSectionsJson %></textarea>
            <p class="hint" id="nav-sections-json-help">Each section needs <code>id</code>, <code>label</code>, <code>icon</code>, and an <code>items</code> array.</p>
          </div>
          <div class="field full">
            <button type="button" class="button subtle" data-apply-json>Apply JSON to visual builder</button>
          </div>
          <details class="field full">
            <summary>View Lumi's default structure</summary>
            <pre tabindex="0"><code><%- defaultSectionsJson %></code></pre>
          </details>
        </div>
      </section>
    </div>

    <p class="hint lumi-form-status nav-builder-status" data-lumi-form-status data-nav-builder-status role="status" aria-live="polite">All changes are saved.</p>
  </form>

  <div class="button-group centered nav-actions">
    <button type="submit" form="nav-form" class="button" data-pending-label="Saving navigation…">Save navigation</button>
    <form
      method="post"
      action="/admin/navigation/reset"
      class="inline-form"
      data-lumi-enhanced-form
      data-confirm-mode="modal"
      data-confirm-title="Reset navigation"
      data-confirm-text="Replace the current navigation layout with Lumi's default structure?"
      data-confirm-label="Reset navigation"
    >
      <button type="submit" class="button subtle" data-pending-label="Resetting…">Reset to default</button>
      <span class="visually-hidden" data-lumi-form-status role="status" aria-live="polite"></span>
    </form>
  </div>
</section>

<script id="nav-items-data" type="application/json"><%- navItemsJson %></script>
<script id="nav-sections-data" type="application/json"><%- navSectionsData %></script>
<script id="nav-icons-data" type="application/json"><%- JSON.stringify(sectionIcons || []) %></script>
<%- include("partials/layout-bottom") %>
