<ul class="tabs" data-tab role="tablist">
    {{#if product.related_products}}
        <li class="tab is-active" role="presentation">
            <a class="tab-title" href="#tab-related" role="tab" tabindex="0" aria-selected="true" controls="tab-related">{{lang 'products.related_products'}}</a>
        </li>
    {{/if}}
    {{#if product.similar_by_views}}
        <li class="tab{{#unless product.related_products}} is-active{{/unless}}" role="presentation">
            <a class="tab-title" href="#tab-similar" role="tab" tabindex="0" aria-selected="{{#if product.related_products}}false{{else}}true{{/if}}" controls="tab-similar">{{lang 'products.similar_by_views'}}</a>
        </li>
    {{/if}}
</ul>

<div class="tabs-contents">
{{#if product.related_products}}
    <div role="tabpanel" aria-hidden="false" class="tab-content has-jsContent is-active" id="tab-related">
        {{> components/products/carousel products=product.related_products columns=6 list="Related Products"}}
    </div>
{{/if}}

{{#if product.similar_by_views}}
    <div role="tabpanel" aria-hidden="{{#if product.related_products}}true{{else}}false{{/if}}" class="tab-content has-jsContent{{#unless product.related_products}} is-active{{/unless}}" id="tab-similar">
        {{> components/products/carousel products=product.similar_by_views columns=6 list="Customers Also Viewed"}}
    </div>
{{/if}}
</div>
