{% load ui_classes ui_props %}

<c-vars value=""
        owner="ui-tabs"
        selected="False"
        force_mount="True"
        class=""
        content_class="" />
{% ui_class "ui.tabs" "panel" class=class as panel_class %}
{% ui_class "ui.tabs" "panelInner" class=content_class as panel_inner_class %}
{% if force_mount|ui_bool or selected|ui_bool %}
    <div id="{{ owner }}-panel-{{ value }}"
         data-ui-tabs-panel
         data-ui-tabs-owner="{{ owner }}"
         data-owner="{{ owner }}"
         data-value="{{ value }}"
         data-ui-key="{{ owner }}-panel-{{ value }}"
         data-state="{% if selected|ui_bool %}active{% else %}inactive{% endif %}"
         {% if selected|ui_bool %}data-selected{% else %}hidden{% endif %}
         role="tabpanel"
         aria-labelledby="{{ owner }}-tab-{{ value }}"
         tabindex="0"
         data-class="{{ class }}"
         class="{{ panel_class }}"
         {{ attrs }}>
        <div data-ui-tabs-panel-inner class="{{ panel_inner_class }}">{{ slot }}</div>
    </div>
{% endif %}