{# API #}
{%- set props = props | default([]) -%}
{%- set _elementType = props.elementType | default('article') -%}
{%- set _height = props.height | default(null) -%}
{%- set _isDockedOnMobile = props.isDockedOnMobile | default(false) -%}
{%- set _isExpandedOnMobile = props.isExpandedOnMobile | default(false) -%}
{%- set _isScrollable = props.isScrollable | default(false) -%}
{%- set _maxHeight = props.maxHeight | default(null) -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'ModalDialog' -%}
{%- set _rootDockOnMobileClassName = _isDockedOnMobile ? _spiritClassPrefix ~ 'ModalDialog--dockOnMobile' : null -%}
{%- set _rootExpandOnMobileClassName = _isExpandedOnMobile ? _spiritClassPrefix ~ 'ModalDialog--expandOnMobile' : null -%}
{%- set _rootScrollableClassName = _isScrollable ? _spiritClassPrefix ~ 'ModalDialog--scrollable' : null -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _rootDockOnMobileClassName, _rootExpandOnMobileClassName, _rootScrollableClassName, _styleProps.className ] -%}
{%- set _allowedAttributes = _elementType == 'form' ? [
    'accept-charset',
    'action',
    'autocomplete',
    'enctype',
    'method',
    'name',
    'novalidate',
    'rel',
    'target'
] : [] -%}

{%- set _style = '' -%}
{%- set heightProps = {
    'maxHeight': _maxHeight,
    'height': _height
} -%}
{%- for key, value in heightProps -%}
    {%- if value -%}
        {%- set infix = (key == 'maxHeight') ? 'max-' : '' -%}
        {%- set styleVariable = 'modal-dialog-' ~ infix ~ 'height' -%}

        {%- if value is iterable -%}
            {%- for breakpoint, breakpointValue in value -%}
                {%- if breakpointValue -%}
                    {%- set suffix = (breakpoint == 'mobile') ? '' : '-' ~ breakpoint -%}
                    {%- set _style = _style ~ '--' ~ styleVariable ~ suffix ~ ': ' ~ breakpointValue ~ ';' -%}
                {%- endif -%}
            {%- endfor -%}
        {%- else -%}
            {%- set _style = _style ~ '--' ~ styleVariable ~ ': ' ~ value ~ ';' -%}
        {%- endif -%}
    {%- endif -%}
{% endfor %}

{# Attributes #}
{%- set _styleAttr = _style or (_styleProps.style is not same as(null)) ? 'style="' ~ _style ~ _styleProps.style | join() ~ '"' -%}

<{{ _elementType }}
    {{ mainProps(props, _allowedAttributes) }}
    {{ classProp(_classNames) }}
    {{ _styleAttr | raw }}
>
    {% block content %}{% endblock %}
</{{ _elementType }}>
