{layout admin/layout}

<div class="nv-page-head">
  <div>
    <div class="nv-page-title">{if $is_edit}{lang admin.nav_edit}{else}{lang admin.nav_new}{/if}</div>
    <div class="nv-page-desc">{lang admin.nav_help}</div>
  </div>
  <div class="nv-page-actions">
    <a class="nv-btn" href="{$entry_prefix}/admin/nav">{lang admin.back_to_list}</a>
  </div>
</div>

{* 栏目下拉选项：JS 给新行克隆用，不参与表单提交 *}
<select id="nv-node-options" style="display:none" aria-hidden="true">
  <option value="0">{lang admin.nav_item_pick_node}</option>
  {loop $node_options as $no}
  <option value="{$no.id}">{$no.label}</option>
  {/loop}
</select>

{* 新行模板（i18n 由服务端渲染，JS 仅替换 __SEQ__ 并克隆栏目选项） *}
<template id="nv-row-tpl">
  <div class="nv-nav-row" data-seq="__SEQ__">
    <div class="nv-nav-row__grid">
      <div class="nv-nav-col nv-nav-col--type">
        <select class="nv-nav-type">
          <option value="node">{lang admin.nav_item_node}</option>
          <option value="link">{lang admin.nav_item_link}</option>
        </select>
      </div>
      <div class="nv-nav-col nv-nav-col--src">
        <select class="nv-nav-ref" name="items[__SEQ__][ref_id]">
          <option value="0">{lang admin.nav_item_pick_node}</option>
        </select>
        <input class="nv-nav-url" type="text" name="items[__SEQ__][url]" placeholder="{lang admin.nav_item_url_ph}" style="display:none">
      </div>
      <div class="nv-nav-col nv-nav-col--title">
        <input class="nv-input" type="text" name="items[__SEQ__][title]" placeholder="{lang admin.nav_item_title_ph}">
      </div>
      <div class="nv-nav-col nv-nav-col--target">
        <select class="nv-input" name="items[__SEQ__][target]">
          <option value="_self">{lang admin.nav_item_self}</option>
          <option value="_blank">{lang admin.nav_item_blank}</option>
        </select>
      </div>
      <div class="nv-nav-col nv-nav-col--parent">
        <select class="nv-input nv-nav-parent" name="items[__SEQ__][parent]">
          <option value="0">{lang admin.nav_item_parent_top}</option>
        </select>
      </div>
      <div class="nv-nav-col nv-nav-col--sort">
        <input class="nv-input nv-input-sm" type="number" name="items[__SEQ__][sort]" value="0">
      </div>
      <div class="nv-nav-col nv-nav-col--ops">
        <button type="button" class="nv-btn nv-btn-xs nv-nav-remove">{lang admin.nav_item_remove}</button>
      </div>
    </div>
    <input type="hidden" name="items[__SEQ__][type]" value="node">
  </div>
</template>

