{% load ui_assets ui_classes ui_props %}
{% ui_require_asset "trellis:tabs" %}

<c-vars id="ui-tabs"
        animate="False"
        default_value=""
        value=""
        activation="manual"
        orientation="horizontal"
        gap="auto"
        loop="True"
        panels=""
        class="" />
{% ui_class "ui.tabs" "root" orientation=orientation gap=gap class=class as root_class %}
<div id="{{ id }}"
     x-data="UiTabs"
     x-bind="root"
     data-ui-tabs
     {% if animate|ui_bool %}data-animate{% endif %}
     data-id="{{ id }}"
     data-default-value="{{ default_value }}"
     data-value="{{ value }}"
     data-activation="{{ activation }}"
     data-orientation="{{ orientation }}"
     data-gap="{{ gap }}"
     data-loop="{{ loop }}"
     data-panels="{{ panels }}"
     {% if "x-ui-transition:switching" not in attrs %}x-ui-transition:switching="transitionIndicator($transition)"{% endif %}
     class="{{ root_class }}"
     {{ attrs }}>
    {{ slot }}
</div>