{% load cms_tags %}

<{{ instance.tag_type }} {{ instance.attributes_str }}>
    <ul class="nav {{ instance.tab_type }}
        {% if instance.tab_alignment %} {{ instance.tab_alignment }}{% endif %}"
        role="tablist">
        {% for plugin in instance.child_plugin_instances %}
            <li class="nav-item">
                <a href="#tab-{{ plugin.pk }}"
                    class="nav-link{% if instance.tab_index == forloop.counter %} active{% endif %}"
                    id="tab-label-{{ plugin.pk }}"
                    data-toggle="tab"
                    aria-controls="tab-{{ plugin.pk }}"
                    aria-selected="{% if instance.tab_index == forloop.counter %}true{% else %}false{% endif %}"
                    role="tab">
                    {{ plugin.tab_title }}
                </a>
            </li>
        {% endfor %}
    </ul>

    <div class="tab-content">
        {% for plugin in instance.child_plugin_instances %}
            <div class="tab-pane
                {% if instance.tab_index == forloop.counter %} show active{% endif %}
                {% if instance.tab_effect %}{{ instance.tab_effect }}{% endif %}"
                id="tab-{{ plugin.pk }}"
                aria-labelledby="tab-label-{{ plugin.pk }}"
                role="tabpanel">
                {% render_plugin plugin %}
            </div>
        {% endfor %}
    </div>
</{{ instance.tag_type }}>
