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

<main class="main">
  <h1 class="page-title">[if {current_category}]{current_category.title}[else]Магазин[/if]</h1>

  <form method="get" action="/shop" class="shop-search">
    <input type="search" name="q" value="{search}" placeholder="Поиск товаров…">
    [if {current_category}]<input type="hidden" name="category" value="{current_category.slug}">[/if]
    <button type="submit" class="btn-primary">Найти</button>
  </form>

  [if {categories}]
    <nav class="shop-cats">
      <a href="/shop" [if {current_category}][else]class="active"[/if]>Все</a>
      [foreach var="categories" as="c"]
        <a href="/shop/category/{c.slug}">{c.title}</a>
      [/foreach]
    </nav>
  [/if]

  [if {products}]
    <div class="products-grid">
      [foreach var="products" as="p"]
        <article class="product-card">
          <a href="{p.url}" class="product-cover">
            [if {p.cover}]<img src="{p.cover|medium}" alt="{p.title}" loading="lazy">[else]<div class="no-cover">—</div>[/if]
          </a>
          <h3><a href="{p.url}">{p.title}</a></h3>
          <div class="product-price">{price amount="{p.price}"}</div>
          <button type="button" class="btn-primary"
            data-add-to-cart="1"
            data-pid="{p.id}"
            data-ptitle="{p.title}"
            data-pprice="{p.price}"
            data-pcover="{p.cover}">В корзину</button>
        </article>
      [/foreach]
    </div>
    {include file="_partials/pagination.tpl"}
  [else]
    <div class="card"><p class="muted">Товаров не найдено.</p></div>
  [/if]
</main>

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