{% if content %}

  {# LIBRARIES #}
  {{ attach_library('ui_patterns/libraries.bs_offcanvas') }}
  {{ attach_library('ui_patterns/libraries.bs_modal') }}
  {{ attach_library('ui_patterns/bs_offcanvas.bs_offcanvas_lib') }}

  {# VARIABLES #}
  {% set offcanvas_attributes = offcanvas_attributes|default(create_attribute())
    .setAttribute("id", "offcanvas-content")
    .setAttribute("tabindex", "-1")
  %}
  {% if title %}
    {% set offcanvas_attributes = offcanvas_attributes.setAttribute("aria-labelledby", "offcanvas-title") %}
  {% endif %}

  {% set padding = padding|default(false) %}

  {% set offcanvas_class = [
    offcanvas_class|default(""),
    'offcanvas', 'offcanvas-start'
  ] %}

  {# TEMPLATE #}
  {% block trigger %}
    {% if show_button == true %}
      <a class="btn btn-default"
         data-bs-toggle="offcanvas"
         href="#offcanvas-content"
         role="button"
         aria-controls="offcanvas-content">
        Launch offcanvas "#offcanvas-content"
      </a>
    {% endif %}
  {% endblock %}

  <div {{ offcanvas_attributes.addClass(offcanvas_class) }}>

    {% block offcanvas_header %}
    {% if title or show_close %}
      <div class="offcanvas-header {{ padding ? '' : 'p-0' }}">
        {% if title %}
          <h2 id="offcanvas-title" class="display-6">{{ title }}</h2>
        {% endif %}
        {% if show_close %}
          <button id="offcc"
                  type="button"
                  class="btn-icon icon-button"
                  data-bs-dismiss="offcanvas"
                  aria-label="Close">
            <i class="{{ global_icon_times|default('fas fa-times') }}"></i>
          </button>
        {% endif %}
      </div>
    {% endif %}
    {% endblock %}

    {% block offcanvas_body %}
    <div class="offcanvas-body {{ padding ? '' : 'p-0' }}">
      {{ content }}
    </div>
    {% endblock %}

  </div>

{% endif %}
