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

<div class="cm-container cm-cat-page">

  {* ───────── Хлебные крошки ───────── *}
  <nav class="cm-breadcrumbs" aria-label="Хлібні крихти">
    <a href="/">{icon name="dashboard" size="14"}</a>
    <span class="cm-breadcrumbs__sep">›</span>
    <a href="/shop">Магазин</a>
    [if {current_category}]
      <span class="cm-breadcrumbs__sep">›</span>
      <span class="cm-breadcrumbs__current">{current_category.title}</span>
    [/if]
  </nav>

  {* ───────── Заголовок и подкатегории-чипы ───────── *}
  <header class="cm-cat-head">
    <h1 class="cm-cat-head__title">
      [if {seo_h1}]{seo_h1}[else][if {current_category}]{current_category.title}[else][if {search}]Пошук: «{search}»[else]Усі товари[/if][/if][/if]
    </h1>
    <div class="cm-cat-head__count">{total} товар(ів)</div>
  </header>

  [if {seo_intro}]
    <div class="cm-cat-intro">{seo_intro|raw}</div>
  [/if]

  [if {categories}]
    <div class="cm-cat-chips" data-cm-cat-chips>
      [if {current_category}]<a href="/shop" class="cm-cat-chip">Всі</a>[else]<a href="/shop" class="cm-cat-chip is-active">Всі</a>[/if]
      [foreach var="categories" as="c"]
        <a href="/shop/category/{c.slug}" class="cm-cat-chip [if {current_category.slug}={c.slug}]is-active[/if]">{c.title}</a>
      [/foreach]
    </div>
  [/if]

  {* ───────── Toolbar — сортировка + переключатель режима ───────── *}
  <div class="cm-cat-toolbar">
    <form class="cm-sort" method="get" action="[if {current_category}]/shop/category/{current_category.slug}[else]/shop[/if]" data-cm-filter-form>
      [if {search}]<input type="hidden" name="q" value="{search}">[/if]
      [if {price_min}]<input type="hidden" name="price_min" value="{price_min}">[/if]
      [if {price_max}]<input type="hidden" name="price_max" value="{price_max}">[/if]

      <label class="cm-sort__group" aria-label="Сортування">
        <span class="cm-sort__icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M6 12h12M10 18h4"/></svg>
        </span>
        <select name="sort" class="cm-sort__select" data-cm-sort>
          <option value="newest"    [if {sort}="newest"]selected[/if]>За популярністю</option>
          <option value="cheap"     [if {sort}="cheap"]selected[/if]>Спочатку дешеві</option>
          <option value="expensive" [if {sort}="expensive"]selected[/if]>Спочатку дорогі</option>
          <option value="name"      [if {sort}="name"]selected[/if]>За назвою (А–Я)</option>
          <option value="stock"     [if {sort}="stock"]selected[/if]>В наявності</option>
        </select>
      </label>
    </form>

    <div class="cm-view-toggle" data-cm-view-toggle role="group" aria-label="Режим перегляду">
      <button type="button" class="cm-view-toggle__btn is-active" data-cm-view="grid" aria-label="Сітка">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
      </button>
      <button type="button" class="cm-view-toggle__btn" data-cm-view="list" aria-label="Список">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
      </button>
    </div>
  </div>

  {* ───────── Layout: sidebar + main ───────── *}
  <div class="cm-cat-layout">

    <aside class="cm-filters" data-cm-filters>
      <button type="button" class="cm-filters__mobile-toggle" data-cm-filters-toggle>
        {icon name="settings" size="16"} Фільтри
      </button>

      <form class="cm-filters__form" method="get" action="[if {current_category}]/shop/category/{current_category.slug}[else]/shop[/if]" data-cm-filter-form>
        [if {search}]<input type="hidden" name="q" value="{search}">[/if]
        [if {sort}]<input type="hidden" name="sort" value="{sort}">[/if]

        {* Фильтр по цене *}
        <details class="cm-filter-group" open>
          <summary class="cm-filter-group__head">
            <span>Ціна, ₴</span>
            {icon name="chevron_down" size="14"}
          </summary>
          <div class="cm-filter-group__body">
            <div class="cm-price-range">
              <label class="cm-price-range__field">
                <input type="number"
                  name="price_min"
                  data-cm-price-min
                  min="{price_range.min}"
                  max="{price_range.max}"
                  value="[if {price_min}]{price_min}[else]{price_range.min}[/if]"
                  inputmode="numeric">
              </label>
              <span class="cm-price-range__sep">—</span>
              <label class="cm-price-range__field">
                <input type="number"
                  name="price_max"
                  data-cm-price-max
                  min="{price_range.min}"
                  max="{price_range.max}"
                  value="[if {price_max}]{price_max}[else]{price_range.max}[/if]"
                  inputmode="numeric">
              </label>
            </div>
            <div class="cm-price-range__slider" data-cm-price-slider
              data-min="{price_range.min}" data-max="{price_range.max}">
              <div class="cm-price-range__track"></div>
              <div class="cm-price-range__fill" data-cm-price-fill></div>
              <button type="button" class="cm-price-range__handle cm-price-range__handle--from" data-cm-price-handle="from" aria-label="Мінімальна ціна"></button>
              <button type="button" class="cm-price-range__handle cm-price-range__handle--to"   data-cm-price-handle="to"   aria-label="Максимальна ціна"></button>
            </div>
            <div class="cm-price-range__hint">
              від <b>{price_range.min}</b> до <b>{price_range.max}</b> ₴
            </div>
          </div>
        </details>

        {* Динамические фильтры по атрибутам товара (is_filterable=true) *}
        [if {attr_filters}]
          [foreach var="attr_filters" as="f"]
            <details class="cm-filter-group" open>
              <summary class="cm-filter-group__head">
                <span>{f.label}</span>
                {icon name="chevron_down" size="14"}
              </summary>
              <div class="cm-filter-group__body">
                [if {f.type}="boolean"]
                  <label class="cm-filter-item">
                    <input type="checkbox"
                      name="attr[{f.slug}][]"
                      value="1"
                      data-cm-attr-input
                      [foreach var="f.values" as="v"][if {v.selected}="1"]checked[/if][/foreach]>
                    <span class="cm-filter-item__check"></span>
                    <span class="cm-filter-item__text">Так</span>
                    [foreach var="f.values" as="v"]
                      [if {v.value}="1"]<span class="cm-filter-item__count">{v.count}</span>[/if]
                    [/foreach]
                  </label>
                [else]
                  [if {f.values_count}>"6"]
                  <label class="cm-filter-search">
                    {icon name="search" size="14"}
                    <input type="search" placeholder="Пошук" data-cm-filter-search="{f.slug}">
                  </label>
                  [/if]
                  <div class="cm-filter-group__list" data-cm-filter-list="{f.slug}">
                    [foreach var="f.values" as="v"]
                      <label class="cm-filter-item">
                        <input type="checkbox"
                          name="attr[{f.slug}][]"
                          value="{v.value}"
                          data-cm-attr-input
                          [if {v.selected}="1"]checked[/if]>
                        <span class="cm-filter-item__check"></span>
                        [if {f.type}="color"]
                          <span class="cm-filter-item__swatch" style="background:[if {v.color}]{v.color}[else]{v.value}[/if]" aria-hidden="true"></span>
                        [/if]
                        [if {v.image}]
                          <img class="cm-filter-item__thumb" src="{v.image}" alt="" loading="lazy">
                        [/if]
                        <span class="cm-filter-item__text">{v.value}</span>
                        <span class="cm-filter-item__count">{v.count}</span>
                      </label>
                    [/foreach]
                  </div>
                [/if]
              </div>
            </details>
          [/foreach]
        [/if]

        <div class="cm-filters__actions">
          <button type="submit" class="cm-btn cm-btn--primary cm-btn--block">Застосувати</button>
          <a href="[if {current_category}]/shop/category/{current_category.slug}[else]/shop[/if]" class="cm-filters__reset">Скинути все</a>
        </div>
      </form>
    </aside>

    <section class="cm-cat-main">

      [if {active_attr}]
        <div class="cm-active-filters" aria-label="Активні фільтри">
          [foreach var="active_attr" as="af"]
            <span class="cm-active-filter">
              <span class="cm-active-filter__label">{af.label}:</span>
              <span class="cm-active-filter__value">[if {af.type}=boolean]Так[else]{af.value}[/if]</span>
              <button type="button" class="cm-active-filter__x" data-cm-remove-filter="{af.slug}|{af.value}" aria-label="Прибрати">
                {icon name="close" size="12"}
              </button>
            </span>
          [/foreach]
        </div>
      [/if]

      [if {products}]
        <div class="cm-grid cm-grid--catalog" data-cm-cat-grid>
          [foreach var="products" as="p"]
            {include file="_partials/product_card_inner.tpl"}
          [/foreach]
        </div>

        [if {pagination.total_pages}>"1"]
          <nav class="cm-pagination" aria-label="Сторінки">
            [if {pagination.has_prev}]
              <a class="cm-pagination__nav" href="{pagination.prev_url}">{icon name="chevron_left" size="16"} Назад</a>
            [else]
              <span class="cm-pagination__nav is-disabled">{icon name="chevron_left" size="16"} Назад</span>
            [/if]
            <span class="cm-pagination__info">
              Сторінка <b>{pagination.current}</b> з <b>{pagination.total_pages}</b>
            </span>
            [if {pagination.has_next}]
              <a class="cm-pagination__nav" href="{pagination.next_url}">Вперед {icon name="chevron_right" size="16"}</a>
            [else]
              <span class="cm-pagination__nav is-disabled">Вперед {icon name="chevron_right" size="16"}</span>
            [/if]
          </nav>
        [/if]
      [else]
        <div class="cm-empty">
          <div class="cm-empty__ico" aria-hidden="true">
            <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
          </div>
          <h3>Нічого не знайдено</h3>
          <p>Спробуйте змінити фільтри або скинути їх.</p>
          <a href="[if {current_category}]/shop/category/{current_category.slug}[else]/shop[/if]" class="cm-btn cm-btn--ghost">Скинути фільтри</a>
        </div>
      [/if]

    </section>
  </div>
</div>

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