{% capture lang_base_url %}{% if page.language == 'default' %}{{ site.url }}/{% else %}{{ site.url }}/{{ page.language }}/{% endif %}{% endcapture %}

<header id="site_header" class="site_header">
  <div class="custom_container_fluid">
    <div class="common_container">
      <nav class="navbar">

        <a href="{{ lang_base_url }}" class="brand_logo">
          <img src="{{ site.url }}/assets/pages/{{ site.data.languages[page.language].navigation.i_logo }}" alt="Altametrics Company Logo" loading="eager" fetchpriority="high">
        </a>

        <ul class="nav_links">
          {% for item in site.data.languages[page.language].navigation.nav_main %}
            {% unless item.v_type == 'button' %}
              <li class="nav_item {% if item.is_mega %}has_mega_menu{% endif %}">
                <a href="{% if item.is_mega %}#{% elsif item.p_link %}{{ lang_base_url }}{{ item.p_link }}{% else %}#{% endif %}" class="nav_link {% if page.url contains item.p_link %}is_active{% endif %}">
                  {{ item.t_name }}
                  {% if item.v_dropdown %}
                    <span class="dropdown_arrow">▾</span>
                  {% endif %}
                </a>

                {% if item.is_mega %}
                  <div class="mega_menu">
                    <div class="mega_inner_container">
                      <div class="mega_sidebar">
                        <ul>
                          {% for sidebar_item in item.mega_sidebar %}
                            <li class="{% if sidebar_item.is_active or page.url contains sidebar_item.p_link %}active{% endif %}">
                              <span class="scramble_text" data-text="{{ sidebar_item.t_name }}">{{ sidebar_item.t_name }}</span>
                            </li>
                          {% endfor %}
                        </ul>
                      </div>

                      <div class="mega_content">
                        <div class="content_header">
                          <h3>{{ item.mega_content_header.t_title }}</h3>
                          <p>{{ item.mega_content_header.t_subtitle }}</p>
                        </div>

                        <div class="cards_grid">
                          {% for card in item.mega_cards %}
                            {% if card.is_explore %}
                              <a href="{{ lang_base_url }}{{ card.p_link }}" class="mega_card_link explore_wrapper">
                                <div class="mega_card explore_card">
                                  <h4>{{ card.t_title }}</h4>
                                  <span class="arrow_icon">{{ card.i_icon }}</span>
                                </div>
                              </a>
                            {% else %}
                              <a href="{{ lang_base_url }}{{ card.p_link }}" class="mega_card_link normal_card">
                                <div class="mega_card">
                                  <h4>{{ card.t_title }}</h4>
                                  <p>{{ card.t_desc }}</p>
                                </div>
                              </a>
                            {% endif %}
                          {% endfor %}
                        </div>
                      </div>
                    </div>
                  </div>
                {% endif %}
              </li>
            {% endunless %}
          {% endfor %}

          <li class="nav_item mobile_only_actions">
            {% for item in site.data.languages[page.language].navigation.nav_main %}
              {% if item.v_type == 'button' %}
                <a href="{{ lang_base_url }}{{ item.p_link }}" class="btn {{ item.p_class }}">
                  {{ item.t_name }}
                </a>
              {% endif %}
            {% endfor %}
          </li>
        </ul>

        <div class="nav_actions_wrapper">
          <div class="nav_actions desktop_only_actions">
            {% for item in site.data.languages[page.language].navigation.nav_main %}
              {% if item.v_type == 'button' %}
                <a href="{{ lang_base_url }}{{ item.p_link }}" class="btn {{ item.p_class }}">
                  {{ item.t_name }}
                </a>
              {% endif %}
            {% endfor %}
          </div>

          <button class="mobile_menu_trigger" aria-label="Toggle navigation">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
          </button>
        </div>

      </nav>
    </div>
  </div>
</header>