{function name=advCategoryTree nodes=[]}
  {if $nodes|count}
    <ul class="adv-megamenu__category-tree">
      {foreach from=$nodes item=categoryNode}
        <li>
          <a href="{$categoryNode.url|escape:'htmlall':'UTF-8'}">{$categoryNode.title|escape:'htmlall':'UTF-8'}</a>
          {if $categoryNode.children|count}
            {advCategoryTree nodes=$categoryNode.children}
          {/if}
        </li>
      {/foreach}
    </ul>
  {/if}
{/function}

{function name=advPanelTree nodes=[]}
  {if $nodes|count}
    <ul class="adv-megamenu__panel-tree">
      {foreach from=$nodes item=treeNode}
        <li{if $treeNode.children|count} class="has-children"{/if}>
          <a href="{$treeNode.url|escape:'htmlall':'UTF-8'}">{$treeNode.title|escape:'htmlall':'UTF-8'}</a>
          {if $treeNode.children|count}
            {advPanelTree nodes=$treeNode.children}
          {/if}
        </li>
      {/foreach}
    </ul>
  {/if}
{/function}

{function name=advNodeCards nodes=[]}
  {if $nodes|count}
    <div class="row adv-megamenu__node-card-row">
      {foreach from=$nodes item=treeNode}
        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
          <article class="card adv-megamenu__node-card">
            {if $treeNode.uses_sprite && $treeNode.icon_class}
              <div class="adv-megamenu__node-card-sprite">
                <span class="{$treeNode.icon_class|escape:'htmlall':'UTF-8'}" aria-hidden="true"></span>
              </div>
            {elseif $treeNode.icon_url}
              <img src="{$treeNode.icon_url|escape:'htmlall':'UTF-8'}" class="card-img-top" alt="{$treeNode.title|escape:'htmlall':'UTF-8'}" loading="lazy">
            {/if}
            <div class="card-body">
              <h3 class="card-title">
                <a href="{$treeNode.url|escape:'htmlall':'UTF-8'}">{$treeNode.title|escape:'htmlall':'UTF-8'}</a>
              </h3>
              {if $treeNode.description}
                <p class="card-text">{$treeNode.description|escape:'htmlall':'UTF-8'}</p>
              {/if}
            </div>
          </article>
        </div>
      {/foreach}
    </div>
  {/if}
{/function}

{function name=advNodeCardsByType nodes=[] type=''}
  {assign var=matchingNodes value=[]}
  {foreach from=$nodes item=treeNode}
    {if $treeNode.type == $type}
      {append var='matchingNodes' value=$treeNode}
    {/if}
  {/foreach}
  {if $matchingNodes|count}
    {advNodeCards nodes=$matchingNodes}
  {/if}
{/function}

{function name=advRichContentCards nodes=[]}
  {if $nodes|count}
    <div class="adv-megamenu__rich-node-row">
      {foreach from=$nodes item=treeNode}
        <article class="card adv-megamenu__rich-node-card">
          {if $treeNode.icon_url}
            <div class="adv-megamenu__rich-node-media">
              <img src="{$treeNode.icon_url|escape:'htmlall':'UTF-8'}" alt="{$treeNode.title|escape:'htmlall':'UTF-8'}" loading="lazy">
            </div>
          {/if}
          <div class="adv-megamenu__rich-node-body">
            <h3 class="adv-megamenu__rich-node-title">
              <a href="{$treeNode.url|escape:'htmlall':'UTF-8'}" {if $treeNode.new_window}target="_blank" rel="noopener"{/if}>{$treeNode.title|escape:'htmlall':'UTF-8'}</a>
            </h3>
            {if $treeNode.description}
              <div class="adv-megamenu__rich-node-description">{$treeNode.description|escape:'htmlall':'UTF-8'}</div>
            {/if}
            {if $treeNode.custom_link}
              <a href="{$treeNode.custom_link|escape:'htmlall':'UTF-8'}" class="adv-megamenu__rich-node-link btn btn-primary" {if $treeNode.new_window}target="_blank" rel="noopener"{/if}>
                {l s='Zobacz wszystko' d='Modules.Advancedmegamenu.Shop'}
              </a>
            {/if}
          </div>
        </article>
      {/foreach}
    </div>
  {/if}
{/function}

