{# API #}
{%- set props = props | default([]) -%}
{%- set _id = props.id -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'HeaderDialog' -%}
{%- set _panelClassName = _spiritClassPrefix ~ 'HeaderDialog__panel' -%}
{%- set _contentClassName = _spiritClassPrefix ~ 'HeaderDialog__content' -%}

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

<dialog
    {{ mainProps(_mainPropsWithoutId) }}
    {{ styleProp(_styleProps) }}
    {{ classProp(_classNames) }}
    id="{{ _id }}"
>
    <div class="{{ _panelClassName }}">
        <div class="{{ _contentClassName }}">
            {% block content %}{% endblock %}
        </div>
    </div>
</dialog>
