<div class="{{ 'sidePane flex-fill ' ~ region_class | trim }}{% if region_props.resizable %} resizable{% endif %}"
     {%- if region_props.width | default('') -%}
         {%- if region_props.closed | default(false) -%}
             {{ ' ' }}style="width: {{ region_props.width }}; {{ 'left' in region_class ? 'left' : 'right' }}: -{{ region_props.width }};"
         {%- else -%}
             {{ ' ' }}style="width: {{ region_props.width }};"
         {%- endif -%}
     {%- endif -%}
>
  <div class="sideContent">
  {%- if region_props.name in ['tabs', 'accordion'] -%}
      {%- set _visible = [] -%}
      {%- for element in elements -%}
        {%- set element_content = element_markup(element) -%}
        {%- if element_content -%}
            {%- set _visible = _visible | merge([{element: element, content: element_content}]) -%}
        {%- endif -%}
    {%- endfor -%}
    {%- if region_props.name == 'tabs' -%}
      <div class="tabContainerAlt">
        <ul class="tabs">
          {%- for element_info in _visible -%}
            {%- set element = element_info.element -%}
            <li id="tab{{loop.index}}" class="{{ ('tab' ~ (loop.first ? ' active' : '') ~ ' ' ~ element_visibility_class(element)) | trim }}">{{ element.title | trans }}</li>
          {%- endfor -%}
        </ul>
        {%- for element_info in _visible -%}
          {%- set element = element_info.element -%}
          <div id="container{{loop.index}}" class="container{% if loop.first %} active{% endif %}">
            {{ element_info.content | raw }}
        </div>
        {%- endfor -%}
      </div>
    {% elseif region_props.name == 'accordion' %}
      <div class="accordionContainer">
        {%- for element_info in _visible -%}
          {%- set element = element_info.element -%}
          <div id="accordion{{loop.index}}" class="{{ ('accordion' ~ (loop.first ? ' active' : '') ~ ' ' ~ element_visibility_class(element)) | trim }}"><div>{{ element.title | trans }}</div></div>
          <div id="container{{loop.index}}" class="container-accordion{% if loop.first %} active{% endif %}" tabindex="-1">
              <div class="accordion-cell">
                  {{ element_info.content | raw }}
              </div>
          </div>
        {%- endfor -%}
      </div>
    {%- endif -%}
  {%- else -%}
        <div class="auto-scroll-v">
            {{ region_content(application, region_name) | raw }}
        </div>
  {% endif %}
  </div>
  <span class="toggleSideBar collapse-toggle"><i class="fas fa-fw fa-bars"></i></span>
</div>
