{*
=========================================================
 MÉRIDIAN — Navigation
 - Desktop : items + méga-menu colonnes inline (l2 → l3 → l4)
   et onglet Marques A→Z (via $brands_by_letter).
 - Mobile : tiroir accordéon (msheet) piloté par theme.js. Chaque rubrique avec
   enfants = libellé cliquable (→ sa page) + chevron séparé (déplie le niveau).
 Mêmes données que l'ancien menu ($menus = configMenuParent).
=========================================================
*}
{assign var=_chevron value='<svg class="mrd-chev" width="18" height="18" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>'}

{if !empty($menus)}

{* ============ Desktop ============ *}
{foreach from=$menus item=parent}
  {if $parent->isVisible}
    {assign var=_isBrand value=($parent->menu.type == 'brand' && isset($brands_by_letter) && $brands_by_letter|@count > 0)}
    {assign var=_hasCols value=($parent->menu.columns|@count > 0)}
    {assign var=_hasMega value=($_isBrand || $_hasCols)}

    {* style personnalisé du parent (couleur + graisse), défini en back-office.
       #000000 = valeur par défaut de l'<input type=color> non modifié → on l'ignore
       (sinon un parent sans couleur choisie serait forcé en noir). *}
    {capture assign=_pStyle}{if !empty($parent->color) && $parent->color != '#000000'}color:{$parent->color};{/if}{if !empty($parent->fontWeight)}font-weight:{$parent->fontWeight};{/if}{/capture}
    <div class="mrd-nav-item"{if $_hasMega} data-mega{/if}>
      <a class="mrd-nav-link{if !empty($parent->menu.image)} has-img{/if}" href="{$parent->menu.url}"{if $_pStyle} style="{$_pStyle}"{/if}>{if !empty($parent->menu.image)}<img class="mrd-nav-img" src="{$parent->menu.image}" alt="{$parent->menu.name}" style="display:block;height:24px;width:auto">{else}{$parent->menu.name}{/if}</a>

      {if $_hasMega}
        <div class="mega-panel">
          <div class="mega-inner mrd-container">

            {if $_isBrand}
              <div class="mega-brands">
                {foreach from=$brands_by_letter key=letter item=brands}
                  <div class="mega-brand-group">
                    <div class="mega-brand-letter">{$letter}</div>
                    <ul class="mega-sublist">
                      {foreach from=$brands item=brand}
                        <li><a class="mega-sublink" href="{$brand.url}">{$brand.name}</a></li>
                      {/foreach}
                    </ul>
                  </div>
                {/foreach}
              </div>
              <a class="mega-feature" href="{$parent->menu.url}">
                <span class="mega-feature-cap">
                  <span class="eyebrow" style="color:rgba(255,255,255,.8)">{l s='Toutes les marques' d='Shop.Theme.Catalog'}</span>
                  <span class="display">A → Z</span>
                </span>
              </a>
            {else}
              {assign var=_feature value=null}
              <div class="mega-columns">
                {foreach from=$parent->menu.columns item=column}
                  {if $column.isVisible}
                    {if $column.type == 'media'}
                      {foreach from=$column.blocks item=media}{assign var=_feature value=$media}{/foreach}
                    {else}
                      {foreach from=$column.blocks item=sub}
                        <div class="mega-column">
                          <a class="mega-col-title" href="{$sub.url}">{$sub.name}</a>
                          {if $sub.children|@count > 0}
                            <ul class="mega-sublist">
                              {foreach from=$sub.children item=child}
                                <li>
                                  <a class="mega-sublink" href="{$child.url}">{$child.name}</a>
                                  {if $child.children|@count > 0}
                                    <ul class="mega-l4">
                                      {foreach from=$child.children item=gc}
                                        <li><a class="mega-l4-link" href="{$gc.url}">{$gc.name}</a></li>
                                      {/foreach}
                                    </ul>
                                  {/if}
                                </li>
                              {/foreach}
                            </ul>
                          {/if}
                        </div>
                      {/foreach}
                    {/if}
                  {/if}
                {/foreach}
              </div>
              {if $_feature}
                <a class="mega-feature" href="{$_feature.url}">
                  <img src="{$_feature.image}" alt="{$_feature.title|default:$parent->menu.name}" loading="lazy" width="280" height="300">
                  <span class="mega-feature-cap">
                    <span class="display">{$_feature.title|default:$parent->menu.name}</span>
                  </span>
                </a>
              {/if}
            {/if}

          </div>
        </div>
      {/if}
    </div>
  {/if}
{/foreach}