{function name=advRichContentIntro node=[]}
  {if $node.type == 'rich_content'}
    <article class="adv-megamenu__rich-intro">
      {if $node.icon_url}
        <div class="adv-megamenu__rich-intro-media">
          <img src="{$node.icon_url|escape:'htmlall':'UTF-8'}" alt="{$node.title|escape:'htmlall':'UTF-8'}" loading="lazy">
        </div>
      {/if}
      <div class="adv-megamenu__rich-intro-body">
        {if $node.title}
          <h3 class="adv-megamenu__rich-intro-title">{$node.title|escape:'htmlall':'UTF-8'}</h3>
        {/if}
        {if $node.description}
          <div class="adv-megamenu__rich-intro-description">{$node.description|escape:'htmlall':'UTF-8'}</div>
        {/if}
        {if $node.custom_link}
          <a href="{$node.custom_link|escape:'htmlall':'UTF-8'}" class="adv-megamenu__rich-intro-link btn btn-primary" {if $node.new_window}target="_blank" rel="noopener"{/if}>
            {l s='Zobacz wszystko' d='Modules.Advancedmegamenu.Shop'}
          </a>
        {/if}
      </div>
    </article>
  {/if}
{/function}

{function name=advLayoutCards layouts=[]}
  {if $layouts|count}
    <div class="row adv-megamenu__layout-row">
      {foreach from=$layouts item=layout}
        <div class="col-md-{$layout.column_width|intval}">
          <article class="card adv-megamenu__layout-card adv-megamenu__promo{if $layout.block_type == 'products'} is-products-only{/if}"{if $layout.background_color} style="--adv-promo-bg: {$layout.background_color|escape:'htmlall':'UTF-8'};"{/if}>
            {if $layout.custom_image_url}
              <div class="adv-megamenu__promo-media card-img-top">
                <img src="{$layout.custom_image_url|escape:'htmlall':'UTF-8'}" alt="{$layout.title|escape:'htmlall':'UTF-8'}" loading="lazy">
              </div>
            {/if}
            <div class="card-body adv-megamenu__layout-card-body">
              {if $layout.show_title}
                <h3 class="card-title">{$layout.title|escape:'htmlall':'UTF-8'}</h3>
              {/if}
              {if $layout.description && $layout.block_type != 'products'}
                <p class="card-text">{$layout.description|escape:'htmlall':'UTF-8'}</p>
              {/if}
              {if $layout.products|count}
                <div class="adv-megamenu__products">
                  {foreach from=$layout.products item=product}
                    <article class="card adv-megamenu__product-card">
                      <a href="{$product.url|escape:'htmlall':'UTF-8'}" class="adv-megamenu__product-link">
                        {if !empty($product.cover.bySize.home_default.url)}
                          <img src="{$product.cover.bySize.home_default.url|escape:'htmlall':'UTF-8'}" alt="{$product.name|escape:'htmlall':'UTF-8'}" loading="lazy">
                        {/if}
                        <span class="adv-megamenu__product-name">{$product.name|escape:'htmlall':'UTF-8'}</span>
                        {if !empty($product.price)}
                          <span class="adv-megamenu__product-price">{$product.price}</span>
                        {/if}
                      </a>
                    </article>
                  {/foreach}
                </div>
              {/if}
            </div>
          </article>
        </div>
      {/foreach}
    </div>
  {/if}
{/function}

