{% trans_default_domain "admin" %}

<div class="{{ config.class }}">
  {% for element in config.children %}
    {% if is_granted(element.roles) %}
      {% set isFirst = (loop.index0 == 0) %}
      {% set uniqueId = 'accordion-panel-' ~ config.uniqueId ~ '-' ~ loop.index %}
      <div class="panel">

        <!--Accordion title-->
        <div
            class="panel-heading js-collapse {{ isFirst and config.initiallyCollapsed ? ' collapsed' }}"
            data-target="#{{ uniqueId }}"
            aria-expanded="{{ isFirst and not config.initiallyCollapsed ? 'true': 'false' }}"
            data-toggle="collapse"
            role="button"
        >
          <div class="ti-minus collapseIcon mar-rgt"></div>
          <div class="ti-plus collapseIcon mar-rgt"></div>
          <h3 class="panel-title">
            {% if element.navName is defined %}
              {{ element.navName|trans }}
            {% endif %}
          </h3>
        </div>
        <!--Accordion content-->
        <div
            id="{{ uniqueId }}"
            class="panel-collapse collapse{{ isFirst and not config.initiallyCollapsed ? ' in' }}"
            role="tabpanel"
            aria-expanded="{{ isFirst and not config.initiallyCollapsed ? 'true': 'false' }}"
        >
          <div class="panel-body">
            {% include element.template with { 'config' : element } %}
          </div>
        </div>
      </div>
    {% endif %}
  {% endfor %}
</div>