{% trans_default_domain "admin" %}

{# determine what the parent class is only applies to vertical orientation) #}
{% set containerClass = 'tab-base' %}
{% if config.tabOrientation  == constant('Bazookas\\AdminBundle\\AdminElements\\Containers\\TabbedContainer::ORIENTATION_VERTICAL') %}
  {% if config.tabLocation == constant('Bazookas\\AdminBundle\\AdminElements\\Containers\\TabbedContainer::LOCATION_LEFT') %}
    {% set containerClass = 'tab-base tab-stacked-left' %}
  {% else %}
    {% set containerClass = 'tab-base tab-stacked-right' %}
  {% endif %}
{% endif %}

<div class="{{ containerClass }}">

  {% if config.children is not empty %}
    {# Determine what the tab navigation class is (only applies to horizontal orientation) #}
    {% set navClass = 'nav-tabs' %}
    {% if config.tabOrientation  == constant('Bazookas\\AdminBundle\\AdminElements\\Containers\\TabbedContainer::ORIENTATION_HORIZONTAL') %}
      {% if config.tabLocation == constant('Bazookas\\AdminBundle\\AdminElements\\Containers\\TabbedContainer::LOCATION_RIGHT') %}
        {% set navClass = 'nav-tabs tabs-right' %}
      {% endif %}
    {% endif %}

    <!--Nav tabs-->
    <ul class="nav {{ navClass }}">
      {% 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-container-{{ config.uniqueId }}-{{ loop.index }}" aria-expanded="{{ isFirst }}">
              {% if element.options['navName'] is defined %}
                {{ element.options['navName']|trans }}
              {% endif %}
            </a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  {% endif %}

  <!--Tabs Content-->
  <div class="tab-content">
    {% for element in config.children %}
      {% if is_granted(element.roles) %}
        {% set isFirst = (loop.index0 == 0) %}
        <div id="tabbed-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>