basecoat/src/jinja/tabs.html.jinja

{#
  Renders a tabs component.

  @param id {string} - Unique identifier for the tabs component.
  @param tabsets {array} - An array of objects, each representing a tab and its panel.
    Each object should have:
    - id {string}: Unique identifier prefix for the tab and panel.
    - tab {string}: HTML content for the tab button.
    - panel {string} [optional]: HTML content for the tab panel.
    - tab_attrs {object} [optional]: Additional HTML attributes for the tab button.
    - panel_attrs {object} [optional]: Additional HTML attributes for the tab panel div.
  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
  @param tablist_attrs {object} [optional] - Additional HTML attributes for the tablist nav element.
  @param default_tab_index {number} [optional] [default=1] - The 1-based index of the tab to be active initially.
#}
{% macro tabs(
    id=None,
    tabsets=[],
    main_attrs={},
    tablist_attrs={},
    default_tab_index=1
  )
%}
{% set id = id or ("tabs-" + (range(100000, 999999) | random | string)) %}
<div
  class="tabs {{ main_attrs.class }}"
  id="{{ id }}"
  {% for key, value in main_attrs.items() %}
    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
  {% endfor %}
>
  <nav
    role="tablist"
    aria-orientation="horizontal"
    {% for key, value in tablist_attrs.items() %}
      {{ key }}="{{ value }}"
    {% endfor %}
  >
    {% for tabset in tabsets %}
      <button
        type="button"
        role="tab"
        id="{{ id }}-tab-{{ loop.index }}"
        aria-controls="{{ id }}-panel-{{ loop.index }}"
        aria-selected="{{ 'true' if loop.index == default_tab_index else 'false' }}"
        tabindex="0"
        {% if tabset.tab_attrs %}
          {% for key, value in tabset.tab_attrs.items() %}
            {{ key }}="{{ value }}"
          {% endfor %}
        {% endif %}
      >
        {{ tabset.tab | safe }}
      </button>
    {% endfor %}
  </nav>

  {% for tabset in tabsets %}
    {% if tabset.panel %}
      <div
        role="tabpanel"
        id="{{ id }}-panel-{{ loop.index }}"
        aria-labelledby="{{ id }}-tab-{{ loop.index }}"
        tabindex="-1"
        aria-selected="{{ 'true' if loop.index == default_tab_index else 'false' }}"
        {% if loop.index != default_tab_index %}hidden{% endif %}
        {% if tabset.panel_attrs %}
          {% for key, value in tabset.panel_attrs.items() %}
            {{ key }}="{{ value }}"
          {% endfor %}
        {% endif %}
      >
        {{ tabset.panel | safe }}
      </div>
    {% endif %}
  {% endfor %}
</div>
{% endmacro %}