{% trans_default_domain "admin" %}

<div class="panel panel-primary">

  <!--Panel heading-->
  <div class="panel-heading">
    {% if config.children is not empty %}
      <div class="panel-control">

        <!--Nav tabs-->
        <ul class="nav nav-tabs">
          {% for element in config.children %}
            {% if is_granted(element.roles) %}
              {% set isFirst = (loop.index0 == 0) %}
              <li {% if isFirst %}class="active"{% endif %}>
                <a data-toggle="tab" href="#tabbed-panel-container-{{ config.uniqueId }}-{{ loop.index }}" aria-expanded="{{ isFirst }}">
                  {% if element.options['navName'] is defined %}
                    {{ element.options['navName']|trans }}
                  {% endif %}
                </a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>

      </div>
    {% endif %}
    {% if config.options['headerLabel'] is defined  %}
      <h3 class="panel-title">{{ (config.options['headerLabel'])|trans }}</h3>
    {% endif %}
  </div>

  <!--Panel body-->
  <div class="panel-body">

    <!--Tabs content-->
    <div class="tab-content">
      {% for element in config.children %}
        {% if is_granted(element.roles) %}
          {% set isFirst = (loop.index0 == 0) %}
           <div id="tabbed-panel-container-{{ config.uniqueId }}-{{ loop.index }}" class="tab-pane fade {% if isFirst %}active in{% endif %}">
            {% include element.template with { 'config' : element } %}
           </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>