{layout admin/layout}

<div class="nv-page-head">
  <div>
    <div class="nv-page-title">{if $is_edit}{lang admin.edit}{lang admin.nodes}{else}{lang admin.new_node}{/if}</div>
    <div class="nv-page-desc">{lang admin.node_slug_unique_hint}</div>
  </div>
  <div class="nv-page-actions">
    <a class="nv-btn" href="{$entry_prefix}/admin/node">{lang admin.back_to_list}</a>
  </div>
</div>

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

  <div class="nv-card-head">
    <span class="nv-card-title">{lang admin.node_info}</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.node_name} <span class="nv-required">*</span></label>
        <input class="nv-input" type="text" id="name" name="name" value="{$node.name}" placeholder="{lang admin.ph_node_name}" required>
      </div>
      <div class="nv-form-row nv-mb0">
        <label class="nv-label" for="slug">URL {lang admin.slug}</label>
        <input class="nv-input" type="text" id="slug" name="slug" value="{$node.slug}" placeholder="{lang admin.ph_slug_auto}">
      </div>
    </div>

    <div class="nv-form-grid nv-mt16">
      <div class="nv-form-row nv-mb0">
        <label class="nv-label" for="nodeType">{lang admin.node_type}</label>
        <select class="nv-input" id="nodeType" name="type">
          <option value="node" {if empty($node.is_link)}selected{/if}>{lang admin.node_type_normal}</option>
          <option value="link" {if !empty($node.is_link)}selected{/if}>{lang admin.node_type_link}</option>
        </select>
      </div>
      <div class="nv-form-row nv-mb0" id="nodeUrlRow">
        <label class="nv-label" for="nodeUrl">{lang admin.node_link_url}</label>
        <input class="nv-input" type="text" id="nodeUrl" name="url" value="{$node.link_url}"
               placeholder="{lang admin.ph_node_url}">
      </div>
    </div>

    <div class="nv-form-grid nv-mt16">
      <div class="nv-form-row nv-mb0">
        <label class="nv-label" for="pid">{lang admin.parent_node}</label>
        <select class="nv-input" id="pid" name="pid">
          <option value="0">{lang admin.opt_top_level_node}</option>
          {foreach $parent_options as $opt}
          <option value="{$opt.id}" {if $node.pid == $opt.id}selected{/if}>{$opt.label}</option>
          {/foreach}
        </select>
      </div>
      <div class="nv-form-row nv-mb0">
        <label class="nv-label" for="model_id">{lang admin.belongs_to_model}</label>
        <select class="nv-input" id="model_id" name="model_id">
          <option value="0">{lang admin.opt_no_specific}</option>
          {foreach $models as $m}
          <option value="{$m.id}" {if $node.model_id == $m.id}selected{/if}>{$m.title}</option>
          {/foreach}
        </select>
      </div>
    </div>

    <div class="nv-form-row nv-mt16">
      <label class="nv-label" for="title">{lang admin.node_title}</label>
      <input class="nv-input" type="text" id="title" name="title" value="{$node.title}" placeholder="{lang admin.ph_node_title}">
    </div>

    <div class="nv-form-row">
      <label class="nv-label" for="keywords">{lang admin.keywords}</label>
      <input class="nv-input" type="text" id="keywords" name="keywords" value="{$node.keywords}" placeholder="{lang admin.ph_keywords}">
    </div>

    <div class="nv-form-row">
      <label class="nv-label" for="description">{lang admin.node_description}</label>
      <textarea class="nv-textarea" id="description" name="description" rows="3">{$node.description}</textarea>
    </div>

    <div class="nv-form-grid">
      <div class="nv-form-row nv-mb0">
        <label class="nv-label" for="template_list">{lang admin.template_list_label}</label>
        <input class="nv-input" type="text" id="template_list" name="template_list" value="{$node.template_list}" placeholder="{lang admin.ph_template_list}">
      </div>
      <div class="nv-form-row nv-mb0">
        <label class="nv-label" for="template_detail">{lang admin.template_detail_label}</label>
        <input class="nv-input" type="text" id="template_detail" name="template_detail" value="{$node.template_detail}" placeholder="{lang admin.ph_template_detail}">
      </div>
    </div>

    <div class="nv-form-grid nv-mt16">
      <div class="nv-form-row nv-mb0">
        <label class="nv-label" for="sort">{lang admin.sort_order}</label>
        <input class="nv-input" type="number" id="sort" name="sort" value="{$node.sort|default=0}">
      </div>
      <div class="nv-form-row nv-mb0">
        <label class="nv-label" for="status">{lang admin.status}</label>
        <select class="nv-input" id="status" name="status">
          <option value="1" {if $node.status == 1 || $node.status == ''}selected{/if}>{lang admin.visible}</option>
          <option value="0" {if $node.status == 0 && $node.status != ''}selected{/if}>{lang admin.hidden}</option>
        </select>
      </div>
    </div>
  </div>

  <div class="nv-card-head">
    <span class="nv-card-title">{lang admin.nav_group}</span>
  </div>
  <div class="nv-card-body">
    <p class="nv-field-hint nv-mb0">{lang admin.nav_bind_desc}</p>
    <div class="nv-form-grid nv-mt16">
      <div class="nv-form-row nv-mb0">
        <label class="nv-label" for="nav_group_id">{lang admin.nav_group}</label>
        <select class="nv-input" id="nav_group_id" name="nav_group_id">
          <option value="0" {if empty($node.nav_group_id)}selected{/if}>{lang admin.nav_default_group_or_none}</option>
          {loop $nav_groups as $ng}
          <option value="{$ng.id}" {if $node.nav_group_id == $ng.id}selected{/if}>{$ng.name}</option>
          {/loop}
        </select>
      </div>
    </div>
  </div>

  <div class="nv-card-head">
    <span class="nv-card-title">{lang admin.node_images}</span>
  </div>

  <div class="nv-card-body">
    <p class="nv-field-hint nv-mb0">{lang admin.node_images_hint}</p>
    <div class="nv-form-grid nv-mt16">
      <div class="nv-form-row nv-mb0">
        <label class="nv-label">{lang admin.thumb}</label>
        {$field_thumb|raw}
        <p class="nv-field-hint">{lang admin.thumb_hint}</p>
      </div>
      <div class="nv-form-row nv-mb0">
        <label class="nv-label">{lang admin.banner}</label>
        {$field_banner|raw}
        <p class="nv-field-hint">{lang admin.banner_hint}</p>
      </div>
    </div>
    <p class="nv-field-hint nv-mb0">{lang admin.node_image_template_hint} <code>node.thumb</code> / <code>node.banner</code> {lang admin.node_image_example}
      <code>&lt;img src="&#123;$node.thumb&#125;"&gt;</code>. {lang admin.node_image_path_hint}</p>
  </div>

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

