{# API #}
{%- set props = props | default([]) -%}
{%- set _closeLabel = props.closeLabel | default('Close') -%}
{%- set _enableDismiss = props.enableDismiss ?? true -%}
{%- set _hasCloseButton = props.hasCloseButton ?? true -%}
{%- set _modalId = props.modalId -%}
{%- set _titleId = props.titleId | default(null) -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'ModalHeader' -%}
{%- set _titleClassName = _spiritClassPrefix ~ 'ModalHeader__title' -%}

{# Attributes #}
{%- set _titleIdAttr = _titleId ? 'id="' ~ _titleId | escape('html_attr') ~ '"' : null -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}

<header
    {{ mainProps(props) }}
    {{ styleProp(_styleProps) }}
    {{ classProp(_classNames) }}
>
    {% if block('content') is not empty %}
        <h2
            class="{{ _titleClassName }}"
            {{ _titleIdAttr | raw }}
        >
            {% block content %}{% endblock %}
        </h2>
    {% endif %}
    {% if _hasCloseButton is same as(true) %}
        <Button
            aria-controls="{{ _modalId }}"
            aria-expanded="false"
            color="tertiary"
            data-spirit-dismiss="{{ _enableDismiss ? 'modal' : null }}"
            data-spirit-target="{{ _enableDismiss ? '#' ~ _modalId : null }}"
            isSymmetrical
        >
            <Icon name="close" />
            <VisuallyHidden>{{ _closeLabel }}</VisuallyHidden>
        </Button>
    {% endif %}
</header>
