{function header_submenu}
   <ul class="level-{$item.level+1}">
      {foreach $categories as $item}
         <li class="nav-item {if $item.submenu and $item.level < $level_max}has-submenu{/if}" data-navitem="{$item.id}">
            <a href="{url s=category IDcat=$item.id}" class="nav-link">
               <div class="img">
                  <img src="{get_photo photo=$item.photo type=section size='subsections'}" alt="{$subCat.title}">
               </div>
               <span>{$item.title_short}</span>
            </a>
         </li>
      {/foreach}
   </ul>
{/function}

{if not $fromCache}
   <ul class="level-0" data-sections="header">
      {foreach $categories as $item}
         <li class="nav-item {if $item.submenu and $item.level < $level_max}has-submenu{/if}" data-navitem="{$item.id}">
            <a href="{url s=category IDcat=$item.id}" class="nav-link">{$item.title_short}</a>

            {if $item.submenu and $item.level < $level_max}
               <div class="submenu">
                  <div class="container-small container-flex">
                     <div>
                        {header_submenu categories=$item.submenu}
                     </div>
                     {if $item.data.products}
                        <div class="submenu-product">
                            {insert_products type="product" id=$item.data.products image=2 in_store=true template="components/block.products.header-sections.tpl" listType='menu'}
                        </div>
                     {/if}
                  </div>
               </div>
            {/if}
         </li>
      {/foreach}
      {block "additional-items"}{/block}
   </ul>
{else}
   <script>
      wpj.onReady.push(function () {
         {if $selection}
         {foreach $selection as $item}
         $('[data-sections="header"] [data-navitem="' + {$item} +'"]').addClass('active');
         {/foreach}
         {/if}
      });
   </script>
{/if}
