{# API #}
{%- set _autocomplete = props.autocomplete | 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 _label = props.label -%}
{%- set _unsafeLabel = props.UNSAFE_label | default(null) -%}
{%- set _name = props.name | default(null) -%}
{%- set _value = props.value | default(null) -%}
{%- set _helperText = props.helperText | default(null) -%}
{%- set _unsafeHelperText = props.UNSAFE_helperText | default(null) -%}
{%- set _validationState = props.validationState | default(null) -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'Radio' -%}
{%- set _inputClassName = _spiritClassPrefix ~ 'Radio__input' -%}
{%- set _labelClassName = _spiritClassPrefix ~ 'Radio__label' -%}
{%- set _labelHiddenClassName = _isLabelHidden ? _spiritClassPrefix ~ 'Radio__label--hidden' : null -%}
{%- set _rootDisabledClassName = _isDisabled ? _spiritClassPrefix ~ 'Radio--disabled' : null -%}
{%- set _rootItemClassName = _isItem ? _spiritClassPrefix ~ 'Radio--item' : null -%}
{%- set _textClassName = _spiritClassPrefix ~ 'Radio__text' -%}
{%- set _helperTextClassName = _spiritClassPrefix ~ 'Radio__helperText' -%}
{%- set _rootValidationStateClassName = _validationState ? _spiritClassPrefix ~ 'Radio--' ~ _validationState : null -%}

{# 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 ] -%}
{%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
{%- set _allowedInputAttributes = [ 'autocomplete' ] -%}

{# Attributes #}
{%- set _ariaDescribedByAttr = _helperTextId ? 'aria-describedby="' ~ _helperTextId ~ '"' : null -%}
{%- set _checkedAttr = _isChecked ? 'checked' : null -%}
{%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
{%- set _valueAttr = _value ? 'value=' ~ _value : null -%}
{%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
{%- set _labelForAttr = _id ? 'for="' ~ _id | escape('html_attr') ~ '"' : null -%}

<label {{ _labelForAttr | raw }} {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
    <input
        {{ inputProps(props, _allowedInputAttributes, _inputProps) }}
        type="radio"
        name="{{ _name }}"
        class="{{ _inputClassName }}"
        {{ _idAttr | raw }}
        {{ _checkedAttr }}
        {{ _disabledAttr }}
        {{ _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 }}"
        />
    </span>
</label>
