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

<div class="page-head">
  <div>
    <h1>{lang key="shop.products_list.title"} <span class="muted" style="font-weight:400">· {lang key="shop.common.found"}: {total}</span></h1>
  </div>
  <div class="actions">
    <a class="btn btn-secondary" href="/admin/shop/products/export">{icon name="download" size="14"} {lang key="shop.products_list.export"}</a>
    <a class="btn btn-secondary" href="/admin/shop/products/import">{icon name="upload" size="14"} {lang key="shop.products_list.import"}</a>
    <a class="btn btn-primary" href="/admin/shop/products/create">+ {lang key="shop.products_list.new_product"}</a>
  </div>
</div>

<form method="get" action="/admin/shop/products" class="prod-filters" data-prod-filters>
  <div class="prod-tabs">
    <a href="/admin/shop/products?tab=all" class="prod-tab [if {tab}="all"]is-active[/if]">{lang key="shop.products_list.tab.all"} <span class="prod-tab-count">{tab_counts.all}</span></a>
    <a href="/admin/shop/products?tab=active" class="prod-tab [if {tab}="active"]is-active[/if]">{lang key="shop.products_list.tab.active"} <span class="prod-tab-count">{tab_counts.active}</span></a>
    <a href="/admin/shop/products?tab=draft" class="prod-tab [if {tab}="draft"]is-active[/if]">{lang key="shop.products_list.tab.draft"} <span class="prod-tab-count">{tab_counts.draft}</span></a>
    <a href="/admin/shop/products?tab=archived" class="prod-tab [if {tab}="archived"]is-active[/if]">{lang key="shop.products_list.tab.archived"} <span class="prod-tab-count">{tab_counts.archived}</span></a>
  </div>
  <input type="hidden" name="tab" value="{tab}">

  <div class="prod-filter-row">
    <div class="prod-search">
      {icon name="search" size="16"}
      <input type="search" name="q" value="{filters.q}" placeholder="{lang key="shop.products_list.search_placeholder"}" autocomplete="off">
    </div>
    <select name="category" class="prod-select">
      <option value="">{lang key="shop.products_list.all_categories"}</option>
      [foreach var="categories" as="c"]
        <option value="{c.id}" [if {filters.category}={c.id}]selected[/if]>{c.title}</option>
      [/foreach]
    </select>
    <select name="manufacturer" class="prod-select">
      <option value="">{lang key="shop.products_list.all_brands"}</option>
      [foreach var="manufacturers" as="m"]
        <option value="{m.id}" [if {filters.manufacturer}={m.id}]selected[/if]>{m.title}</option>
      [/foreach]
    </select>
    <select name="sort" class="prod-select">
      <option value="updated_desc" [if {filters.sort}="updated_desc"]selected[/if]>{lang key="shop.products_list.sort.updated_desc"}</option>
      <option value="updated_asc"  [if {filters.sort}="updated_asc"]selected[/if]>{lang key="shop.products_list.sort.updated_asc"}</option>
      <option value="price_desc"   [if {filters.sort}="price_desc"]selected[/if]>{lang key="shop.products_list.sort.price_desc"}</option>
      <option value="price_asc"    [if {filters.sort}="price_asc"]selected[/if]>{lang key="shop.products_list.sort.price_asc"}</option>
      <option value="title_asc"    [if {filters.sort}="title_asc"]selected[/if]>{lang key="shop.products_list.sort.title_asc"}</option>
      <option value="stock_asc"    [if {filters.sort}="stock_asc"]selected[/if]>{lang key="shop.products_list.sort.stock_asc"}</option>
      <option value="stock_desc"   [if {filters.sort}="stock_desc"]selected[/if]>{lang key="shop.products_list.sort.stock_desc"}</option>
      <option value="rating_desc"  [if {filters.sort}="rating_desc"]selected[/if]>{lang key="shop.products_list.sort.rating_desc"}</option>
    </select>
    <select name="per_page" class="prod-select prod-select-sm">
      <option value="10"  [if {filters.per_page}="10"]selected[/if]>10{lang key="shop.products_list.per_page_suffix"}</option>
      <option value="25"  [if {filters.per_page}="25"]selected[/if]>25{lang key="shop.products_list.per_page_suffix"}</option>
      <option value="50"  [if {filters.per_page}="50"]selected[/if]>50{lang key="shop.products_list.per_page_suffix"}</option>
      <option value="100" [if {filters.per_page}="100"]selected[/if]>100{lang key="shop.products_list.per_page_suffix"}</option>
    </select>
    <button type="submit" class="btn btn-primary">{lang key="shop.common.apply"}</button>
  </div>

  <div class="prod-filter-extra-toggle">
    <button type="button" class="btn btn-ghost" data-extra-toggle aria-expanded="[if {has_active_extra_filters}]true[else]false[/if]">
      {icon name="filter" size="14"} {lang key="shop.products_list.more_filters"}
      {icon name="chevron_down" size="12"}
    </button>
  </div>

  <div class="prod-filter-extra" data-extra [if {has_active_extra_filters}]data-open[/if]>
    <div class="prod-extra-grid">
      <label class="prod-extra-field">
        <span>{lang key="shop.products_list.stock_label"}</span>
        <select name="stock" class="prod-select">
          <option value="any" [if {filters.stock}="any"]selected[/if]>{lang key="shop.products_list.stock_any"}</option>
          <option value="in"  [if {filters.stock}="in"]selected[/if]>{lang key="shop.products_list.stock_in"}</option>
          <option value="low" [if {filters.stock}="low"]selected[/if]>{lang key="shop.products_list.stock_low"}</option>
          <option value="out" [if {filters.stock}="out"]selected[/if]>{lang key="shop.products_list.stock_out"}</option>
        </select>
      </label>
      <label class="prod-extra-field">
        <span>{lang key="shop.products_list.price_from"}, {currency}</span>
        <input type="number" min="0" name="price_min" value="{filters.price_min}" placeholder="0">
      </label>
      <label class="prod-extra-field">
        <span>{lang key="shop.products_list.price_to"}, {currency}</span>
        <input type="number" min="0" name="price_max" value="{filters.price_max}" placeholder="∞">
      </label>
      <div class="prod-extra-checks">
        <label class="prod-extra-check">
          <input type="checkbox" name="featured" value="1" [if {filters.featured}]checked[/if]>
          {lang key="shop.products_list.featured_only"} {icon name="star" size="14"}
        </label>
        <label class="prod-extra-check">
          <input type="checkbox" name="no_image" value="1" [if {filters.no_image}]checked[/if]>
          {lang key="shop.products_list.no_image"}
        </label>
      </div>
    </div>
  </div>
