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

<div class="bz-container">
  <div class="bz-page-head">
    <div class="bz-breadcrumbs">
      <a href="/">Главная</a> · <a href="/shop">Магазин</a>
      [if {current_category}] · <span>{current_category.title}</span>[/if]
    </div>
    <h1>[if {seo_h1}]{seo_h1}[else][if {current_category}]{current_category.title}[else]Магазин[/if][/if]</h1>
    [if {seo_intro}]<div class="bz-cat-intro">{seo_intro|raw}</div>[/if]
    <form method="get" action="[if {current_category}]/shop/category/{current_category.slug}[else]/shop[/if]" class="bz-search-form" style="margin-top:16px">
      <input type="search" name="q" value="{search}" placeholder="Поиск товаров…">
      <button type="submit">{icon name="search" size="16"} Найти</button>
    </form>
  </div>

  <div class="bz-shop-layout">
    <aside class="bz-shop-side">
      [if {categories}]
        <div>
          <h4>Категории</h4>
          <ul class="bz-shop-cats">
            <li><a href="/shop" [if {current_category}][else]class="is-active"[/if]>Все товары</a></li>
            [foreach var="categories" as="c"]
              <li><a href="/shop/category/{c.slug}" [if {current_category.slug}="{c.slug}"]class="is-active"[/if]>{c.title}</a></li>
            [/foreach]
          </ul>
        </div>
      [/if]
    </aside>

    <main>
      [if {products}]
        <div class="bz-products-grid">
          [foreach var="products" as="p"]
            <article class="bz-product-card">
              <a href="{p.url}" class="bz-product-cover">
                [if {p.cover}]<img src="{p.cover|medium}" alt="{p.title}" loading="lazy">[else]<div class="no-cover">{icon name="image" size="32"}</div>[/if]
              </a>
              <div class="bz-product-body">
                <h3 class="bz-product-title"><a href="{p.url}">{p.title}</a></h3>
                <div class="bz-product-price">
                  {price amount="{p.price}"}
                  [if {p.old_price_fmt}]<span class="old">{price amount="{p.old_price}"}</span>[/if]
                </div>
                <button type="button" class="bz-btn-primary"
                  data-add-to-cart="1"
                  data-pid="{p.id}"
                  data-ptitle="{p.title}"
                  data-pprice="{p.price}"
                  data-pcover="{p.cover}">{icon name="cart" size="14"} В корзину</button>
              </div>
            </article>
          [/foreach]
        </div>
        {include file="_partials/pagination.tpl"}
      [else]
        <div class="bz-empty-state">
          <div class="bz-empty-icon">{icon name="box" size="32"}</div>
          <h3>Товаров не найдено</h3>
          <p>Попробуйте изменить фильтр или поисковый запрос.</p>
        </div>
      [/if]
    </main>
  </div>
</div>

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