{function name=advMobilePanels nodes=[] depth=0}
  {foreach from=$nodes item=node}
    {assign var=panelId value="adv-panel-"|cat:$node.id}
    {if $node.children|count || $node.category_branch|count || $node.layouts|count || $node.type == 'rich_content'}
      <section class="adv-megamenu__mobile-panel" data-panel-id="{$panelId}">
        <div class="adv-megamenu__mobile-bar">
          <button type="button" class="adv-megamenu__mobile-back js-adv-back">
            &lt; {l s='Wstecz' d='Modules.Advancedmegamenu.Shop'}
          </button>
          <span>{$node.title|escape:'htmlall':'UTF-8'}</span>
        </div>
        <ul class="adv-megamenu__mobile-list">
          {foreach from=$node.category_branch item=branch}
            <li>
              <a href="{$branch.url|escape:'htmlall':'UTF-8'}">{$branch.title|escape:'htmlall':'UTF-8'}</a>
            </li>
          {/foreach}
          {foreach from=$node.children item=child}
            <li>
              <div class="adv-megamenu__mobile-link-row{if $depth == 1 && (($child.uses_sprite && $child.icon_class) || $child.icon_url)} adv-megamenu__mobile-link-row--with-image{/if}">
                {if $depth == 1 && ($child.uses_sprite && $child.icon_class)}
                  <div class="adv-megamenu__mobile-thumb adv-megamenu__mobile-thumb--sprite">
                    <span class="{$child.icon_class|escape:'htmlall':'UTF-8'}" aria-hidden="true"></span>
                  </div>
                {elseif $depth == 1 && $child.icon_url}
                  <div class="adv-megamenu__mobile-thumb">
                    <img src="{$child.icon_url|escape:'htmlall':'UTF-8'}" alt="{$child.title|escape:'htmlall':'UTF-8'}" loading="lazy">
                  </div>
                {/if}
                <a href="{$child.url|escape:'htmlall':'UTF-8'}" {if $child.new_window}target="_blank" rel="noopener"{/if}>{$child.title|escape:'htmlall':'UTF-8'}</a>
                {if $child.children|count || $child.category_branch|count || $child.layouts|count || $child.type == 'rich_content'}
                  <button type="button" class="js-adv-open-panel" data-target="adv-panel-{$child.id}">›</button>
                {/if}
              </div>
            </li>
          {/foreach}
        </ul>
      </section>
      {advMobilePanels nodes=$node.children depth=$depth+1}
    {/if}
  {/foreach}
{/function}

