{% load ui_classes ui_props %}

<c-vars value=""
        owner="ui-tabs"
        selected="False"
        disabled="False"
        href=""
        icon=""
        icon_trailing=""
        selected_icon="inherit"
        class=""
        icon_class="" />
{% ui_class "ui.tabs" "tab" class=class as tab_class %}
{% ui_class "ui.tabs" "tabLabel" as label_class %}
{% ui_class "ui.tabs" "tabIcon" class=icon_class as icon_classes %}
{% ui_class "ui.tabs" "tabSelectedIcon" class=icon_class as selected_icon_class %}

{% partialdef tab_content %}
    {% if selected_icon and selected_icon != "inherit" %}
        <span class="{{ selected_icon_class }}"
              data-ui-tabs-tab-selected-icon
              data-icon="{{ selected_icon }}"
              {% if not selected|ui_bool %}style="visibility: hidden"{% endif %}
              aria-hidden="true">
            <c-component is="icons.{{ selected_icon }}" class="{{ selected_icon_class }}">
            </c-component>
        </span>
    {% endif %}
    {% if icon %}
        <c-component is="icons.{{ icon }}"
                     class="{{ icon_classes }}"
                     data-ui-tabs-tab-icon
                     data-icon="{{ icon }}"
                     aria-hidden="true">
        </c-component>
    {% endif %}
    <c-ui.text as="span"
               size="sm"
               color="inherit"
               weight="normal"
               truncate
               class="{{ label_class }}"
               data-ui-tabs-tab-label>
        {{ slot }}
    </c-ui.text>
    {% if icon_trailing %}
        <c-component is="icons.{{ icon_trailing }}"
                     class="{{ icon_classes }}"
                     data-ui-tabs-tab-icon="trailing"
                     data-icon="{{ icon_trailing }}"
                     aria-hidden="true">
        </c-component>
    {% endif %}
{% endpartialdef %}

{% if href %}
    <a id="{{ owner }}-tab-{{ value }}"
       href="{{ href }}"
       data-ui-tabs-tab
       data-ui-interactive
       data-value="{{ value }}"
       data-ui-tabs-owner="{{ owner }}"
       data-owner="{{ owner }}"
       data-selected-icon="{{ selected_icon }}"
       data-state="{% if selected|ui_bool %}active{% else %}inactive{% endif %}"
       {% if selected|ui_bool %}data-selected{% endif %}
       {% if disabled|ui_bool %}data-disabled aria-disabled="true"{% endif %}
       role="tab"
       aria-selected="{% if selected|ui_bool %}true{% else %}false{% endif %}"
       aria-controls="{{ owner }}-panel-{{ value }}"
       tabindex="{% if selected|ui_bool %}0{% else %}-1{% endif %}"
       data-class="{{ class }}"
       class="{{ tab_class }}"
       {{ attrs }}>
        {% partial tab_content %}
    </a>
{% else %}
    <button id="{{ owner }}-tab-{{ value }}"
            type="button"
            data-ui-tabs-tab
            data-ui-interactive
            data-value="{{ value }}"
            data-ui-tabs-owner="{{ owner }}"
            data-owner="{{ owner }}"
            data-selected-icon="{{ selected_icon }}"
            data-state="{% if selected|ui_bool %}active{% else %}inactive{% endif %}"
            {% if selected|ui_bool %}data-selected{% endif %}
            {% if disabled|ui_bool %}data-disabled aria-disabled="true" disabled{% endif %}
            role="tab"
            aria-selected="{% if selected|ui_bool %}true{% else %}false{% endif %}"
            aria-controls="{{ owner }}-panel-{{ value }}"
            tabindex="{% if selected|ui_bool %}0{% else %}-1{% endif %}"
            data-class="{{ class }}"
            class="{{ tab_class }}"
            {{ attrs }}>
        {% partial tab_content %}
    </button>
{% endif %}