{% load ui_classes ui_props %}

<c-vars value="on"
        name=""
        label=""
        description=""
        checked="False"
        indeterminate="False"
        disabled="False"
        required="False"
        invalid="False"
        indicator="True"
        placement="leading"
        icon=""
        variant="default"
        size="md"
        input_class=""
        indicator_class=""
        indicator_icon_class=""
        icon_class=""
        content_class=""
        label_class=""
        description_class=""
        class="" />
{% ui_class "ui.checkbox" "checkbox" variant=variant size=size class=class as checkbox_class %}
{% ui_class "ui.checkbox" "input" class=input_class as input_class_resolved %}
{% ui_class "ui.checkbox" "indicator" size=size class=indicator_class as indicator_class_resolved %}
{% ui_class "ui.checkbox" "indicatorIcon" class=indicator_icon_class as indicator_icon_class_resolved %}
{% ui_class "ui.checkbox" "icon" class=icon_class as icon_class_resolved %}
{% ui_class "ui.checkbox" "content" class=content_class as content_class_resolved %}
{% ui_class "ui.checkbox" "label" class=label_class as label_class_resolved %}
{% ui_class "ui.checkbox" "description" class=description_class as description_class_resolved %}
<label x-data="UiCheckbox"
       data-ui-checkbox
       data-variant="{{ variant }}"
       data-size="{{ size }}"
       data-placement="{{ placement }}"
       {% if not indicator|ui_bool %}data-indicator="false"{% endif %}
       {% if name %}data-name="{{ name }}"{% endif %}
       {% if value %}data-value="{{ value }}"{% endif %}
       {% if indeterminate|ui_bool %}data-indeterminate data-state="indeterminate"{% elif checked|ui_bool %}data-checked data-state="checked"{% else %}data-state="unchecked"{% endif %}
       {% if disabled|ui_bool %}data-disabled{% endif %}
       {% if required|ui_bool %}data-required{% endif %}
       {% if invalid|ui_bool %}data-invalid{% endif %}
       class="{{ checkbox_class }}">
    <input type="checkbox"
           data-ui-checkbox-input
           x-bind:name="props.name || null"
           x-bind:value="props.value || null"
           x-bind:disabled="props.disabled"
           x-bind:required="props.required"
           x-bind:aria-invalid="props.invalid ? 'true' : null"
           class="{{ input_class_resolved }}"
           {% if name %}name="{{ name }}"{% endif %}
           {% if value %}value="{{ value }}"{% endif %}
           {% if checked|ui_bool %}checked data-checked{% endif %}
           {% if indeterminate|ui_bool %}data-indeterminate aria-checked="mixed"{% endif %}
           {% if disabled|ui_bool %}disabled{% endif %}
           {% if required|ui_bool %}required{% endif %}
           {% if invalid|ui_bool %}aria-invalid="true"{% endif %}
           {{ attrs }}>
    {% if indicator|ui_bool %}
        <span data-ui-checkbox-indicator
              x-bind:data-disabled="props.disabled ? '' : null"
              x-bind:data-invalid="props.invalid ? '' : null"
              {% if indeterminate|ui_bool %}data-indeterminate data-state="indeterminate"{% elif checked|ui_bool %}data-checked data-state="checked"{% else %}data-state="unchecked"{% endif %}
              {% if disabled|ui_bool %}data-disabled{% endif %}
              {% if invalid|ui_bool %}data-invalid{% endif %}
              class="{{ indicator_class_resolved }}"
              aria-hidden="true">
            <c-component is="icons.checkmark"
                         data-ui-checkbox-indicator-icon="checked"
                         {% if checked|ui_bool and not indeterminate|ui_bool %}data-checked{% endif %}
                         class="{{ indicator_icon_class_resolved }}"
                         aria-hidden="true" />
            <c-component is="icons.subtract"
                         data-ui-checkbox-indicator-icon="indeterminate"
                         {% if indeterminate|ui_bool %}data-indeterminate{% endif %}
                         class="{{ indicator_icon_class_resolved }}"
                         aria-hidden="true" />
        </span>
    {% endif %}
    {% if icon %}
        <c-component is="icons.{{ icon }}"
                     data-ui-checkbox-icon
                     data-icon="{{ icon }}"
                     class="{{ icon_class_resolved }}"
                     aria-hidden="true" />
    {% endif %}
    {% if label or description %}
        <span data-ui-checkbox-content class="{{ content_class_resolved }}">
            {% if label %}
                <c-ui.text color="inherit"
                           weight="medium"
                           class="{{ label_class_resolved }}"
                           data-ui-checkbox-label>
                    {{ label }}
                </c-ui.text>
            {% endif %}
            {% if description %}
                <c-ui.text color="muted"
                           size="sm"
                           class="{{ description_class_resolved }}"
                           data-ui-checkbox-description>
                    {{ description }}
                </c-ui.text>
            {% endif %}
        </span>
    {% else %}
        {{ slot }}
    {% endif %}
</label>