<script id="productSearch" type="text/x-dot-template">
   {$redirectUrl = {path('kupshop_content_redirect_redirect_1')}}
   <div class="container autocomplete-inner">
      {literal}
      {{? it.items.Produkty || it.items.Kategorie || it.items.Clanky || it.items.Stranky }}

      <div class="autocomplete-wrapper">
         {{? it.items.Kategorie }}
         <div class="autocomplete-categories">
            {/literal}
            <p class="h4">{t}Kategorie{/t}</p>
            {literal}
            <ul>
               {{~it.items.Kategorie.items :item :index}}
               <li data-autocomplete-item="section">
                  <a href="{/literal}{$redirectUrl}{literal}?type=category&id={{=item.id}}">{{=item.name}}</a>
               </li>
               {{~}}
            </ul>
         </div>
         {{?}}

         {{? it.items.Produkty }}
         <div class="autocomplete-products">
            {/literal}
            <p class="h4">{t}Produkty{/t}</p>
            {literal}
            <ul>
               {{~it.items.Produkty.items :item :index}}
               {{? index < 4 }}
               <li class="autocomplete-product-item" data-autocomplete-item="product">
                  <a href="{/literal}{$redirectUrl}{literal}?type=product&id={{=item.id}}">
                     <div class="img">
                        {{? item.image }}
                        <img src="{{=item.image}}" alt="{{=item.label}}" class="img-fluid">
                        {{??}}
                        <img src="/common/static/images/no-img.png" alt="{{=item.label}}" class="img-fluid">
                        {{?}}
                     </div>
                     <div class="text">
                        <span class="title">{{=item.label}}</span>
                        {{? item.price }}
                        <span class="price">{{=item.price}}</span>
                        {{?}}
                        <span class="delivery delivery-{{=item.deliveryTime}}">{{=item.deliveryTimeText}}</span>
                     </div>
                  </a>
               </li>
               {{?}}
               {{~}}
            </ul>
         </div>
         {{?}}

         {/literal}
         <div class="ac-showall d-showall" data-autocomplete-item="show-all">
            <a href="" class="btn btn-primary btn-block">{t}Zobrazit všechny výsledky{/t}</a>
         </div>
         {literal}
      </div>

      <div class="autocomplete-side">
         {{? it.items.Vyrobci }}
         <div class="autocomplete-pages">
            <p class="h4">{/literal}{t}Značky{/t}{literal}</p>
            <ul>
               {{~it.items.Vyrobci.items :item :index}}
               <li data-autocomplete-item="section">
                  <a href="{/literal}{$redirectUrl}{literal}?type=producer&id={{=item.id}}">{{=item.label}}</a>
               </li>
               {{~}}
            </ul>
         </div>
         {{?}}
         {{? it.items.Clanky }}
         <div class="autocomplete-articles">
            <p class="h4">{/literal}{t}Blog{/t}{literal}</p>
            <ul>
               {{~it.items.Clanky.items :item :index}}
               {{? index < 2 }}
               <li data-autocomplete-item="section">
                  <a href="{/literal}{$redirectUrl}{literal}?type=article&id={{=item.id}}">{{=item.label}}</a>
               </li>
               {{?}}
               {{~}}
            </ul>
         </div>
         {{?}}
         {{? it.items.Stranky }}
         <div class="autocomplete-pages">
            <p class="h4">{/literal}{t}Stránky{/t}{literal}</p>
            <ul>
               {{~it.items.Stranky.items :item :index}}
               <li data-autocomplete-item="section">
                  <a href="{/literal}{$redirectUrl}{literal}?type=page&id={{=item.id}}">
                     {{=item.label}}
                  </a>
               </li>
               {{~}}
            </ul>
         </div>
         {{?}}
         {/literal}
         <div class="ac-showall resp-showall" data-autocomplete-item="show-all">
            <a href="" class="btn btn-primary btn-block">{t}Zobrazit všechny výsledky{/t}</a>
         </div>
         {literal}
      </div>

      {/literal}{* todo stránky *}{literal}

      {{??}}
      <div class="autocomplete-noresult">
         <p>
            {/literal}
            {t}Žádný výsledek{/t}
            {literal}
         </p>
      </div>
      {{?}}
      {/literal}
   </div>
</script>

{$preloadActive = !empty($dbcfg.fulltext.preload.products) || !empty($dbcfg.fulltext.preload.sections) || !empty($dbcfg.fulltext.preload.producers)}

<script>
   {block "productsearch-script"}
   wpj.onReady.push(function () {
      $('[data-search-input]').productSearch({if $preloadActive}{
         preload: "{path('kupshop_catalog_search_searchpreload')}"
      }{/if});
   });
   {/block}
</script>
