{% load bootstrap3 i18n %}
{% load eztables %}
{% load addcss %}
<!-- Nav tabs -->
<ul class="nav nav-{{ child.tabs_style }} tabgroup">
{% for sub_child in child.children %}
  <li class="{% if forloop.first %}active{% endif %}"><a href="#tabitem_{{forloop.counter}}" data-toggle="tab">{{ sub_child.heading }}</a></li>
{% endfor %}
</ul>

<!-- Tab panes -->
<div class="tab-content">
{% for child in child.children %}
  <div class="tab-pane{% if forloop.first %} active{% endif %}" id="tabitem_{{forloop.counter}}">
    {% if child.type == 'form' %}
    {% include 'app_form.html' %}
    {% elif child.type == 'table' or child.type == 'datatable' %}
    {% include 'app_table.html' with heading="no" %}
    {% elif child.type == 'tab_pane' %}
        {% for child in child.children %}
            {% if child.type == 'form' %}
            {% include 'app_form.html' %}
            {% elif child.type == 'table' or child.type == 'datatable' %}
            {% include 'app_table.html' with heading="no" %}
            {% elif child.type == 'tab_pane' %}
            {% include 'app_table.html' with heading="no" %}
            {% elif child.type == 'paragraph' %}
            {% if child.heading != '' %}
            <h2 class="sub-header">{{ child.heading }}</h2>
            {% endif %}
            <div class="text-{{ child.alignment }}{% if child.is_alert %} alert alert-{{child.alert_type}} alert-dismissable{% endif %}">
                {% if child.is_alert %}
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                {% endif %}
                <p>{{ child.text }}</p>
            </div>
            {% else %}
            <div class="alert alert-danger">
                <p>Unknown Element!!</p>
            </div>
            {% endif %}
        {% endfor %}
    {% elif child.type == 'paragraph' %}
    {% if child.heading != '' %}
    <h2 class="sub-header">{{ child.heading }}</h2>
    {% endif %}
    <div class="text-{{ child.alignment }}{% if child.is_alert %} alert alert-{{child.alert_type}} alert-dismissable{% endif %}">
        {% if child.is_alert %}
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        {% endif %}
        <p>{{ child.text }}</p>
    </div>
    {% else %}
    <div class="alert alert-danger">
        <p>Unknown Element!!</p>
    </div>
    {% endif %}
  </div>
{% endfor %}
</div>