{% trans_default_domain "admin" %}

{% if config.options['label'] is not empty %}
  <h3 class="panel-title">{{ config.options.label|trans }}</h3>
{% endif %}

<div class="flippable-panel">
  {% for element in config.children if is_granted(element.roles) %}
    <a class="flippable-panel__button btn btn-default btn-icon btn-circle {{ loop.first ? 'active' : '' }}" href="#flippable-panel-{{ config.uniqueId }}-box-{{ loop.index }}">
      {% if loop.first %}
        <i class="{{ config.iconClass }}"></i>
      {% else %}
        <i class="{{ config.iconClass2 }}"></i>
      {% endif %}
    </a>
  {% endfor %}
  <div class="flippable-panel__container">
    {% for element in config.children if is_granted(element.roles) %}
      <div id="flippable-panel-{{ config.uniqueId }}-box-{{loop.index }}" class="flippable-panel__element {{ config.options.animationClass }} {{ loop.first ? 'active' : '' }}">
        {% include element.template with { 'config': element } %}
      </div>
    {% endfor %}
  </div>
</div>