{{ attach_library('ui_patterns/menu_mg.menu_mg_lib') }}

{% set attributes = attributes|default(create_attribute()) %}
{% set mid = mid|default("mega-" ~ random()) %}

{% set tab_items = [] %}

{% for link in links %}
  {% set col_content = "" %}
  {% if link.sub_links %}
    {% set col_content %}
      <div class="row">

        {% set top_link = {
          'url': link['url'],
          'title': link['title'],
          'active': link['active'],
          "attributes": link['attributes'],
          'in_active_trail': link['in_active_trail'],
        } %}
        {% set sub_link_col_items = [top_link] %}

        {% for sub_link in link.sub_links %}
          {% if sub_link['break'] %}
            <div class="col-md-3">
              {{ pattern('menu_std', {'links': sub_link_col_items, 'max_depth': 1}) }}
            </div>
            {% set sub_link_col_items = [] %}
            {% set sub_link_col_items = sub_link_col_items|merge([sub_link]) %}
          {% else %}
            {% set sub_link_col_items = sub_link_col_items|merge([sub_link]) %}
          {% endif %}
        {% endfor %}

        {% if sub_link_col_items is not empty %}
          <div class="col-md-3">
            {{ pattern('menu_std', {'links': sub_link_col_items, 'max_depth': 1}) }}
          </div>
        {% endif %}
      </div>
    {% endset %}
  {% endif %}

  {% set link_classes = [
    link.class,
    link['in_active_trail'] ? 'active-trail',
  ] %}

  {% set tab_item = {
    "tbid": link.lid,
    "title": link.title,
    "content": col_content,
    "first": false,
    "url": link.url,
    "nav_attrs": link.attributes,
    "nav_class": link_classes|join(' '),
  } %}

  {% set tab_items = tab_items|merge([tab_item]) %}

{% endfor %}

{% set prefix_link %}
  <ul class="ulc">
    <li class="liin mbis">
      {{ pattern_preview('hamburger') }}
    </li>
    <li class="liin header-logo-wrapper">
      <a href="/" alt="Home link" id="header-logo-link">
        <img id="header-logo"
             height="{{ logo_height }}"
             width="{{ logo_height }}"
             src="{{ logo_url }}"
             alt="{{ logo_alt }}"/>
      </a>
    </li>
    <li class="liin mbis">
      <a href="/search"
         tabindex="-1"
         data-bs-target="#modal-search"
         data-bs-toggle="modal"
         alt="Search"
         class="lg-down" >
        <i class="fas fa-search"></i>
        <span class="sr-only">Search</span>
      </a>
    </li>
  </ul>
{% endset %}

{# TEMPLATE #}
{{ pattern('bs-tabs-items', {
  'items': tab_items,
  'list_prefix': prefix_link,
  'pid': mid,
}, 'tbi_c') }}
