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

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

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

<a
    {{ mainProps(props, _allowedAttributes) }}
    {{ styleProp(_styleProps) }}
    {{ classProp(_classNames) }}
    href="{{ _href }}"
>
    {%- block content %}{% endblock %}
    {%- if _isLoading -%}
        <Spinner />
    {%- endif -%}
</a>
