<script id="productSearch" type="text/x-dot-template">
   {$redirectUrl = {path('kupshop_content_redirect_redirect_1')}}
   {literal}
      {{? it.items.Produkty || it.items.Kategorie || it.items.Vyrobci  }}

   <div class="d-flex">
      {{? it.items.Kategorie || it.items.Vyrobci }}
      <div class="autocomplete-side">
         {{? it.items.Kategorie }}
         <div class="autocomplete-categories">
            <p class="title-default">{/literal}{t}Kategorie{/t}{literal}</p>
            <ul>
               {{~it.items.Kategorie.items :item :index}}
               <li data-autocomplete-item="section">
                  <a href="{/literal}{$redirectUrl}{literal}?type=category&id={{=item.id}}">{{=item.label}}</a>
               </li>
               {{~}}
            </ul>
         </div>
         {{?}}

         {{? it.items.Vyrobci }}
         <div class="autocomplete-categories">
            <p class="title-default">{/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>
         {{?}}
      </div>
      {{?}}

      {{? it.items.Produkty }}
      <div class="autocomplete-products">

         <p class="title-default">{/literal}{t}Produkty{/t}{literal}</p>

         <ul>
            {{~it.items.Produkty.items :item :index}}
            <li data-autocomplete-item="product">
               <a href="{/literal}{$redirectUrl}{literal}?type=product&id={{=item.id}}">
                  <span class="img-overlay">
                     {{? item.image }}
                     <img src="{{=item.image}}" alt="{{=item.label}}">
                     {{??}}
                     <img src="/static/images/no-img.jpg" alt="{{=item.label}}">
                     {{?}}
                  </span>
                  <span class="content">
                     <span class="title">{{=item.model_short_title}}</span>
                     {{=item.label.replace(item.model_short_title, '')}}
                     <strong class="price">{{=item.price}}</strong>
                  </span>
               </a>
            </li>
            {{~}}
         </ul>
      </div>
      {{?}}
   </div>
   <div data-autocomplete-item="show-all">
      <a href="" class="btn btn-block btn-muted">{/literal}{t}Zobrazit všechny produkty{/t}{literal}</a>
   </div>
      {{??}}
   <div class="autocomplete-noresult">
      <p>{/literal}{t}Žádný výsledek{/t}{literal}</p>
   </div>
      {{?}}
   {/literal}
</script>

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

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