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

<c-vars name=""
        orientation="vertical"
        variant="default"
        color="neutral"
        interaction=""
        indicator="True"
        placement="leading"
        disabled="False"
        required="False"
        invalid="False"
        class="" />
{% ui_class "ui.checkbox" "group" orientation=orientation variant=variant class=class as group_class %}
<div x-data="UiCheckboxGroup"
     data-ui-checkbox-group
     {% if variant == "menu" %}data-ui-menu-group{% endif %}
     data-ui-control-target
     data-orientation="{{ orientation }}"
     data-variant="{{ variant }}"
     {% if variant == "cards" or variant == "pills" %}data-ui-selection-color data-color="{{ color }}" data-interaction="{% if interaction %}{{ interaction }}{% elif variant == "cards" %}combined{% else %}tonal{% endif %}"{% endif %}
     data-placement="{{ placement }}"
     {% if not indicator|ui_bool %}data-indicator="false"{% endif %}
     {% if name %}data-name="{{ name }}"{% endif %}
     {% if disabled|ui_bool %}data-prop-disabled{% endif %}
     {% if required|ui_bool %}data-prop-required{% endif %}
     {% if invalid|ui_bool %}data-prop-invalid{% endif %}
     {% if disabled|ui_bool %}data-disabled{% endif %}
     {% if required|ui_bool %}data-required{% endif %}
     {% if invalid|ui_bool %}data-invalid{% endif %}
     role="group"
     class="{{ group_class }}"
     {{ attrs }}>
    {{ slot }}
</div>