{% load ui_classes ui_props %}

<c-vars value="on"
        name=""
        label=""
        description=""
        checked="False"
        disabled="False"
        required="False"
        invalid="False"
        placement="trailing"
        variant="default"
        size="md"
        input_class=""
        track_class=""
        thumb_class=""
        content_class=""
        label_class=""
        description_class=""
        class="" />
{% ui_class "ui.switch" "switch" placement=placement variant=variant size=size class=class as switch_class %}
{% ui_class "ui.switch" "input" class=input_class as input_class_resolved %}
{% ui_class "ui.switch" "control" size=size as control_class_resolved %}
{% ui_class "ui.switch" "track" size=size class=track_class as track_class_resolved %}
{% ui_class "ui.switch" "thumb" size=size class=thumb_class as thumb_class_resolved %}
{% ui_class "ui.switch" "content" class=content_class as content_class_resolved %}
{% ui_class "ui.switch" "label" class=label_class as label_class_resolved %}
{% ui_class "ui.switch" "description" class=description_class as description_class_resolved %}
<label x-data="UiSwitch"
       data-ui-switch
       data-placement="{{ placement }}"
       data-variant="{{ variant }}"
       data-size="{{ size }}"
       {% if name %}data-name="{{ name }}"{% endif %}
       {% if value %}data-value="{{ value }}"{% endif %}
       {% if 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="{{ switch_class }}">
    {% if placement == "leading" %}
        <span data-ui-switch-control class="{{ control_class_resolved }}">
            <input type="checkbox"
                   role="switch"
                   data-ui-switch-input
                   data-state="{% if checked|ui_bool %}checked{% else %}unchecked{% endif %}"
                   class="{{ input_class_resolved }}"
                   {% if name %}name="{{ name }}"{% endif %}
                   {% if value %}value="{{ value }}"{% endif %}
                   {% if checked|ui_bool %}checked data-checked aria-checked="true"{% else %}aria-checked="false"{% endif %}
                   {% if disabled|ui_bool %}disabled{% endif %}
                   {% if required|ui_bool %}required{% endif %}
                   {% if invalid|ui_bool %}aria-invalid="true"{% endif %}
                   {{ attrs }}>
            <span data-ui-switch-track
                  data-state="{% if checked|ui_bool %}checked{% else %}unchecked{% endif %}"
                  {% if checked|ui_bool %}data-checked{% endif %}
                  {% if invalid|ui_bool %}data-invalid{% endif %}
                  class="{{ track_class_resolved }}"
                  aria-hidden="true">
                <span data-ui-switch-thumb
                      data-state="{% if checked|ui_bool %}checked{% else %}unchecked{% endif %}"
                      {% if checked|ui_bool %}data-checked{% endif %}
                      class="{{ thumb_class_resolved }}"></span>
            </span>
        </span>
    {% endif %}
    {% if label or description %}
        <span data-ui-switch-content class="{{ content_class_resolved }}">
            {% if label %}
                <c-ui.text color="inherit"
                           weight="medium"
                           class="{{ label_class_resolved }}"
                           data-ui-switch-label>
                    {{ label }}
                </c-ui.text>
            {% endif %}
            {% if description %}
                <c-ui.text color="muted"
                           size="sm"
                           class="{{ description_class_resolved }}"
                           data-ui-switch-description>
                    {{ description }}
                </c-ui.text>
            {% endif %}
        </span>
    {% else %}
        {{ slot }}
    {% endif %}
    {% if placement != "leading" %}
        <span data-ui-switch-control class="{{ control_class_resolved }}">
            <input type="checkbox"
                   role="switch"
                   data-ui-switch-input
                   data-state="{% if checked|ui_bool %}checked{% else %}unchecked{% endif %}"
                   class="{{ input_class_resolved }}"
                   {% if name %}name="{{ name }}"{% endif %}
                   {% if value %}value="{{ value }}"{% endif %}
                   {% if checked|ui_bool %}checked data-checked aria-checked="true"{% else %}aria-checked="false"{% endif %}
                   {% if disabled|ui_bool %}disabled{% endif %}
                   {% if required|ui_bool %}required{% endif %}
                   {% if invalid|ui_bool %}aria-invalid="true"{% endif %}
                   {{ attrs }}>
            <span data-ui-switch-track
                  data-state="{% if checked|ui_bool %}checked{% else %}unchecked{% endif %}"
                  {% if checked|ui_bool %}data-checked{% endif %}
                  {% if invalid|ui_bool %}data-invalid{% endif %}
                  class="{{ track_class_resolved }}"
                  aria-hidden="true">
                <span data-ui-switch-thumb
                      data-state="{% if checked|ui_bool %}checked{% else %}unchecked{% endif %}"
                      {% if checked|ui_bool %}data-checked{% endif %}
                      class="{{ thumb_class_resolved }}"></span>
            </span>
        </span>
    {% endif %}
</label>