<form class="nv-card" method="post" action="{$entry_prefix}/admin/nav/save">
  <input type="hidden" name="_token" value="{$csrf}">
  <input type="hidden" name="_form_token" value="{$form_token}">
  <input type="hidden" name="id" value="{$group.id|default=0}">

  <div class="nv-card-head">
    <span class="nv-card-title">{lang admin.nav_group_name}</span>
  </div>
  <div class="nv-card-body">
    <div class="nv-form-grid">
      <div class="nv-form-row nv-mb0">
        <label class="nv-label" for="name">{lang admin.nav_group_name} <span class="nv-required">*</span></label>
        <input class="nv-input" type="text" id="name" name="name" value="{$group.name}" placeholder="{lang admin.nav_group_name}" required>
      </div>
      <div class="nv-form-row nv-mb0">
        <label class="nv-label" for="sort">{lang admin.nav_sort}</label>
        <input class="nv-input" type="number" id="sort" name="sort" value="{$group.sort|default=0}">
      </div>
      <div class="nv-form-row nv-mb0">
        <label class="nv-label">{lang admin.nav_set_default}</label>
        <label class="nv-switch">
          <input type="hidden" name="is_default" value="0">
          <input type="checkbox" name="is_default" value="1" {if $group.is_default == 1}checked{/if}>
          <span></span>
        </label>
      </div>
    </div>
    <p class="nv-field-hint nv-mt16">{lang admin.nav_default_desc}</p>
  </div>

  <div class="nv-card-head">
    <span class="nv-card-title">{lang admin.nav_items}</span>
    <span class="nv-muted">{lang admin.nav_bind_desc}</span>
  </div>
  <div class="nv-card-body">
    <div class="nv-nav-items" id="nv-nav-items">
      {if $items}
      {foreach $items as $it}
      <div class="nv-nav-row" data-seq="{$it.seq}">
        <div class="nv-nav-row__grid">
          <div class="nv-nav-col nv-nav-col--type">
            <select class="nv-nav-type">
              <option value="node" {if $it.type == 'node'}selected{/if}>{lang admin.nav_item_node}</option>
              <option value="link" {if $it.type == 'link'}selected{/if}>{lang admin.nav_item_link}</option>
            </select>
          </div>
          <div class="nv-nav-col nv-nav-col--src">
            <select class="nv-nav-ref" name="items[{$it.seq}][ref_id]">
              <option value="0">{lang admin.nav_item_pick_node}</option>
              {loop $node_options as $no}
              <option value="{$no.id}" {if $it.ref_id == $no.id}selected{/if}>{$no.label}</option>
              {/loop}
            </select>
            <input class="nv-nav-url" type="text" name="items[{$it.seq}][url]" placeholder="{lang admin.nav_item_url_ph}" value="{$it.url}"{if $it.type != 'link'} style="display:none"{/if}>
          </div>
          <div class="nv-nav-col nv-nav-col--title">
            <input class="nv-input" type="text" name="items[{$it.seq}][title]" placeholder="{lang admin.nav_item_title_ph}" value="{$it.title}">
          </div>
          <div class="nv-nav-col nv-nav-col--target">
            <select class="nv-input" name="items[{$it.seq}][target]">
              <option value="_self" {if $it.target != '_blank'}selected{/if}>{lang admin.nav_item_self}</option>
              <option value="_blank" {if $it.target == '_blank'}selected{/if}>{lang admin.nav_item_blank}</option>
            </select>
          </div>
          <div class="nv-nav-col nv-nav-col--parent">
            <select class="nv-input nv-nav-parent" name="items[{$it.seq}][parent]">
              <option value="0">{lang admin.nav_item_parent_top}</option>
            </select>
          </div>
          <div class="nv-nav-col nv-nav-col--sort">
            <input class="nv-input nv-input-sm" type="number" name="items[{$it.seq}][sort]" value="{$it.sort}">
          </div>
          <div class="nv-nav-col nv-nav-col--ops">
            <button type="button" class="nv-btn nv-btn-xs nv-nav-remove">{lang admin.nav_item_remove}</button>
          </div>
        </div>
        <input type="hidden" name="items[{$it.seq}][type]" value="{$it.type}">
      </div>
      {/foreach}
      {else}
      <div class="nv-empty nv-nav-empty">
        <div class="nv-empty-title">{lang admin.nav_no_items}</div>
      </div>
      {/if}
    </div>
    <div class="nv-nav-actions">
      <button type="button" class="nv-btn" id="nv-add-node">{lang admin.nav_add_node}</button>
      <button type="button" class="nv-btn" id="nv-add-link">{lang admin.nav_add_link}</button>
    </div>
  </div>

  <div class="nv-toolbar">
    <button class="nv-btn nv-btn-primary" type="submit">{lang admin.save}</button>
    <a class="nv-btn" href="{$entry_prefix}/admin/nav">{lang admin.cancel}</a>
  </div>
</form>

