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

<div class="page-head">
  <div>
    <h1>Баннеры <span class="muted" style="font-weight:400">· {total}</span></h1>
    <p class="muted">Слайды и промо-блоки для разных зон сайта.</p>
  </div>
  <div class="actions">
    <a class="btn btn-primary" href="/admin/banners/create">+ Новый баннер</a>
  </div>
</div>

<details class="card menu-help docs-spoiler">
  <summary>Куда ставится баннер и как его вывести</summary>
  <div class="docs-body">
  <ol class="menu-help-steps">
    <li><b>Размещение (placement)</b> — это «зона» сайта, в которой будет показан баннер. Доступны:
      <ul class="muted" style="margin:6px 0 0;padding-left:18px">
        <li><code>hero</code> — главный слайдер на первой странице (обычно 1–3 крупных баннера).</li>
        <li><code>sidebar</code> — узкая боковая колонка (списки, карточка товара).</li>
        <li><code>footer</code> — горизонтальная плашка над подвалом (рассылка, акции).</li>
        <li><code>popup</code> — всплывающее окно (триггер настраивает тема: после паузы, на выходе и т.&nbsp;п.).</li>
      </ul>
      <small class="muted">Можно использовать любую свою строку (<code>category-top</code>, <code>cart-empty</code>) — тема просто запросит баннеры по этой метке.</small>
    </li>
    <li><b>Период показа</b> (<code>starts_at</code> / <code>ends_at</code>) — баннер автоматически скрывается до даты начала и после окончания. Поля можно оставить пустыми — тогда показ бессрочный.</li>
    <li><b>В шаблоне темы</b> вставляете блок-тег с нужным placement-ом:
      <pre><code>&#91;banners placement="hero" limit="3"&#93;
  &#91;if &#123;has_url&#125;&#93;&lt;a href="&#123;url&#125;"&gt;&#91;/if&#93;
  &#91;if &#123;has_image&#125;&#93;&lt;img src="&#123;image&#125;" alt="&#123;title&#125;"&gt;&#91;/if&#93;
  &lt;h2&gt;&#123;title&#125;&lt;/h2&gt;
  &#91;if &#123;subtitle&#125;&#93;&lt;p&gt;&#123;subtitle&#125;&lt;/p&gt;&#91;/if&#93;
  &#91;if &#123;cta_label&#125;&#93;&lt;span class="btn"&gt;&#123;cta_label&#125;&lt;/span&gt;&#91;/if&#93;
  &#91;if &#123;has_url&#125;&#93;&lt;/a&gt;&#91;/if&#93;
&#91;/banners&#93;</code></pre>
      Тег сам отфильтрует только активные баннеры в окне дат и отсортирует по полю <code>sort_order</code>.
    </li>
  </ol>
  <details class="menu-help-more">
    <summary>Параметры тега и поля баннера</summary>
    <p><b>Параметры тега:</b></p>
    <ul>
      <li><code>placement</code> — обязательно (имя зоны).</li>
      <li><code>limit</code> — сколько вернуть (по умолчанию 10, максимум 50).</li>
      <li><code>sort</code> — <code>sort_order</code> / <code>id</code> / <code>created_at</code> (по умолчанию <code>sort_order</code>).</li>
      <li><code>order</code> — <code>asc</code> / <code>desc</code>.</li>
      <li><code>active</code> — <code>1</code> (по умолчанию), <code>0</code> или <code>all</code> (для предпросмотра).</li>
    </ul>
    <p><b>Поля внутри блока</b> (доступны как <code>&#123;поле&#125;</code>):</p>
    <ul>
      <li><code>title</code>, <code>subtitle</code>, <code>cta_label</code> — тексты.</li>
      <li><code>image</code>, <code>mobile_image</code> — URL картинок.</li>
      <li><code>url</code> — куда ведёт клик.</li>
      <li><code>has_image</code>, <code>has_url</code> — <code>'1'</code> или <code>''</code> для условий <code>&#91;if&#93;</code>.</li>
    </ul>
  </details>
  </div>
</details>

<form method="get" action="/admin/banners" class="prod-filters">
  <div class="prod-filter-row" style="grid-template-columns: 1fr auto">
    <select name="placement" class="prod-select" onchange="this.form.submit()">
      <option value="">Все размещения</option>
      <option value="hero"    [if {placement}="hero"]selected[/if]>Hero (главный слайдер)</option>
      <option value="sidebar" [if {placement}="sidebar"]selected[/if]>Боковая панель</option>
      <option value="footer"  [if {placement}="footer"]selected[/if]>Футер</option>
      <option value="popup"   [if {placement}="popup"]selected[/if]>Pop-up</option>
    </select>
    <button type="submit" class="btn btn-primary">Фильтр</button>
  </div>
</form>

[if {banners}]
<div class="prod-table-wrap">
<table class="table prod-table">
  <thead>
    <tr>
      <th>Картинка</th>
      <th>Заголовок</th>
      <th>Размещение</th>
      <th>Период</th>
      <th>Сорт.</th>
      <th>Активен</th>
      <th class="actions"></th>
    </tr>
  </thead>
  <tbody>
    [foreach var="banners" as="b"]
      <tr>
        <td><div class="prod-thumb" style="width:64px;height:36px">[if {b.image}]<img src="{b.image|thumb}" alt="">[else]{icon name="image" size="20"}[/if]</div></td>
        <td>
          <a href="/admin/banners/{b.id}/edit" class="prod-title">{b.title}</a>
          [if {b.url}]<div class="prod-cell-sub"><code class="prod-slug">{b.url}</code></div>[/if]
        </td>
        <td><span class="prod-chip-cat">{b.placement}</span></td>
        <td><small class="muted">[if {b.starts_at}]{b.starts_at}[else]∞[/if] → [if {b.ends_at}]{b.ends_at}[else]∞[/if]</small></td>
        <td>{b.sort_order}</td>
        <td>[if {b.is_active}]<span class="badge badge-published">да</span>[else]<span class="badge badge-draft">нет</span>[/if]</td>
        <td class="actions prod-row-actions">
          <a href="/admin/banners/{b.id}/edit" class="btn btn-ghost btn-sm">Ред.</a>
          <form method="post" action="/admin/banners/{b.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>
{include file="_partials/pagination.tpl"}
[else]
<div class="empty-state">
  <div class="icon">{icon name="flag" size="42"}</div>
  <p>Баннеров ещё нет.</p>
  <a href="/admin/banners/create" class="btn btn-primary">+ Добавить первый</a>
</div>
[/if]

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