{block "productsearch-template"}
   <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.Vyrobci || it.items.Clanky || it.items.Stranky }}

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

            {{? it.items.Produkty }}
            <div class="autocomplete-products">
               {/literal}
               <p class="title-default">{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>
                        <span class="title">{{=item.label}}</span>
                        {/literal}
                        {block "autocomplete-price"}
                            {if $isB2BUser}
                            {literal}
                               {{? item.price }}
                               <span class="price">{{=item.price_without_vat}}</span>
                               {{?}}
                            {/literal}
                            {else}
                            {literal}
                               {{? item.price }}
                               <span class="price">{{=item.price}}</span>
                               {{?}}
                            {/literal}
                            {/if}
                        {/block}
                        {literal}
                     </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.Clanky }}
            <div class="autocomplete-articles">
               <p class="title-default">{/literal}{t}Články{/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.photo }}
                        <img src="{{=item.photo}}" alt="{{=item.label}}" width="200" height="143" class="img-fluid">
                        {{?}}
                        {{=item.label}}
                     </a>
                  </li>
                  {{?}}
                  {{~}}
               </ul>
            </div>
            {{?}}
            {{? it.items.Stranky }}
            <div class="autocomplete-pages">
               <p class="title-default">{/literal}{t}Ostatní{/t}{literal}</p>
               <ul>
                  {{~it.items.Stranky.items :item :index}}
                  <li data-autocomplete-item="section">
                     <a href="{{=item.url}}">
                        {{=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>
{/block}

{block "productsearch-script-outer"}
   {$preloadActive = !empty($dbcfg.fulltext.preload.products) || !empty($dbcfg.fulltext.preload.sections) || !empty($dbcfg.fulltext.preload.producers)}
   <script>
      {block "productsearch-script"}
      {ifmodule LUIGIS_BOX}
      var lb = '{$dbcfg.analytics.luigis_box.id|escape:'javascript'}';
      var lb_enabled = '{$dbcfg.analytics.luigis_box.search}';
      if (lb_enabled == 'A') {
         lb_enabled = '{if getAdminUser()}Y{else}N{/if}';
      }
      lb_enabled = (lb_enabled == 'Y');
      wpj.onReady.push(function() {
         if (!lb_enabled || wpj.storage.cookies.getItem('convert_lb_disable')) { // AB test
            $('[data-search-input]').productSearch({if $preloadActive}{
               preload: "{path('kupshop_catalog_search_searchpreload')}"
            }{/if});
         } else {
            $('[data-search-input]').productSearchLuigi({
               trackerId: lb,
               preload: "{path('kupshop_luigisbox_search_searchpreload')}",
               {if $ctrl.user}
               modifyData: (data, attributes) => {
                  data.price = attributes.price_registered ?? data.price;
                  return data;
               }
               {/if}
            });
         }
      });
      {elsemodule}
      wpj.onReady.push(function () {
         $('[data-search-input]').productSearch({
            {if $preloadActive}
               preload: "{path('kupshop_catalog_search_searchpreload')}",
            {/if}
            {ifmodule LOCALE_PREFIX}
               localePrefix: "/{$ctrl.active_language}",
            {/ifmodule}
         });
      });
      {/ifmodule}
      {/block}
   </script>
{/block}

