{% load ui_classes ui_props %}

<c-vars id="" as="section" size="fill" resize="none" collapsible="False" default_collapsed="False" class="" />
{% ui_class "ui.panels" "panel" orientation="horizontal" divider=True resize=resize class=class as panel_class %}
{% ui_class "ui.panels" "expanded" as expanded_class %}
{% ui_class "ui.panels" "collapsed" as collapsed_class %}
{% ui_class "ui.panels" "resizeHandle" orientation="horizontal" edge=resize as resize_handle_class %}
<{{ as }} id="{{ id }}"
          data-ui-panel
          data-id="{{ id }}"
          data-size="{{ size }}"
          data-resize="{{ resize }}"
          data-collapsible="{{ collapsible }}"
          data-default-collapsed="{{ default_collapsed }}"
          data-class="{{ class }}"
          data-state="{% if default_collapsed|ui_bool %}collapsed{% else %}expanded{% endif %}"
          {% if collapsed %}data-has-collapsed{% endif %}
          class="{{ panel_class }}"
          {{ attrs }}>
    <div data-ui-panel-expanded
         {% if default_collapsed|ui_bool %}hidden inert aria-hidden="true"{% else %}aria-hidden="false"{% endif %}
         class="{{ expanded_class }}">{{ slot }}</div>
    {% if collapsed %}
        <div data-ui-panel-collapsed
             {% if not default_collapsed|ui_bool %}hidden inert aria-hidden="true"{% else %}aria-hidden="false"{% endif %}
             class="{{ collapsed_class }}">{{ collapsed }}</div>
    {% endif %}
    {% if resize != "none" %}
        <span data-ui-panel-resize-handle
              data-ui-resize-handle
              data-resize-edge="{{ resize }}"
              data-class=""
              role="separator"
              tabindex="0"
              aria-label="Resize {{ id }} panel"
              class="{{ resize_handle_class }}"></span>
    {% endif %}
</{{ as }}>