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

<c-vars id="ui-panels" orientation="horizontal" persist="False" divider="True" class="" />
{% ui_class "ui.panels" "root" orientation=orientation class=class as root_class %}
<div id="{{ id }}"
     x-data="UiPanels"
     x-bind="root"
     {% if "x-ui-transition:opening" not in attrs %}x-ui-transition:opening="transitionPanel($transition)"{% endif %}
     {% if "x-ui-transition:closing" not in attrs %}x-ui-transition:closing="transitionPanel($transition)"{% endif %}
     {% if "x-ui-transition:sizing" not in attrs %}x-ui-transition:sizing="transitionPanelSize($transition)"{% endif %}
     data-ui-panels
     data-id="{{ id }}"
     data-orientation="{{ orientation }}"
     data-persist="{{ persist }}"
     data-divider="{{ divider }}"
     data-class="{{ class }}"
     class="{{ root_class }}"
     {{ attrs }}>
    {{ slot }}
</div>