{* ============ Tiroir mobile (accordéon façon Nike) ============ *}
{*
 Rendu récursif d'un nœud {name,url,children} à n'importe quelle profondeur.
 Règle de clic — chaque entrée est utile, jamais de lien mort :
   • URL réelle              → libellé = lien (redirige vers la page).
   • URL vide ou "#" + enfants → libellé = bouton qui déplie le niveau.
   • URL vide ou "#" sans enfant → libellé en texte simple (non cliquable).
 Le chevron (à droite) déplie toujours sans changer de page.
*}
{function name=msheetNode}
  {assign var=_url value=$node.url}
  {assign var=_hasUrl value=($_url != '' && $_url != '#')}
  {assign var=_hasKids value=($node.children|@count > 0)}
  <li class="msheet-node">
    {if $_hasKids}
      <div class="msheet-row">
        {if $_hasUrl}
          <a class="msheet-item" href="{$_url}"><span class="lbl">{$node.name}</span></a>
        {else}
          <button class="msheet-item" type="button" data-toggle aria-expanded="false"><span class="lbl">{$node.name}</span></button>
        {/if}
        <button class="msheet-toggle" type="button" data-toggle aria-expanded="false" aria-label="{l s='Afficher le sous-menu' d='Shop.Theme.Global'}"><svg class="mrd-chev" width="18" height="18" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg></button>
      </div>
      <div class="msheet-sub"><ul>
        {foreach from=$node.children item=_kid}{msheetNode node=$_kid}{/foreach}
      </ul></div>
    {elseif $_hasUrl}
      <div class="msheet-row"><a class="msheet-item is-leaf" href="{$_url}"><span class="lbl">{$node.name}</span></a></div>
    {else}
      <div class="msheet-row"><span class="msheet-item is-leaf is-static"><span class="lbl">{$node.name}</span></span></div>
    {/if}
  </li>
{/function}

<div class="msheet-overlay"></div>
<aside class="msheet" aria-label="{l s='Menu' d='Shop.Theme.Global'}">
  <div class="msheet-top">
    <span class="msheet-title">{l s='Menu' d='Shop.Theme.Global'}</span>
    <button class="msheet-close" type="button" aria-label="{l s='Fermer' d='Shop.Theme.Global'}">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
    </button>
  </div>
  <div class="msheet-body">
    <ul class="msheet-list">
      {foreach from=$menus item=parent}
        {if $parent->isVisible}
          {assign var=_isBrand value=($parent->menu.type == 'brand' && isset($brands_by_letter) && $brands_by_letter|@count > 0)}
          {assign var=_hasCols value=($parent->menu.columns|@count > 0)}
          {assign var=_pUrl value=$parent->menu.url}
          {assign var=_pHasUrl value=($_pUrl != '' && $_pUrl != '#')}
          <li class="msheet-node">
            {if $_isBrand}
              <div class="msheet-row">
                {if $_pHasUrl}<a class="msheet-item is-root is-accent" href="{$_pUrl}"><span class="lbl">{$parent->menu.name}</span></a>
                {else}<button class="msheet-item is-root is-accent" type="button" data-toggle aria-expanded="false"><span class="lbl">{$parent->menu.name}</span></button>{/if}
                <button class="msheet-toggle" type="button" data-toggle aria-expanded="false" aria-label="{l s='Afficher le sous-menu' d='Shop.Theme.Global'}"><svg class="mrd-chev" width="18" height="18" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg></button>
              </div>
              <div class="msheet-sub"><ul>
                {foreach from=$brands_by_letter key=letter item=brands}
                  {foreach from=$brands item=brand}
                    <li class="msheet-node"><div class="msheet-row"><a class="msheet-item is-leaf" href="{$brand.url}"><span class="lbl">{$brand.name}</span></a></div></li>
                  {/foreach}
                {/foreach}
              </ul></div>
            {elseif $_hasCols}
              <div class="msheet-row">
                {if $_pHasUrl}<a class="msheet-item is-root" href="{$_pUrl}"><span class="lbl">{$parent->menu.name}</span></a>
                {else}<button class="msheet-item is-root" type="button" data-toggle aria-expanded="false"><span class="lbl">{$parent->menu.name}</span></button>{/if}
                <button class="msheet-toggle" type="button" data-toggle aria-expanded="false" aria-label="{l s='Afficher le sous-menu' d='Shop.Theme.Global'}"><svg class="mrd-chev" width="18" height="18" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg></button>
              </div>
              <div class="msheet-sub"><ul>
                {foreach from=$parent->menu.columns item=column}
                  {if $column.isVisible && $column.type != 'media'}
                    {foreach from=$column.blocks item=sub}{msheetNode node=$sub}{/foreach}
                  {/if}
                {/foreach}
              </ul></div>
            {elseif $_pHasUrl}
              <div class="msheet-row"><a class="msheet-item is-root" href="{$_pUrl}"><span class="lbl">{$parent->menu.name}</span></a></div>
            {else}
              <div class="msheet-row"><span class="msheet-item is-root is-static"><span class="lbl">{$parent->menu.name}</span></span></div>
            {/if}
          </li>
        {/if}
      {/foreach}
    </ul>
  </div>
</aside>

{/if}
