{#
/**
 * @file
 * Dynamic Header Component with Multiple Styles
 *
 * Available variables:
 * - header_type: Type of header to display (modern, classic, minimal, ecommerce)
 * - logo_url: URL to the site logo
 * - site_name: Name of the site
 * - main_menu: Main navigation menu
 * - user_menu: User account menu
 * - cart_count: Number of items in cart
 * - promo_text: Promotional text for top bar
 * - currency: Current currency
 * - show_promo_bar: Whether to show promo bar
 * - show_search: Whether to show search
 * - show_user_account: Whether to show user account
 * - show_cart: Whether to show cart
 * - show_locale_selector: Whether to show locale selector
 */
#}

{% if header_type == 'modern' or not header_type %}
  {# MODERN HEADER - Maya Fashion inspired #}

  {# Top promotional bar #}
  {# {% if show_promo_bar and promo_text %}
  <div class="header-promo-bar modern">
    <div class="container">
      <div class="promo-content">
        <span class="promo-text">{{ promo_text }}</span>
      </div>
    </div>
  </div>
  {% endif %} #}

  {# Main header #}
  <header class="site-header modern" role="banner">
    <div class="container">
      <div class="header-content">

        {# Left section - Navigation toggle for mobile #}
        <div class="header-left">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation" aria-controls="main-navigation" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>

        {# Center section - Logo #}
        <div class="header-center">
          <a href="{{ front_page }}" class="site-logo" title="{{ site_name }}">
            {% if logo2_url %}
              <img src="{{ logo2_url }}" alt="{{ site_name }}" class="logo-image">
            {% else %}
              <span class="site-name">{{ site_name }}</span>
            {% endif %}
          </a>
        </div>

        {# Right section - User actions #}
        <div class="header-right">

          <nav class="navbar navbar-expand">
            <div class="container-fluid">
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav">
                  {% if show_user_account %}
                    {% if logged_in %}
                      <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                          </svg>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                          <li><a class="dropdown-item" href="/user">{{ 'Profile'|t }}</a></li>
                          <li><hr class="dropdown-divider"></li>
                          <li><a class="dropdown-item" href="{{ path('user.logout') }}">{{ 'Logout'|t }}</a></li>
                        </ul>
                      </li>
                    {% else %}
                      <li class="nav-item">
                        <a class="nav-link" href="/user">
                          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                          </svg>
                        </a>
                      </li>
                    {% endif %}
                  {% endif %}
                </ul>
              </div>
            </div>
          </nav>

          {# {% if show_locale_selector %}
            <div class="header-locale">
              <button class="locale-toggle" aria-label="Cambiar país y moneda">
                <img src="https://cdn.shopify.com/static/images/flags/co.svg?width=14" alt="Colombia" class="country-flag">
                <span class="currency">{{ currency|default('$ COP') }}</span>
              </button>
            </div>
          {% endif %} #}

          {# {% if show_search %}
            <button class="header-search-toggle" aria-label="Abrir búsqueda">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"></circle>
                <path d="M21 21l-4.35-4.35"></path>
              </svg>
            </button>
          {% endif %} #}

          {# {% if show_cart %}
            <a href="/cart" class="header-cart" aria-label="Carrito de compras">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M9 22C9.55228 22 10 21.5523 10 21C10 20.4477 9.55228 20 9 20C8.44772 20 8 20.4477 8 21C8 21.5523 8.44772 22 9 22Z"></path>
                <path d="M20 22C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20C19.4477 20 19 20.4477 19 21C19 21.5523 19.4477 22 20 22Z"></path>
                <path d="M1 1H5L7.68 14.39C7.77144 14.8504 8.02191 15.264 8.38755 15.5583C8.75318 15.8526 9.2107 16.009 9.68 16H19.4C19.8693 16.009 20.3268 15.8526 20.6925 15.5583C21.0581 15.264 21.3086 14.8504 21.4 14.39L23 6H6"></path>
              </svg>
              {% if cart_count and cart_count > 0 %}
                <span class="cart-count">{{ cart_count }}</span>
              {% endif %}
            </a>
          {% endif %} #}
        </div>
      </div>
    </div>

    {# Main navigation - ahora fuera del container para que tenga el fondo completo #}
    <nav class="main-navigation collapse navbar-collapse" id="main-navigation">
      <div class="container">
        {% if main_menu %}
          {{ main_menu }}
        {% endif %}
      </div>
    </nav>

    {% if show_search %}
      {# Search overlay (hidden by default) #}
      <div class="search-overlay" id="search-overlay">
        <div class="search-container">
          <form class="search-form" action="/search">
            <input type="search" name="q" placeholder="Buscar productos..." class="search-input" autocomplete="off">
            <button type="submit" class="search-submit">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"></circle>
                <path d="M21 21l-4.35-4.35"></path>
              </svg>
            </button>
          </form>
          <button class="search-close" aria-label="Cerrar búsqueda">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>
      </div>
    {% endif %}
  </header>

{% endif %}
