{# API #}
{%- set props = props | default([]) -%}
{%- set _helperText = props.helperText | default(null) -%}
{%- set _id = props.id -%}
{%- set _inputProps = props.inputProps | default([]) -%}
{%- set _isDisabled = props.isDisabled | default(false) -%}
{%- set _isFluid = props.isFluid | 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) -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'Select' -%}
{%- set _rootFluidClassName = _isFluid ? _spiritClassPrefix ~ 'Select--fluid' : null -%}
{%- set _rootDisabledClassName = _isDisabled ? _spiritClassPrefix ~ 'Select--disabled' : null -%}
{%- set _rootValidationStateClassName = _validationState ? _spiritClassPrefix ~ 'Select--' ~ _validationState : null -%}
{%- set _labelClassName = _spiritClassPrefix ~ 'Select__label' -%}
{%- set _labelHiddenClassName = _isLabelHidden ? _spiritClassPrefix ~ 'Select__label--hidden' : null -%}
{%- set _labelRequiredClassName = _isRequired ? _spiritClassPrefix ~ 'Select__label--required' : null -%}
{%- set _inputClassName = _spiritClassPrefix ~ 'Select__input' -%}
{%- set _containerClassName = _spiritClassPrefix ~ 'Select__inputContainer' -%}
{%- set _iconClassName = _spiritClassPrefix ~ 'Select__icon' -%}
{%- set _validationTextClassName = _spiritClassPrefix ~ 'Select__validationText' -%}
{%- set _helperTextClassName = _spiritClassPrefix ~ 'Select__helperText' -%}

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

{# Attributes #}
{%- set _ariaDescribedByAttr = _helperTextId or _validationTextId ? 'aria-describedby="' ~ [ _helperTextId, _validationTextId ] | join (' ') | trim ~ '"' : null -%}
{%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
{%- set _requiredAttr = _isRequired ? 'required' : null -%}

<div {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
    <label for="{{ _id }}" {{ classProp(_labelClassNames) }}>
        {%- if _unsafeLabel %}{{ _unsafeLabel | raw }}{% else %}{{ _label }}{% endif -%}
    </label>
    <div class="{{ _containerClassName }}">
        <select
            {{ inputProps([], [], _inputProps) }}
            id="{{ _id }}"
            name="{{ _name }}"
            class="{{ _inputClassName }}"
            {{ _disabledAttr }}
            {{ _requiredAttr }}
            {{ _ariaDescribedByAttr | raw }}
        >
            {%- block content %}{% endblock -%}
        </select>
        <div class="{{ _iconClassName }}">
            <Icon name="chevron-down" />
        </div>
    </div>
    <HelperText
        className="{{ _helperTextClassName }}"
        helperText="{{ _helperText }}"
        id="{{ _helperTextId }}"
        UNSAFE_helperText="{{ _unsafeHelperText }}"
    />
    <ValidationText
        className="{{ _validationTextClassName }}"
        id="{{ _validationTextId }}"
        validationState="{{ _validationState }}"
        validationText="{{ _validationText }}"
        UNSAFE_validationText="{{ _unsafeValidationText }}"
    />
</div>