<script>
(function () {
  var type = document.getElementById('nodeType');
  var row  = document.getElementById('nodeUrlRow');
  if (!type || !row) { return; }
  function sync() {
    // 只有外链栏目才需要填地址；普通栏目留着这个输入框只会让人误以为要填
    row.style.display = (type.value === 'link') ? '' : 'none';
  }
  type.addEventListener('change', sync);
  sync();
})();

// 栏目名 → URL 别名（拼音）自动填充：slug 留空时，输入栏目名即预填拼音
(function () {
  var nameEl = document.getElementById('name');
  var slugEl = document.getElementById('slug');
  if (!nameEl || !slugEl) { return; }

  var timer = null;
  var lastFilled = ''; // 上次自动填充的值，避免覆盖用户手动修改

  function fill() {
    var name = nameEl.value.trim();
    // slug 已手动填过（且不是我们填的）就不动
    if (slugEl.value.trim() !== '' && slugEl.value.trim() !== lastFilled) {
      return;
    }
    if (name === '') {
      slugEl.value = '';
      lastFilled = '';
      return;
    }
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '{$entry_prefix}/admin/node/suggest-slug?name=' + encodeURIComponent(name), true);
    xhr.responseType = 'json';
    xhr.onload = function () {
      if (xhr.status === 200 && xhr.response && typeof xhr.response.slug === 'string') {
        slugEl.value = xhr.response.slug;
        lastFilled = xhr.response.slug;
      }
    };
    xhr.send();
  }

  nameEl.addEventListener('input', function () {
    if (timer) { clearTimeout(timer); }
    timer = setTimeout(fill, 300);
  });
})();
</script>