{% load ui_classes ui_props %}

<c-vars heading="" expandable="False" expanded="True" icon="" class="" />
{% ui_class "ui.sidebar" "group" class=class as group_class %}
{% if heading_actions %}
    {% ui_class "ui.sidebar" "groupSummary" hasActions=True as summary_class %}
{% else %}
    {% ui_class "ui.sidebar" "groupSummary" hasActions=False as summary_class %}
{% endif %}
{% ui_class "ui.sidebar" "groupHeading" as heading_class %}
{% ui_class "ui.sidebar" "groupSummaryInner" as summary_inner_class %}
{% ui_class "ui.sidebar" "groupIcon" as icon_class %}
{% ui_class "ui.sidebar" "groupLabel" as label_class %}
{% ui_class "ui.sidebar" "groupHeadingLabel" as heading_label_class %}
{% ui_class "ui.sidebar" "groupActions" as actions_class %}
{% ui_class "ui.sidebar" "groupContent" as content_class %}
{% if expandable|ui_bool %}
    <details class="{{ group_class }} group/sidebar-group"
             data-ui-sidebar-group
             {% if expanded|ui_bool %}open data-state="open"{% else %}data-state="closed"{% endif %}
             {{ attrs }}>
        <summary class="{{ summary_class }}" data-ui-sidebar-group-trigger>
            <span class="{{ summary_inner_class }}" data-ui-sidebar-group-trigger-inner>
                {% if icon %}
                    <c-component is="icons.{{ icon }}"
                                 class="{{ icon_class }}"
                                 data-ui-sidebar-group-icon
                                 data-icon="{{ icon }}"
                                 aria-hidden="true" />
                {% else %}
                    <c-component is="icons.chevron__right"
                                 class="{{ icon_class }}"
                                 data-ui-sidebar-group-icon
                                 data-icon="chevron__right"
                                 aria-hidden="true" />
                {% endif %}
                <c-ui.text as="span"
                           size="xs"
                           weight="medium"
                           color="inherit"
                           truncate
                           class="{{ label_class }}">
                    {{ heading }}
                </c-ui.text>
                {% if heading_actions %}
                    <span class="{{ actions_class }}" data-ui-sidebar-group-actions>{{ heading_actions }}</span>
                {% endif %}
            </span>
        </summary>
        <div class="{{ content_class }}" data-ui-sidebar-group-content>{{ slot }}</div>
    </details>
{% else %}
    <section class="{{ group_class }}" data-ui-sidebar-group {{ attrs }}>
        {% if heading or heading_actions %}
            <div class="{{ heading_class }}" data-ui-sidebar-group-heading>
                {% if heading %}
                    <c-ui.text as="h2"
                               size="xs"
                               color="muted"
                               weight="medium"
                               truncate
                               class="{{ heading_label_class }}">
                        {{ heading }}
                    </c-ui.text>
                {% endif %}
                {% if heading_actions %}
                    <div class="{{ actions_class }}" data-ui-sidebar-group-actions>{{ heading_actions }}</div>
                {% endif %}
            </div>
        {% endif %}
        <div class="{{ content_class }}" data-ui-sidebar-group-content>{{ slot }}</div>
    </section>
{% endif %}