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

<div class="page-head">
  <div>
    <h1>Меню сайта <span class="muted" style="font-weight:400">· {total}</span></h1>
    <p class="muted">Именованные коллекции ссылок навигации. Чтобы меню появилось на сайте, тема должна вывести его тегом <code>&#123;menu name="slug"&#125;</code>.</p>
  </div>
  <div class="actions">
    <a class="btn btn-primary" href="/admin/menus/create">+ Новое меню</a>
  </div>
</div>

<details class="card menu-help docs-spoiler">
  <summary>Как меню попадает на сайт</summary>
  <div class="docs-body">
    <ol class="menu-help-steps">
      <li><b>Создаёте меню</b> с любым slug-ом. Slug — это «имя» меню в коде, например <code>header</code>, <code>footer</code>, <code>mobile</code>, <code>sidebar</code>.</li>
      <li><b>Добавляете в него пункты</b> — на страницу, новость, категорию или произвольный URL. Поддерживается два уровня (родитель → подпункт).</li>
      <li><b>В шаблоне темы</b> вставляете тег по имени меню:
        <pre><code>&#123;menu name="header"&#125;</code></pre>
        Этот тег вернёт готовый <code>&lt;ul class="menu menu-header"&gt;...&lt;/ul&gt;</code>. Активный пункт получит класс <code>.is-active</code> по совпадению URL.
      </li>
    </ol>
    <details class="menu-help-more">
      <summary>Параметры тега</summary>
      <ul>
        <li><code>name</code> — slug меню (обязательно).</li>
        <li><code>class</code> — CSS-класс корневого <code>&lt;ul&gt;</code> (по умолчанию <code>menu menu-&#123;slug&#125;</code>).</li>
        <li><code>id</code> — id корневого <code>&lt;ul&gt;</code>.</li>
        <li><code>sub_class</code> — класс вложенного списка (по умолчанию <code>menu-sub</code>).</li>
        <li><code>active</code> — URL текущей страницы (по умолчанию определяется автоматически).</li>
        <li><code>empty</code> — что вывести, если меню пустое или не найдено (по умолчанию ничего).</li>
      </ul>
      <p>В дефолтной теме Celena уже подключены <code>header</code> и <code>footer</code> — создайте меню с такими slug-ами, и пункты сразу появятся в шапке/подвале сайта.</p>
    </details>
  </div>
</details>

[if {menus}]
<div class="prod-table-wrap">
<table class="table prod-table">
  <thead>
    <tr>
      <th>Название</th>
      <th>Slug</th>
      <th>Пунктов</th>
      <th class="actions"></th>
    </tr>
  </thead>
  <tbody>
    [foreach var="menus" as="m"]
      <tr>
        <td><a href="/admin/menus/{m.id}/edit" class="prod-title">{m.title}</a></td>
        <td><code class="prod-slug">{m.slug}</code></td>
        <td>{m.items_count}</td>
        <td class="actions prod-row-actions">
          <a href="/admin/menus/{m.id}/edit" class="btn btn-ghost btn-sm">Пункты</a>
          <form method="post" action="/admin/menus/{m.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>
  <a href="/admin/menus/create" class="btn btn-primary">+ Создать первое</a>
</div>
[/if]

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