{% set colSize = 12 / count %}

{% if articletype %}
    {% set articleType = articletype %}
{% else %}
    {% set articleType = 'grid' %}
{% endif %}

{{ style({ include: oViewConf.getModuleUrl('ddoevisualcms', 'out/src/css/tabs.min.css') }) }}

<div role="tabpanel" class="dd-shortcode-{{ shortcode }}{% if class %} {{ class }}{% endif %}">
    <ul class="nav nav-{% if style and style == 'pills' %}pills bg-white{% else %}tabs{% endif %}{% if justified %} nav-justified{% endif %}" role="tablist">
        {% for tab in tabs %}
            <li class="nav-item" role="presentation">
                <button class="nav-link w-100 border-primary{% if loop.index == 1 %} active{% endif %}{% if style and style == 'tabs' %} bg-white{% endif %}"
                        id="nav-{{ tab.index }}-tab" data-bs-toggle="tab"
                        data-bs-target="#nav-{{ tab.index }}" type="button" role="tab" aria-controls="nav-{{ tab.index }}" aria-selected="true">{{ tab.title }}</button>
            </li>
        {% endfor %}
    </ul>

    <div class="tab-content">
        {% for tab in tabs %}
            <div class="tab-pane{% if animation and animation == 'fade' %} fade{% endif %}{% if loop.index == 1 %} show active{% endif %}" id="nav-{{ tab.index }}"
                 role="tabpanel" aria-labelledby="nav-{{ tab.index }}-tab">
                {% if tab.articles %}
                    <div class="row {% if articletype == 'grid' %}grid-row grid-view{% else %}line-view{% endif %}">
                        {% for article in tab.articles %}
                            {% if articleType == 'grid' %}
                                <div class="mb-3 col-12 col-sm-{% if count >= 4 %}6 col-md-{% endif %}{{ colSize }}">
                            {% endif %}
                            {{ include_widget({ cl: "oxwArticleBox", _parent: oView.getClassKey(), _navurlparams: oViewConf.getNavUrlParams(), iLinkType: article.getLinkType(), anid: article.getId(),isVatIncluded: oView.isVatIncluded(), nocookie: 1, sWidgetType: 'product', sListType: "listitem_"~articleType, inlist: 1, skipESIforUser: 1 }) }}
                            {% if articleType == 'grid' %}
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        {% endfor %}
    </div>

</div>