{# Parameters:
  - size (string) default('')
    options: sm, lg, xl, fullscreen
  - id (boolean) (default: modal-random(10000))
  - fullscreen_responsive (string) (default: '')
    options: sm, md, lg, xl, xxl
  - static_backdrop (boolean) (default: false)
  - vertically_centered (boolean) (default: false)
  - verticaly_centered (boolean) (default: false) // deprecated typo
  - scrollable (boolean) (default: false)
  - header (block) (default: '')
  - messages (block) (default: '')
  - body (block) (default: '')
  - footer (block) (default: '')
  - attributes (drupal attrs)
  - header_attributes (drupal attrs)
  - body_attributes (drupal attrs)
  - footer_attributes (drupal attrs)

  Blocks
    - header
    - messages
    - body
    - footer
#}

{%- set _size =  size|default('') %}
{% set _id = id|default('modal-' ~ random(10000)) %}
{% set _fullscreen_responsive =  fullscreen_responsive|default('') %}
{% set _static_backdrop = static_backdrop ?? false %}
{% set _vertically_centered = vertically_centered ?? verticaly_centered ?? false %}
{% set _scrollable = scrollable ?? false %}
{% set _header = header|default('') %}
{% set _header_attributes = header_attributes ?: create_attribute() %}
{% set _messages = messages|default('') %}
{% set _body = body|default('') %}
{% set _body_attributes = body_attributes ?: create_attribute() %}
{% set _footer = footer|default('') %}
{% set _footer_attributes = footer_attributes ?: create_attribute() %}

{%- set _classes = ['modal', 'fade'] %}

{%- if attributes is empty %}
  {%- set attributes = create_attribute() %}
{% endif %}

{%- set attributes = attributes
                    .setAttribute('id', _id)
                    .setAttribute('tabindex', '-1')
                    .setAttribute('aria-hidden', 'true')
                    .setAttribute('aria-label', _id ~ 'Label')
                    .addClass(_classes)
%}

{%- if _static_backdrop %}
  {%- set attributes = attributes.setAttribute('data-bs-backdrop', 'static') %}
{% endif -%}

<div
  {{ attributes }}
>{# -#}
  <div class="modal-dialog
  {{- _size ? ' modal-' ~ size -}}
  {{- _fullscreen_responsive ? ' modal-fullscreen-' ~ _fullscreen_responsive ~ '-down' -}}
  {{- _vertically_centered ? ' modal-dialog-centered' -}}
  {{- _scrollable ? ' modal-dialog-scrollable' -}}"
  >{# -#}
    <div class="modal-content">
      {%- if header is not empty -%}
      <div
        {{- _header_attributes.addClass(['modal-header']) -}}
      >
        {%- block header _header -%}
      </div>
      {%- endif %}
      {%- block messages _messages -%}
      <div
          {{- _body_attributes.addClass(['modal-body']) -}}
      >
        {%- block body _body -%}
      </div>
      {%- if footer is not empty -%}
      <div
          {{- _footer_attributes.addClass(['modal-footer']) -}}
      >
        {%- block footer _footer -%}
      </div>
      {%- endif -%}
    </div>{# -#}
  </div>{# -#}
</div>
{#--#}