{# API #}
{%- set props = props | default([]) -%}
{%- set _ariaTarget = props.ariaTarget | default(null) -%}
{%- set _href = props.href | default(null) -%}
{%- set _isSelected = props.isSelected | default(false) -%}
{%- set _targetPaneId = props.targetPaneId | default(null) -%}

{# Class names #}
{%- set _isSelectedClassName = _isSelected ? 'is-selected' : null -%}
{%- set _rootClassName = _spiritClassPrefix ~ 'Tabs__link' -%}

{# Attributes #}
{%- set _ariaControlsAttr = _targetPaneId ? 'aria-controls="' ~ _targetPaneId | escape('html_attr') ~ '"' : null -%}
{%- set _dataTargetAttr = _targetPaneId ? 'data-spirit-target="#' ~ _targetPaneId | escape('html_attr') ~ '"' : null -%}
{%- set _roleAttr = _href ? 'role="tab"' : null -%}
{%- set _typeAttr = _href ? null : 'type="button"' -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _ariaSelected = _isSelected ? 'true' : 'false' -%}
{%- set _classNames = [ _rootClassName, _isSelectedClassName, _styleProps.className ] -%}
{%- set _elementType = _href ? 'a' : 'button' -%}
{%- set _allowedAttributes = _href ? [ 'href' ] : [] -%}

<{{ _elementType }}
    {{ mainProps(props, _allowedAttributes) }}
    {{ styleProp(_styleProps) }}
    {{ classProp(_classNames) }}
    aria-selected="{{ _ariaSelected }}"
    {{ _ariaControlsAttr | raw }}
    {{ _dataTargetAttr | raw }}
    {{ _roleAttr | raw }}
    {{ _typeAttr | raw }}
>
    {% block content %}{% endblock %}
</{{ _elementType }}>
