{% if orientation == "top" %}
<div id="tab_element_{{rand}}">
    <ul class="nav nav-tabs" role="tablist">
        {% for tab in tabArray %}
        <li class="nav-item">
            <a id="tab_header_{{rand}}_{{loop.index}}" class="nav-link {% if loop.first %}active{% endif %}" role="tab" href="#tab_content_{{rand}}_{{loop.index}}" data-toggle="tab" aria-controls="tab_content_{{rand}}_{{loop.index}}" aria-selected="{% if loop.first %}true{% else %}false{% endif %}">
                {% if tab.icon is not null %}
                    <i class="{{tab.icon}}"></i>
                {% endif %} 
                {{tab.title}}
            </a>
        </li>
        {% endfor %}
    </ul>
    <div class="tab-content">
        {% for tab in tabArray %}
        <div id="tab_content_{{rand}}_{{loop.index}}" class="tab-pane{% if fade %} fade{% endif%}{% if loop.first %} show active{% endif %}" role="tabpanel" aria-labelledby="tab_header_{{rand}}_{{loop.index}}">
            {{ tab.content|raw }}
        </div>
        {% endfor %}
    </div>
</div>
{% elseif orientation == "left" %}
<div id="tab_element_{{rand}}" class="row no-gutters">
    <div class="col-sm-3">
        <ul class="nav nav-tabs flex-column">
            {% for tab in tabArray%}
            <li class="nav-item">
                <a id="tab_header_{{rand}}_{{loop.index}}" class="text-center nav-link {% if loop.first %}active{% endif %}" role="tab" href="#tab_content_{{rand}}_{{loop.index}}" data-toggle="tab" aria-controls="tab_content_{{rand}}_{{loop.index}}" aria-selected="{% if loop.first %}true{% else %}false{% endif %}">
                    {% if tab.icon is not null %}
                        <i class="{{tab.icon}}"></i>
                    {% endif %} 
                    {{tab.title}}
                </a>
            </li>
            {% endfor %}
        </ul>
    </div>
    <div class="col-sm-9">
        <div class="tab-content">
            {% for tab in tabArray %}
            <div id="tab_content_{{rand}}_{{loop.index}}" class="tab-pane{% if fade %} fade{% endif%}{% if loop.first %} show active{% endif %}" role="tabpanel" aria-labelledby="tab_header_{{rand}}_{{loop.index}}">
                {{ tab.content|raw }}
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}



<style>
    .tab-pane{
        padding: 20px;
    }

    #tab_element_{{rand}} .nav-item .nav-link.active{
        background-color: {{tabColorActive}};
    }

    #tab_element_{{rand}} .nav-item .nav-link:not(.active){
        background-color: {{tabColorInactive}};
    }

    #tab_element_{{rand}} .nav-item .nav-link{
        border-color: #dee2e6 #dee2e6 #dee2e6;
        
    }

    #tab_element_{{rand}} .nav-link:not(.active){
        text-decoration: none;
        color: {{tabTextColorInactive}};
    }

    #tab_element_{{rand}} .nav-link.active{
        text-decoration: none;
        color: {{tabTextColorActive}} !important;
    }

    {% if orientation == "left" %}
    #tab_element_{{rand}} .tab-content .tab-pane{
        border-top: 1px solid #dee2e6;
    }
    {% endif %}
</style>