{# LIBRARIES #}
{{ attach_library('ui_patterns/libraries.bs_tab') }}
{{ attach_library('ui_patterns/bs-tabs.mg_tabs') }}
{{ attach_library('ui_patterns/bs-tabs.tabs_lib') }}

{# VARIABLES #}
{% set fade = fade|default(false) %}
{% set pid = pid|default('pid-' ~ random()) %}
{% set no_open = no_open|default(false) %}
{% set nav_wrapper = nav_wrapper|default(false) %}
{% set nav_wrapper_class = nav_wrapper_class|default('') %}
{% set mobile_rows = mobile_rows|default(false) %}
{% set nav_only = nav_only|default(false) %}
{% set content_only = content_only|default(false) %}
{% set allow_close = allow_close|default(false) %}
{% set show_close = show_close|default(false) %}
{% set handle_state = handle_state|default(false) %}
{% set closer = closer|default('<i class="fas fa-times-circle"></i>') %}
{% set alignment = alignment|default('left') %}
{% set style = style|default('tabs') %}
{% set fill = fill|default('justify') %}
{% set wrapper_attributes = wrapper_attributes|default(create_attribute()) %}
{% set wrapper_attributes = wrapper_attributes.setAttribute("id", "tb-#{ pid }") %}
{% set wrapper_class = [
  wrapper_class|default(""),
  "tab-content"
] %}
{% set list_prefix = list_prefix|default(false) %}
{% set list_suffix = list_suffix|default(false) %}
{% set child_nav_classes = child_nav_classes|default('') %}
{% set nv_tgl_down = nv_tgl_down|default("fal fa-angle-down") %}
{% set nv_tgl_up = nv_tgl_up|default("far fa-times-circle") %}

{% if show_close %}
  {% set allow_close = true %}
{% endif %}

{# TEMPLATE #}
{% set nav_items = [] %}

{% if items|length > 0 %}

  {% if allow_close %}
    {% set hidden_item = {
      'tbid': "tbh-#{ pid }",
      'title': "Hidden",
      'content': "Hidden",
      'nav_class': 'd-none',
      'nav_attrs': {
        'data-tab-hider':  "tbh-#{ pid }",
      }
    } %}
    {% set items = items|merge([hidden_item]) %}
  {% endif %}

  {% for item in items %}

    {% if item.content %}

      {% set nav_item_attributes = create_attribute()
        .setAttribute("id", "tbt-#{ item.tbid }")
        .setAttribute("data-bs-toggle", "tab")
        .setAttribute("data-bs-target", "#tbi-#{ item.tbid }")
        .setAttribute("type", "button")
        .setAttribute("role", "tab")
        .setAttribute("tabindex", "0")
        .setAttribute("aria-controls", "tbi-#{ item.tbid }")
      %}

      {% if handle_state %}
        {% set nav_item_attributes = nav_item_attributes
          .setAttribute("data-alt-toggle", "state")
          .setAttribute("data-alt-target", "tab")
        %}
      {% endif %}

      {% if item.nav_attrs %}
        {% for k, v in item.nav_attrs %}
          {% if k is not same as('class') %}
            {% set nav_item_attributes = nav_item_attributes.setAttribute(k, v) %}
          {% endif %}
        {% endfor %}
      {% endif %}

      {% set nav_item = {
        "url": "#tbi-#{ item.tbid }",
        "title": item.title,
        "class": item.nav_class,
        "in_active_trail": item.first,
        "attributes": nav_item_attributes,
        "split": item.split,
        "tbid": item.tbid,
        "tab_item": true,
      } %}

    {% else %}

      {% set nav_item_attributes = create_attribute().setAttribute("id", "tbt-#{ item.tbid }") %}

      {% if item.nav_attrs %}
        {% for k, v in item.nav_attrs %}
          {% if k is not same as('class') %}
            {% set nav_item_attributes = nav_item_attributes.setAttribute(k, v) %}
          {% endif %}
        {% endfor %}
      {% endif %}

      {% set nav_item = {
        "url": item.url,
        "title": item.title,
        "in_active_trail": item.first,
        "attributes": nav_item_attributes,
        "class": item.nav_class,
        "link_only": true,
        "split": item.split,
        "tbid": item.tbid,
      } %}

    {% endif %}

    {% set nav_items = nav_items|merge([nav_item]) %}

  {% endfor %}

  {% if not content_only %}

    {% if nav_wrapper %}
      <div class="nav-wrapper {{ nav_wrapper_class }}">
    {% endif %}

    {% include "@organisms/tm-bs/nav/nav.twig" with {
      'items': nav_items,
      'nav_prefix': list_prefix,
      'nav_suffix': list_suffix,
      'no_active': no_open,
      'nid': pid,
      'nav_classes': child_nav_classes,
      'tab_list': true,
      'mobile_rows': mobile_rows,
      'alignment': alignment,
      'style': style,
      'fill': fill,
      'nv_tgl_down': nv_tgl_down,
      'nv_tgl_up': nv_tgl_up,
    } only %}

    {% if nav_wrapper %}
      </div>
    {% endif %}

  {% endif %}

  {% if not nav_only %}

    <div {{ wrapper_attributes.addClass(wrapper_class) }}>
      {% for item in items %}

        {% if item.title is same as('Hidden') and item.content is same as('Hidden') %}
          {% set child_content_class = child_content_class ~ ' d-none tab-hider' %}
        {% endif %}

        {% include "@organisms/tm-bs/tabs/tab-item/tab-item.twig" with {
          "tbid": item.tbid,
          "content": item.content,
          "first": item.first,
          "content_class": child_content_class,
          "content_attributes": child_content_attributes,
          "link_attributes": child_link_attributes,
          "link_class": child_link_class,
          "no_open": no_open,
          "fade": fade,
          "show_close": show_close,
          "closer": closer,
        } only %}

      {% endfor %}
    </div>
  {% endif %}

{% endif %}