</form>

[if {products}]
<div class="prod-table-wrap">
<table class="table prod-table">
  <thead>
    <tr>
      <th class="th-name">{lang key="shop.products_list.col.name_category"}</th>
      <th>{lang key="shop.products_list.col.sku"}</th>
      <th>{lang key="shop.products_list.col.brand"}</th>
      <th class="th-price">{lang key="shop.product.price"}</th>
      <th>{lang key="shop.product.stock"}</th>
      <th class="th-fav">{icon name="star" size="14"}</th>
      <th>{lang key="shop.product.col.rating"}</th>
      <th class="th-views">{lang key="shop.product.col.views"}</th>
      <th class="th-actions"></th>
    </tr>
  </thead>
  <tbody>
    [foreach var="products" as="p"]
      <tr>
        <td class="td-name">
          <div class="prod-cell-name">
            <div class="prod-thumb">
              [if {p.cover}]<img src="{p.cover|thumb}" alt="">[else]<span class="prod-thumb-empty">{icon name="image" size="18"}</span>[/if]
              [if {p.extra_images_count}]<span class="prod-thumb-extra">+{p.extra_images_count}</span>[/if]
            </div>
            <div class="prod-cell-meta">
              <a href="/admin/shop/products/{p.id}/edit" class="prod-title">{p.title}</a>
              [if {p.category_title}]<div class="prod-cell-sub"><span class="prod-chip-cat">{icon name="folder" size="11"} {p.category_title}</span></div>[/if]
            </div>
          </div>
        </td>
        <td>
          <span class="prod-badge prod-badge-id">#{p.id}</span>
          [if {p.sku}]<span class="prod-badge prod-badge-sku">{p.sku}</span>[/if]
          [if {p.barcode}]<div class="prod-barcode">{p.barcode}</div>[/if]
        </td>
        <td class="td-brand">[if {p.manufacturer_title}]{p.manufacturer_title}[else]<span class="muted">—</span>[/if]</td>
        <td class="td-price">
          <div class="prod-price-cell">
            [if {p.old_price}]<div class="prod-price-old">{price amount="{p.old_price}"}</div>[/if]
            <div class="prod-price-now">{price amount="{p.price}"}</div>
            [if {p.discount_pct}]<div class="prod-discount-badge">−{p.discount_pct}%</div>[/if]
          </div>
        </td>
        <td class="td-stock">{p.stock}</td>
        <td class="td-fav">
          <form method="post" action="/admin/shop/products/{p.id}/toggle-featured" style="display:inline">
            {csrf}
            <input type="hidden" name="back" value="">
            <button type="submit" class="prod-fav-btn [if {p.is_featured}]is-on[/if]" title="Featured">
              {icon name="star" size="16"}
            </button>
          </form>
        </td>
        <td class="td-rating">
          [if {p.rating_count}]
            <span class="prod-rating">{p.rating_avg} <span class="muted">({p.rating_count})</span></span>
          [else]
            <span class="muted">—</span>
          [/if]
        </td>
        <td class="td-views">
          <a href="/shop/product/{p.slug}" target="_blank" rel="noopener" class="prod-views" title="{lang key="shop.products_list.open_on_site"}">{p.views}</a>
        </td>
        <td class="td-actions">
          <form method="post" action="/admin/shop/products/{p.id}/delete" style="display:inline" data-confirm="{lang key="shop.products_list.delete_confirm"}" data-confirm-danger="1">
            {csrf}<button type="submit" class="row-icon-btn row-icon-danger" title="{lang key="shop.products_list.delete_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="cart" size="42"}</div>
  <p>{lang key="shop.products_list.no_results"}</p>
  [if {filters.q}]<a href="/admin/shop/products" class="btn btn-ghost">{lang key="shop.products_list.reset_filters"}</a>[/if]
</div>
[/if]

<script>
(function(){
  // Раскрытие панели «Ещё фильтры»
  var trg = document.querySelector('[data-extra-toggle]');
  var box = document.querySelector('[data-extra]');
  if (trg && box) {
    var setOpen = function(open){
      box.classList.toggle('is-open', open);
      trg.setAttribute('aria-expanded', open ? 'true' : 'false');
    };
    setOpen(box.hasAttribute('data-open'));
    trg.addEventListener('click', function(){ setOpen(!box.classList.contains('is-open')); });
  }
  // toggle-featured: вернуться на ту же страницу с фильтрами
  document.querySelectorAll('form[action*="/toggle-featured"]').forEach(function(f){
    var hid = f.querySelector('input[name="back"]');
    if (hid) hid.value = location.pathname + location.search;
  });
})();
</script>

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