{# API #}
{%- set props = props | default([]) -%}
{%- set _color = props.color | default('primary') -%}
{%- set _size = props.size | default('medium') -%}
{%- set _isBlock = props.isBlock | default(false) -%}
{%- set _isDisabled = props.isDisabled | default(false) -%}
{%- set _isLoading = props.isLoading | default(false) -%}
{%- set _isSymmetrical = props.isSymmetrical | default(false) -%}
{%- set _type = props.type | default('button') -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'Button' -%}
{%- set _rootBlockClassName = _isBlock ? _spiritClassPrefix ~ 'Button--block' : null -%}
{%- set _rootColorClassName = _spiritClassPrefix ~ 'Button--' ~ _color -%}
{%- set _rootLoadingClassName = _isLoading ? _spiritClassPrefix ~ 'Button--loading' : null -%}
{%- set _rootSizeClassName = _spiritClassPrefix ~ 'Button--' ~ _size -%}
{%- set _rootSymmetricalClassName = _isSymmetrical ? _spiritClassPrefix ~ 'Button--symmetrical' : null -%}

{# Attributes #}
{%- set _disabledAttr = _isDisabled or _isLoading ? 'disabled' : null -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootSizeClassName, _rootBlockClassName, _rootLoadingClassName, _rootSymmetricalClassName, _styleProps.className ] -%}
{%- set _allowedAttributes = [ 'formtarget', 'name' ] -%}

<button
    {{ mainProps(props, _allowedAttributes) }}
    {{ styleProp(_styleProps) }}
    {{ classProp(_classNames) }}
    type="{{ _type }}"
    {{ _disabledAttr }}
>
    {%- block content %}{% endblock %}
    {%- if _isLoading -%}
        <Spinner isReusable={ false } />
    {%- endif -%}
</button>
