{include file="_partials/head.tpl"}

<div class="page-head">
  <div>
    <h1>{menu.title} <span class="muted" style="font-weight:400">· пунктов: {items_count}</span></h1>
    <p class="muted"><a href="/admin/menus">← К списку меню</a> · slug: <code>{menu.slug}</code></p>
  </div>
</div>

<div class="card menu-snippet">
  <div class="menu-snippet-text">
    <b>Чтобы это меню появилось на сайте</b>, вставьте тег в шаблон темы:
    <pre><code data-menu-snippet>&#123;menu name="{menu.slug}"&#125;</code></pre>
    <small class="muted">В дефолтной теме Celena меню со slug-ами <code>header</code> и <code>footer</code> подключаются автоматически.</small>
  </div>
  <button type="button" class="btn btn-secondary btn-sm" data-menu-copy>Копировать</button>
</div>

<script>
(function () {
  var btn = document.querySelector('[data-menu-copy]');
  var code = document.querySelector('[data-menu-snippet]');
  if (!btn || !code) return;
  btn.addEventListener('click', function () {
    var text = code.textContent || '';
    if (navigator.clipboard) navigator.clipboard.writeText(text);
    var prev = btn.textContent;
    btn.textContent = 'Скопировано';
    setTimeout(function () { btn.textContent = prev; }, 1200);
  });
})();
</script>

[if {items}]
<div class="prod-table-wrap">
<table class="table prod-table">
  <thead>
    <tr>
      <th>Название</th>
      <th>Тип</th>
      <th>URL</th>
      <th>Сорт.</th>
      <th>Активен</th>
      <th class="actions"></th>
    </tr>
  </thead>
  <tbody>
    [foreach var="items" as="i"]
      <tr>
        <td>[if {i.parent_id}]<span class="muted">— </span>[/if]{i.title}</td>
        <td><span class="prod-chip-cat">{i.kind}</span></td>
        <td><code class="prod-slug">{i.url}</code></td>
        <td>{i.sort_order}</td>
        <td>[if {i.is_active}]<span class="badge badge-published">да</span>[else]<span class="badge badge-draft">нет</span>[/if]</td>
        <td class="actions prod-row-actions">
          <form method="post" action="/admin/menus/items/{i.id}/delete" style="display:inline" data-confirm="Удалить пункт?" data-confirm-danger="1">
            {csrf}<button type="submit" class="row-icon-btn row-icon-danger" title="Удалить">{icon name="close" size="14"}</button>
          </form>
        </td>
      </tr>
    [/foreach]
  </tbody>
</table>
</div>
[else]
<div class="empty-state">
  <div class="icon">{icon name="list" size="42"}</div>
  <p>Пунктов в этом меню пока нет.</p>
</div>
[/if]

<form method="post" action="/admin/menus/{menu.id}/items/create" class="card" style="margin-top:24px">
  {csrf}
  <h3>Новый пункт</h3>

  <div class="form-row">
    <div class="form-group">
      <label>Название *</label>
      <input type="text" name="title" required placeholder="О компании">
    </div>
    <div class="form-group">
      <label>URL *</label>
      <input type="text" name="url" placeholder="/p/about" required>
    </div>
    <div class="form-group">
      <label>Тип</label>
      <select name="kind">
        <option value="external">Внешняя ссылка / любой URL</option>
        <option value="page">Страница</option>
        <option value="news">Новость</option>
        <option value="category">Категория</option>
        <option value="divider">Разделитель</option>
      </select>
    </div>
  </div>

  <div class="form-row">
    <div class="form-group">
      <label>Родительский пункт</label>
      <select name="parent_id">
        <option value="">— верхний уровень —</option>
        [foreach var="parents" as="p"]
          <option value="{p.id}">{p.title}</option>
        [/foreach]
      </select>
    </div>
    <div class="form-group">
      <label>Открывать в</label>
      <select name="target">
        <option value="_self">Текущей вкладке</option>
        <option value="_blank">Новой вкладке</option>
      </select>
    </div>
    <div class="form-group">
      <label>Иконка (имя)</label>
      <input type="text" name="icon" placeholder="cart">
    </div>
    <div class="form-group">
      <label>Сорт.</label>
      <input type="number" name="sort_order" value="0">
    </div>
  </div>

  <div class="form-group">
    <label class="checkbox">
      <input type="checkbox" name="is_active" value="1" checked>
      Активен
    </label>
  </div>

  <div class="form-actions">
    <button type="submit" class="btn btn-primary">+ Добавить пункт</button>
  </div>
</form>

{include file="_partials/foot.tpl"}
