{# API #}
{%- set props = props | default([]) -%}
{%- set _closeLabel = props.closeLabel | default('Close') -%}
{%- set _enableFlipping = props.enableFlipping ?? true -%}
{%- set _enableFlippingCrossAxis = props.enableFlippingCrossAxis ?? true -%}
{%- set _enableShifting = props.enableShifting ?? true -%}
{%- set _enableSizing = props.enableSizing ?? true -%}
{%- set _flipFallbackAxisSideDirection = props.flipFallbackAxisSideDirection | default(null) -%}
{%- set _flipFallbackPlacements = props.flipFallbackPlacements | default(null) -%}
{%- set _id = props.id | default(null) -%}
{%- set _isDismissible = props.isDismissible | default(false) -%}
{%- set _isOpen = props.isOpen | default(false) -%}
{%- set _placement = props.placement | default('bottom') -%}
{%- set _trigger = props.trigger | default('click, hover') -%}

{# Class names #}
{%- set _arrowClassName = _spiritClassPrefix ~ 'TooltipPopover__arrow' -%}
{%- set _closeClassName = _spiritClassPrefix ~ 'TooltipPopover__close' -%}
{%- set _isOpenClassName = _isOpen ? '' : 'is-hidden' -%}
{%- set _rootClassName = _spiritClassPrefix ~ 'TooltipPopover' -%}
{%- set _rootDismissibleClassName = _isDismissible is same as(true) ? _spiritClassPrefix ~ 'TooltipPopover--dismissible' : null -%}

{# Attributes #}
{%- set _enableFlippingValue = _enableFlipping ? 'true' : 'false' -%}
{%- set _enableFlippingCrossAxisValue = _enableFlippingCrossAxis ? 'true' : 'false' -%}
{%- set _enableShiftingValue = _enableShifting ? 'true' : 'false' -%}
{%- set _enableSizingValue = _enableSizing ? 'true' : 'false' -%}

{%- set _ariaControlsAttr = _id ? 'aria-controls="' ~ _id | escape('html_attr') ~ '"' : null -%}
{%- set _dataEnableFlippingAttr = 'data-spirit-enable-flipping="' ~ _enableFlippingValue ~ '"' -%}
{%- set _dataEnableFlippingCrossAxisAttr = 'data-spirit-enable-flipping-cross-axis="' ~ _enableFlippingCrossAxisValue ~ '"' -%}
{%- set _dataEnableShiftingAttr = 'data-spirit-enable-shifting="' ~ _enableShiftingValue ~ '"'-%}
{%- set _dataEnableSizingAttr = 'data-spirit-enable-sizing="' ~ _enableSizingValue ~ '"' -%}
{%- set _dataFillFallbackAxisSideDirectionAttr = _flipFallbackAxisSideDirection ? 'data-spirit-flip-fallback-axis-side-direction="' ~ _flipFallbackAxisSideDirection | escape('html_attr') ~ '"' : null -%}
{%- set _dataFlipFallbackPlacementsAttr = _flipFallbackPlacements ? 'data-spirit-flip-fallback-placements="' ~ _flipFallbackPlacements | escape('html_attr') ~ '"' : null -%}
{%- set _dataPlacementAttr = _placement ? 'data-spirit-placement="' ~ _placement | escape('html_attr') ~ '"' : null -%}
{%- set _dataTargetAttr = _id ? 'data-spirit-target="#' ~ _id | escape('html_attr') ~ '"' : null -%}
{%- set _dataTriggerAttr = 'data-spirit-trigger="' ~ _trigger ~ '"' -%}
{%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _rootDismissibleClassName, _isOpenClassName, _styleProps.className ] -%}
{%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}

<div
    {{ mainProps(_mainPropsWithoutId) }}
    {{ styleProp(_styleProps) }}
    {{ classProp(_classNames) }}
    {{ _idAttr | raw }}
    {{ _dataPlacementAttr | raw }}
    {{ _dataEnableFlippingAttr | raw }}
    {{ _dataEnableFlippingCrossAxisAttr | raw }}
    {{ _dataFillFallbackAxisSideDirectionAttr | raw }}
    {{ _dataFlipFallbackPlacementsAttr | raw }}
    {{ _dataEnableShiftingAttr | raw }}
    {{ _dataEnableSizingAttr | raw }}
    {{ _dataTriggerAttr | raw }}
>
    {% block content %}{% endblock %}
    {% if _isDismissible is same as(true) %}
        <button
            type="button"
            class="{{ _closeClassName }}"
            data-spirit-dismiss="tooltip"
            {{ _ariaControlsAttr | raw }}
            {{ _dataTargetAttr | raw }}
            aria-expanded="true"
        >
            <Icon name="close" aria-hidden="true" />
            <VisuallyHidden>{{ _closeLabel }}</VisuallyHidden>
        </button>
    {% endif %}
    <span class="{{ _arrowClassName }}" data-spirit-element="arrow"></span>
</div>
