{% load ui_classes ui_props ui_preferences %}

<c-vars id="" as="section" size="fill" resize="none" collapsible="False" default_collapsed="False" class="" style="" />
{% ui_panel_preference id collapsible default_collapsed size as preference %}
{% 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 }}"
          {% if preference.size %}data-preferred-size="{{ preference.size }}"{% endif %}
          {% if style or preference.size %}style="{{ style }}{% if preference.size %}; --ui-panel-preferred-size: {{ preference.size }}px{% endif %}"{% endif %}
          data-class="{{ class }}"
          data-state="{% if preference.collapsed %}collapsed{% else %}expanded{% endif %}"
          {% if collapsed %}data-has-collapsed{% endif %}
          class="{{ panel_class }}"
          {{ attrs }}>
    <div data-ui-panel-expanded
         {% if preference.collapsed %}hidden inert aria-hidden="true"{% else %}aria-hidden="false"{% endif %}
         class="{{ expanded_class }}">{{ slot }}</div>
    {% if collapsed %}
        <div data-ui-panel-collapsed
             {% if not preference.collapsed %}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
              {% if preference.collapsed %}hidden data-resize-disabled aria-disabled="true"{% endif %}
              data-resize-edge="{{ resize }}"
              data-class=""
              role="separator"
              tabindex="0"
              aria-label="Resize {{ id }} panel"
              class="{{ resize_handle_class }}"></span>
    {% endif %}
</{{ as }}>