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

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

  <nav class="cm-breadcrumbs" aria-label="Хлібні крихти">
    <a href="/">{icon name="dashboard" size="14"}</a>
    <span class="cm-breadcrumbs__sep">›</span>
    <span class="cm-breadcrumbs__current">Пошук</span>
  </nav>

  <header class="cm-search-head">
    <h1 class="cm-search-head__title">
      [if {query}]Результати за запитом «{query}»[else]Пошук по сайту[/if]
    </h1>
    [if {query}]<div class="cm-search-head__count">Знайдено: <b>{total}</b></div>[/if]
  </header>

  <form method="get" action="/search" role="search" class="cm-search cm-search--page">
    <input class="cm-search-input" type="search" name="q" value="{query}" placeholder="Що шукаємо?" autofocus autocomplete="off">
    <button type="submit" class="cm-search-submit" aria-label="Знайти">
      {icon name="search" size="18"}
    </button>
  </form>

  [if {query}]
    [if {results}]
      <div class="cm-search-results">
        [foreach var="results" as="r"]
          <article class="cm-search-result cm-search-result--{r.kind}">
            <a href="{r.url}" class="cm-search-result__link" aria-label="{r.title}"></a>
            <div class="cm-search-result__img">
              [if {r.cover}]
                <img src="{r.cover|medium}" alt="{r.title}" loading="lazy">
              [else]
                <span class="cm-search-result__img-placeholder" aria-hidden="true">
                  [if {r.kind}="product"]{icon name="cart" size="32"}[/if][if {r.kind}="news"]{icon name="news" size="32"}[/if][if {r.kind}="page"]{icon name="pages" size="32"}[/if]
                </span>
              [/if]
            </div>
            <div class="cm-search-result__body">
              <div class="cm-search-result__top">
                <span class="cm-search-result__kind">{r.kind_label}</span>
                [if {r.date}]<span class="cm-search-result__date">{r.date}</span>[/if]
              </div>
              <h3 class="cm-search-result__title">{r.title}</h3>
              [if {r.snippet}]<p class="cm-search-result__snippet">{r.snippet}</p>[/if]
              [if {r.price_fmt}]
                <div class="cm-search-result__buy">
                  <div class="cm-product-prices">
                    [if {r.old_price_fmt}]<span class="cm-price-old">{r.old_price_fmt} ₴</span>[/if]
                    <span class="cm-price-now">{r.price_fmt} ₴</span>
                  </div>
                  <button type="button" class="cm-btn cm-btn--primary cm-search-result__cart"
                    data-add-to-cart="1"
                    data-pid="{r.id}"
                    data-ptitle="{r.title}"
                    data-pprice="{r.price}"
                    data-pcover="{r.cover}"
                    data-psku="{r.sku}">
                    {icon name="cart" size="16"} В кошик
                  </button>
                </div>
              [/if]
            </div>
          </article>
        [/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>За запитом «{query}» нічого не знайшли.<br>Спробуйте інше слово або перевірте написання.</p>
      </div>
    [/if]
  [else]
    <div class="cm-search-tips">
      <p>Введіть назву товару, артикул, новину або слово зі статті — мінімум 2 символи.</p>
    </div>
  [/if]
</div>

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