

{% if tabs is not empty %}

    <div {% if id is not empty %}id="{{ id }}"{% endif %} class="sidebarTabsWrap {{ class }}">

        <div class="wrapper">

            <div class="sidebarTabs">

                <div class="tabNav">

                    <nav class="sideNav">

                        <ul>

                            {% set section_index = 1 %}

                            {% for tab in tabs %}

                                <li>
                                    <a href="#tab_{{ loop.index }}" class="sideNavLink js_sidenavLink {% if loop.index == 1 %}active{% endif %}">
                                        {{ tab.title }}
                                    </a>
                                </li>

                                {% set section_index = loop.index + 1 %}

                            {% endfor %}


                        </ul>

                    </nav>

                </div> <!-- .sideNav -->


                <div class="tabContent">

                    <div class="tabContentWrap">

                        {% set section_index = 1 %}

                        {% for tab in tabs %}

                            <section id="tab_{{ loop.index }}" class="{% if loop.index is odd %}rowOdd{% else %}rowEven{% endif %} {% if loop.index == 1 %}active{% endif %}">


                                <h2 class="sectionTitle">{{ tab.title }}</h2>

                                {% if tab.content == 'trustpilot' %}

                                    <div class="sectionContent">
                                        
                                        <trustpilot-widget skus="{{ product.trustpilot_sku }}" widget-type="reviews" />
                                        
                                    </div>
                                    
                                {% else %}
                                    
                                    {% if tab.content_itemised | length > 0 %}
    
                                        <div class="sideEffectsBanner">
    
                                            <div class="innerSideEffects">
    
                                                <div class="sideEffectsWrapper">
    
    
                                                        <div class="sideEffectsListWrap">
    
                                                            <ul class="sideEffectsList">
    
                                                                {% for content_chunk in tab.content_itemised %}
    
                                                                    <li>
                                                                        <div class="sideEffectBox">
                                                                            {{ content_chunk | raw }}
                                                                        </div> <!-- .sideEffectBox -->
                                                                    </li>
    
                                                                {% endfor %}
    
                                                            </ul>
    
                                                        </div> <!-- .sideEffectsListWrap -->
    
    
                                                </div> <!-- .sideeffectsWrapper -->
    
                                            </div> <!-- .innerSideEffects -->
    
                                        </div> <!-- .sideEffectsBanner -->
    
                                    {% else %}
    
                                        <div class="sectionContent wysiwyg">
    
                                            {{ tab.content|raw }}
    
                                            {% if tab.cta_link is not empty and tab.cta_text is not empty %}
                                                <div class="ctaWrapper">
                                                    <a href="{{ tab.cta_link }}" class="button">{{ tab.cta_text }}</a>
                                                </div> <!-- .ctaWrapper -->
                                            {% endif %}
    
                                        </div> <!-- .section wysiwyg -->
    
                                    {% endif %}
                                    
                                {% endif %}

                            </section>

                            {% set section_index = loop.index + 1 %}

                        {% endfor %}


                    </div> <!-- .tabContentWrap wysiwyg -->

                </div> <!-- .tabContent -->

            </div> <!-- .innerSidebarTabs -->

        </div> <!-- .wrapper -->

    </div> <!-- .sidebarTabs -->
{% endif %}