<nav class="adv-megamenu" aria-label="{l s='Main navigation' d='Modules.Advancedmegamenu.Shop'}">
  <div class="adv-megamenu__desktop hidden-sm-down">
    {if isset($shop.logo_details.src) && $shop.logo_details.src}
      <a class="adv-megamenu__brand" href="{$urls.pages.index|escape:'htmlall':'UTF-8'}" aria-label="{$shop.name|escape:'htmlall':'UTF-8'}">
        <img
          src="{$shop.logo_details.src|escape:'htmlall':'UTF-8'}"
          alt="{$shop.name|escape:'htmlall':'UTF-8'}"
          width="{$shop.logo_details.width|intval}"
          height="{$shop.logo_details.height|intval}"
          loading="eager"
        >
      </a>
    {/if}
    <ul class="adv-megamenu__root-list">
      {foreach from=$menu.children item=node}
        {if $node.active}
          <li class="adv-megamenu__root-item{if $node.current} is-current{/if}{if $node.children|count || $node.layouts|count || $node.category_branch|count} has-panel{/if}">
            <a href="{$node.url|escape:'htmlall':'UTF-8'}" class="adv-megamenu__root-link" {if $node.new_window}target="_blank" rel="noopener"{/if}>
              {if $node.icon_class}
                <span class="{$node.icon_class|escape:'htmlall':'UTF-8'}" aria-hidden="true"></span>
              {/if}
              <span>{$node.title|escape:'htmlall':'UTF-8'}</span>
            </a>

            {if $node.children|count || $node.layouts|count || $node.category_branch|count}
              <div class="adv-megamenu__panel">
                <div class="adv-megamenu__panel-inner">
                  <div class="adv-megamenu__panel-nav">
                    {if $node.category_branch|count}
                      {advCategoryTree nodes=$node.category_branch}
                    {/if}

                    {if $node.children|count}
                      <ul class="adv-megamenu__manual-tree">
                        {foreach from=$node.children item=child}
                          <li class="{if $child.children|count || $child.category_branch|count || $child.layouts|count || $child.type == 'rich_content'}has-submenu{/if}" data-submenu-key="node-{$child.id}">
                            <a href="{$child.url|escape:'htmlall':'UTF-8'}" class="{if $child.children|count || $child.category_branch|count || $child.layouts|count || $child.type == 'rich_content'}adv-megamenu__submenu-trigger{/if}" {if $child.new_window}target="_blank" rel="noopener"{/if}>{$child.title|escape:'htmlall':'UTF-8'}</a>
                          </li>
                        {/foreach}
                      </ul>
                    {/if}
                  </div>

                  {assign var=hasSubmenuContent value=false}
                  {foreach from=$node.children item=child}
                    {if $child.children|count || $child.category_branch|count || $child.layouts|count || $child.type == 'rich_content'}
                      {assign var=hasSubmenuContent value=true}
                    {/if}
                  {/foreach}

                  {if $hasSubmenuContent || $node.layouts|count}
                    <div class="adv-megamenu__panel-content">
                      {if $hasSubmenuContent}
                        <div class="adv-megamenu__submenu-content">
                          {foreach from=$node.children item=child}
                            {if $child.children|count || $child.category_branch|count || $child.layouts|count || $child.type == 'rich_content'}
                              <section class="adv-megamenu__submenu-pane" data-submenu-pane="node-{$child.id}">
                                {if $child.type != 'rich_content'}
                                  <h3 class="adv-megamenu__submenu-title">{$child.title|escape:'htmlall':'UTF-8'}</h3>
                                {/if}
                                {advRichContentIntro node=$child}
                                {if $child.category_branch|count}
                                  {advPanelTree nodes=$child.category_branch}
                                {/if}
                                {if $child.children|count}
                                  {assign var=richContentNodes value=[]}
                                  {foreach from=$child.children item=grandChild}
                                    {if $grandChild.type == 'rich_content'}
                                      {append var='richContentNodes' value=$grandChild}
                                    {/if}
                                  {/foreach}
                                  {advRichContentCards nodes=$richContentNodes}
                                  {advNodeCardsByType nodes=$child.children type='category'}
                                  {advNodeCardsByType nodes=$child.children type='cms'}
                                  {advNodeCardsByType nodes=$child.children type='link'}
                                {/if}
                                {if $child.layouts|count}
                                  {advLayoutCards layouts=$child.layouts}
                                {/if}
                              </section>
                            {/if}
                          {/foreach}
                        </div>
                      {/if}

                      {if $node.layouts|count}
                        {advLayoutCards layouts=$node.layouts}
                      {/if}
                    </div>
                  {/if}
                </div>
              </div>
            {/if}
          </li>
        {/if}
      {/foreach}
    </ul>
  </div>

  <div class="adv-megamenu__mobile hidden-md-up">
    {if isset($shop.logo_details.src) && $shop.logo_details.src}
      <a class="adv-megamenu__brand adv-megamenu__brand--mobile" href="{$urls.pages.index|escape:'htmlall':'UTF-8'}" aria-label="{$shop.name|escape:'htmlall':'UTF-8'}">
        <img
          src="{$shop.logo_details.src|escape:'htmlall':'UTF-8'}"
          alt="{$shop.name|escape:'htmlall':'UTF-8'}"
          width="{$shop.logo_details.width|intval}"
          height="{$shop.logo_details.height|intval}"
          loading="eager"
        >
      </a>
    {/if}
    <button type="button" class="adv-megamenu__toggle js-adv-menu-toggle header-block__action-btn" aria-expanded="false" aria-label="{l s='Open menu' d='Modules.Advancedmegamenu.Shop'}">
      <span class="material-icons header-block__icon" aria-hidden="true">menu</span>
    </button>

    <div class="adv-megamenu__overlay js-adv-overlay">
      <div class="adv-megamenu__drawer">
        <div class="adv-megamenu__mobile-head">
          <span>{l s='Menu' d='Modules.Advancedmegamenu.Shop'}</span>
          <button type="button" class="adv-megamenu__close js-adv-menu-close" aria-label="{l s='Close menu' d='Modules.Advancedmegamenu.Shop'}">×</button>
        </div>

        <div class="adv-megamenu__mobile-viewport">
          <section class="adv-megamenu__mobile-panel is-active" data-panel-id="root">
            <ul class="adv-megamenu__mobile-list">
              {foreach from=$menu.children item=node}
                {if $node.active}
                  <li>
                    <div class="adv-megamenu__mobile-link-row">
                      <a href="{$node.url|escape:'htmlall':'UTF-8'}" {if $node.new_window}target="_blank" rel="noopener"{/if}>{$node.title|escape:'htmlall':'UTF-8'}</a>
                      {if $node.children|count || $node.category_branch|count || $node.layouts|count || $node.type == 'rich_content'}
                        <button type="button" class="js-adv-open-panel" data-target="adv-panel-{$node.id}">›</button>
                      {/if}
                    </div>
                  </li>
                {/if}
              {/foreach}
            </ul>
          </section>
          {advMobilePanels nodes=$menu.children depth=0}
        </div>
      </div>
    </div>
  </div>
</nav>