{raw}
<script>
(function () {
  var container = document.getElementById('nv-nav-items');
  if (!container) { return; }

  var tpl = document.getElementById('nv-row-tpl');
  var nodeOpts = document.getElementById('nv-node-options');
  var seqCounter = 100000;
  var pickTop = (function () {
    var s = container.querySelector('.nv-nav-parent');
    return s ? s.querySelector('option[value="0"]').textContent : 'Top';
  })();
  var emptyHtml = (function () {
    var e = container.querySelector('.nv-nav-empty');
    return e ? e.outerHTML : '';
  })();

  function rowLabel(row) {
    var hidden = row.querySelector('input[name$="[type]"]');
    var type = hidden ? hidden.value : 'node';
    var titleEl = row.querySelector('input[name$="[title]"]');
    var title = titleEl ? titleEl.value.trim() : '';
    if (title) { return title; }
    if (type === 'node') {
      var ref = row.querySelector('.nv-nav-ref');
      if (ref && ref.selectedIndex >= 0) { return ref.options[ref.selectedIndex].text; }
      return '';
    }
    var url = row.querySelector('.nv-nav-url');
    return url ? url.value.trim() : '';
  }

  function syncType(row, type) {
    var ref = row.querySelector('.nv-nav-ref');
    var url = row.querySelector('.nv-nav-url');
    if (type === 'link') {
      if (ref) { ref.style.display = 'none'; }
      if (url) { url.style.display = ''; }
    } else {
      if (ref) { ref.style.display = ''; }
      if (url) { url.style.display = 'none'; }
    }
  }

  function rebuildParents() {
    var rows = Array.prototype.slice.call(container.querySelectorAll('.nv-nav-row'));
    var tops = [];
    rows.forEach(function (r) {
      var psel = r.querySelector('.nv-nav-parent');
      if (psel && psel.value === '0') {
        tops.push({ seq: r.getAttribute('data-seq'), label: rowLabel(r) });
      }
    });
    rows.forEach(function (r) {
      var psel = r.querySelector('.nv-nav-parent');
      if (!psel) { return; }
      var cur = psel.value;
      psel.innerHTML = '';
      var o0 = document.createElement('option');
      o0.value = '0';
      o0.textContent = pickTop;
      psel.appendChild(o0);
      tops.forEach(function (t) {
        if (t.seq === r.getAttribute('data-seq')) { return; }
        var o = document.createElement('option');
        o.value = t.seq;
        o.textContent = t.label;
        psel.appendChild(o);
      });
      if (cur === '0' || psel.querySelector('option[value="' + cur + '"]')) {
        psel.value = cur;
      } else {
        psel.value = '0';
      }
    });
  }

  function populateRef(row) {
    var ref = row.querySelector('.nv-nav-ref');
    if (!ref) { return; }
    ref.innerHTML = '';
    Array.prototype.forEach.call(nodeOpts.options, function (op) {
      ref.appendChild(op.cloneNode(true));
    });
  }

  function addRow(type) {
    var seq = ++seqCounter;
    var frag = tpl.content.cloneNode(true);
    var row = frag.querySelector('.nv-nav-row');
    row.setAttribute('data-seq', seq);
    Array.prototype.forEach.call(row.querySelectorAll('[name]'), function (el) {
      el.name = el.name.replace('__SEQ__', seq);
    });
    row.querySelector('.nv-nav-type').value = type;
    row.querySelector('input[name$="[type]"]').value = type;
    populateRef(row);
    syncType(row, type);
    container.appendChild(row);
    var empty = container.querySelector('.nv-nav-empty');
    if (empty) { empty.parentNode.removeChild(empty); }
    rebuildParents();
  }

  document.getElementById('nv-add-node').addEventListener('click', function () { addRow('node'); });
  document.getElementById('nv-add-link').addEventListener('click', function () { addRow('link'); });

  container.addEventListener('click', function (e) {
    if (e.target.classList.contains('nv-nav-remove')) {
      var row = e.target.closest('.nv-nav-row');
      if (row) { row.parentNode.removeChild(row); }
      if (container.querySelectorAll('.nv-nav-row').length === 0 && emptyHtml) {
        container.insertAdjacentHTML('beforeend', emptyHtml);
      }
      rebuildParents();
    }
  });

  container.addEventListener('change', function (e) {
    var t = e.target;
    if (t.classList.contains('nv-nav-type')) {
      var row = t.closest('.nv-nav-row');
      var type = t.value;
      row.querySelector('input[name$="[type]"]').value = type;
      syncType(row, type);
    }
  });

  container.addEventListener('input', function (e) {
    if (e.target.matches('input[name$="[title]"]')) { rebuildParents(); }
  });

  // 初始化：同步已有行的显示，并填充二级归属下拉
  Array.prototype.forEach.call(container.querySelectorAll('.nv-nav-row'), function (r) {
    var hidden = r.querySelector('input[name$="[type]"]');
    syncType(r, hidden ? hidden.value : 'node');
  });
  rebuildParents();
})();
</script>
{/raw}