{% load ui_classes ui_props %}

<c-vars variant="line"
        color="neutral"
        interaction="tonal"
        size="md"
        orientation="inherit"
        gap="auto"
        label=""
        :scrollable="False"
        selected_icon=""
        class="" />
{% if orientation == "inherit" %}
    {% ui_class "ui.tabs" "list" variant=variant size=size orientation="horizontal" gap=gap scrollable=scrollable|ui_bool class=class as list_class %}
    {% ui_class "ui.tabs" "indicator" variant=variant orientation="horizontal" as indicator_class %}
{% else %}
    {% ui_class "ui.tabs" "list" variant=variant size=size orientation=orientation gap=gap scrollable=scrollable|ui_bool class=class as list_class %}
    {% ui_class "ui.tabs" "indicator" variant=variant orientation=orientation as indicator_class %}
{% endif %}
<div data-ui-tabs-list
     role="tablist"
     data-variant="{{ variant }}"
     {% if variant != "segmented" %}data-ui-selection-color data-color="{{ color }}"{% endif %}
     {% if variant == "pills" %}data-interaction="{{ interaction }}"{% endif %}
     data-size="{{ size }}"
     data-orientation="{{ orientation }}"
     data-gap="{{ gap }}"
     data-selected-icon="{{ selected_icon }}"
     {% if scrollable|ui_bool %}data-scrollable{% endif %}
     {% if label %}aria-label="{{ label }}"{% endif %}
     {% if orientation == "vertical" %}aria-orientation="vertical"{% endif %}
     class="{{ list_class }}"
     {{ attrs }}>
    {{ slot }}
    <span data-ui-tabs-indicator
          {% if variant == "subtle" or variant == "pills" %}data-ui-interaction="{% if variant == "pills" %}{{ interaction }}{% else %}tonal{% endif %}" data-color="{{ color }}" data-selected="true"{% endif %}
          class="{{ indicator_class }}"
          aria-hidden="true"
          hidden></span>
</div>