{# Parameters:
  - title: (string) (default: '')
  - title_tag: (string) (default: 'h2')
  - title_link: (link object) (default: {})
  - title_attributes (drupal attrs)
  - placement (string) (default: '') (start, end, top, bottom)
  - id (string) (default: '')
  - body (string) (default: '')
  - with_body_scroll (boolean) (default: false)
  - with_backdrop (boolean) (default: true)
  - with_close (boolean) (default: true)
  - close_aria_label (default: '')
  - extra_classes_body (string) (default: '')
  - extra_classes_header (string) (default: '')
  - extra_classes_close (string) (default: '')
  - responsiveness (string) (default: '')
    options: ['sm', 'md', 'lg', 'xl', 'xxl']
  - attributes (drupal attrs)
#}

{%- set _title = title|default('') %}
{% set _title_tag = title_tag|default('h2') %}
{% set _title_link = title_link|default({}) %}
{% set _title_attributes = title_attributes ?: create_attribute() %}
{% set _placement = placement|default('') %}
{% set _id = id|default('bcl-offcanvas-' ~ random(10000)) %}
{% set _body = body|default('') %}
{% set _with_body_scroll = with_body_scroll ?? false %}
{% set _with_backdrop = with_backdrop ?? true %}
{% set _with_close = with_close ?? true %}
{% set _close_aria_label = close_aria_label|default('') %}
{% set _extra_classes_body = extra_classes_body|default('') %}
{% set _extra_classes_header = extra_classes_header|default('') %}
{% set _extra_classes_close = extra_classes_close|default('') %}
{% set _responsiveness = responsiveness|default('') %}

{%- if _responsiveness is not empty %}
 {%- set _classes = ['offcanvas-' ~ _responsiveness] %}
{% else %}
 {%- set _classes = ['offcanvas'] %}
{% endif %}

{%- set _class_body = 'offcanvas-body' ~ (_extra_classes_body ? ' ' ~ _extra_classes_body : '') %}
{% set _class_header = 'offcanvas-header' ~ (_extra_classes_header ? ' ' ~ _extra_classes_header : '') %}

{%- if _placement is not empty %}
 {%- set _classes = _classes|merge(['offcanvas-' ~ _placement]) %}
{% endif %}

{%- if _title is not empty %}
  {%- set _aria_labelled = _title.id|default('') %}
{% endif %}

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

{%- set attributes = attributes.setAttribute('id', _id) %}

{%- if _aria_labelled is defined and _aria_labelled is not empty %}
  {%- set attributes = attributes.setAttribute('aria-labelledby', _aria_labelled) %}
{% endif %}

{%- if _with_body_scroll %}
 {%- set attributes = attributes.setAttribute('data-bs-scroll', 'true') %}
{% endif %}

{%- if not _with_backdrop %}
 {%- set attributes = attributes.setAttribute('data-bs-backdrop', 'false') %}
{% endif %}

{%- if _title is not empty %}
 {%- set attributes = attributes.setAttribute('aria-labelledby', _id ~ '-title') %}
{% endif %}

{%- set attributes = attributes.setAttribute('tabindex', '-1').addClass(_classes) -%}

<div
  {{ attributes }}
>
{%- if _with_close or _title is not empty -%}
  <div class="{{ _class_header }}">
  {%- if _title is not empty %}
    {%- include '@oe-bcl/bcl-heading/heading.html.twig' with {
      title: _title,
      title_tag: _title_tag,
      title_link: _title_link,
      attributes: _title_attributes.setAttribute('id', _id ~ '-title').addClass(['offcanvas-title']),
    } only %}
  {%- endif %}
  {%- if _with_close %}
    {%- set button_attributes = create_attribute()
                              .addClass(['btn-close', 'text-reset'])
                              .setAttribute('data-bs-dismiss', 'offcanvas')
                              .setAttribute('data-bs-target', '#' ~ _id)
                              .setAttribute('aria-label', _close_aria_label)
                              .setAttribute('aria-controls', _id)
    %}
    {%- if _extra_classes_close is not empty %}
      {%- set button_attributes = button_attributes.addClass(_extra_classes_close) %}
    {%- endif %}
    {%- include '@oe-bcl/bcl-button/button.html.twig' with {
        attributes: button_attributes,
        clean_class: true
      } only -%}
  {% endif -%}
  </div>
{%- endif %}
{%- if _body is not empty -%}
  <div class="{{ _class_body }}">
{%- endif -%}
  {%- block body -%}
    {{ _body }}
  {%- endblock -%}
{%- if _body is not empty -%}
  </div>
{%- endif -%}
</div>
{#--#}