{# API #}
{%- set props = props | default([]) -%}
{%- set _helperText = props.helperText | default(null) -%}
{%- set _id = props.id -%}
{%- set _inputProps = props.inputProps | default([]) -%}
{%- set _isChecked = props.isChecked | default(false) -%}
{%- set _isDisabled = props.isDisabled | default(false) -%}
{%- set _isItem = props.isItem | default(false) -%}
{%- set _isLabelHidden = props.isLabelHidden | default(false) -%}
{%- set _isRequired = props.isRequired | default(false) -%}
{%- set _label = props.label | default(null) -%}
{%- set _name = props.name | default(null) -%}
{%- set _unsafeHelperText = props.UNSAFE_helperText | default(null) -%}
{%- set _unsafeLabel = props.UNSAFE_label | default(null) -%}
{%- set _unsafeValidationText = props.UNSAFE_validationText | default(null) -%}
{%- set _validationState = props.validationState | default(null) -%}
{%- set _validationText = props.validationText | default(null) -%}
{%- set _value = props.value | default(null) -%}

{# Class names #}
{%- set _inputClassName = _spiritClassPrefix ~ 'Checkbox__input' -%}
{%- set _labelClassName = _spiritClassPrefix ~ 'Checkbox__label' -%}
{%- set _labelHiddenClassName = _isLabelHidden ? _spiritClassPrefix ~ 'Checkbox__label--hidden' : null -%}
{%- set _labelRequiredClassName = _isRequired ? _spiritClassPrefix ~ 'Checkbox__label--required' : null -%}
{%- set _rootClassName = _spiritClassPrefix ~ 'Checkbox' -%}
{%- set _rootDisabledClassName = _isDisabled ? _spiritClassPrefix ~ 'Checkbox--disabled' : null -%}
{%- set _rootItemClassName = _isItem ? _spiritClassPrefix ~ 'Checkbox--item' : null -%}
{%- set _rootValidationStateClassName = _validationState ? _spiritClassPrefix ~ 'Checkbox--' ~ _validationState : null -%}
{%- set _textClassName = _spiritClassPrefix ~ 'Checkbox__text' -%}
{%- set _helperTextClassName = _spiritClassPrefix ~ 'Checkbox__helperText' -%}
{%- set _validationTextClassName = _spiritClassPrefix ~ 'Checkbox__validationText' -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _rootDisabledClassName, _rootItemClassName, _rootValidationStateClassName, _styleProps.className ] -%}
{%- set _helperTextId = _helperText or _unsafeHelperText ? _id ~ '-helper-text' : null -%}
{%- set _labelClassName = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
{%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
{%- set _allowedInputAttributes = [ 'autocomplete' ] -%}
{%- set _validationTextId = _validationText or _unsafeValidationText ? _id ~ '-validation-text' : null -%}

{# Attributes #}
{%- set _ariaDescribedByAttr = _helperTextId or _validationTextId ? 'aria-describedby="' ~ [ _helperTextId, _validationTextId ] | join (' ') | trim ~ '"' : null -%}
{%- set _checkedAttr = _isChecked ? 'checked' : null -%}
{%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
{%- set _nameAttr = _name ? 'name="' ~ _name | escape('html_attr') ~ '"' : null -%}
{%- set _requiredAttr = _isRequired ? 'required' : null -%}
{%- set _valueAttr = _value ? 'value=' ~ _value : null -%}

<label for="{{ _id }}" {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
    <input
        {{ inputProps(props, _allowedInputAttributes, _inputProps) }}
        type="checkbox"
        id="{{ _id }}"
        class="{{ _inputClassName }}"
        {{ _checkedAttr }}
        {{ _disabledAttr }}
        {{ _nameAttr | raw }}
        {{ _requiredAttr }}
        {{ _valueAttr }} {# Intentionally without `raw` to prevent XSS. #}
        {{ _ariaDescribedByAttr | raw }}
    />
    <span class="{{ _textClassName }}">
        <span {{ classProp(_labelClassName) }}>
            {%- if _unsafeLabel -%}
                {{ _unsafeLabel | raw }}
            {%- else -%}
                {{ _label }}
            {%- endif -%}
        </span>
        <HelperText
            className="{{ _helperTextClassName }}"
            elementType="span"
            helperText="{{ _helperText }}"
            id="{{ _helperTextId }}"
            UNSAFE_helperText="{{ _unsafeHelperText }}"
        />
        <ValidationText
            className="{{ _validationTextClassName }}"
            elementType="span"
            id="{{ _validationTextId }}"
            validationState="{{ _validationState }}"
            validationText="{{ _validationText }}"
            UNSAFE_validationText="{{ _unsafeValidationText }}"
        />
    </span>
</label>
