{% set tabs_name = tabs.name | default("tabs-#{random(9000)}") %}  

{% set tab1_uuid = tab1_uuid | default("tab1-#{random(9000)}") %}
{% set tab2_uuid = tab2_uuid | default("tab2-#{random(9000)}") %}
{% set tab3_uuid = tab3_uuid | default("tab3-#{random(9000)}") %}
{% set tab4_uuid = tab4_uuid | default("tab4-#{random(9000)}") %}
{% set tab5_uuid = tab5_uuid | default("tab5-#{random(9000)}") %}
{% set tab6_uuid = tab6_uuid | default("tab6-#{random(9000)}") %}




<div class="c-tabs {{ tabs.classes }}" role="tablist">
  
  <input class="c-tab__input c-tab__input--1" type="radio" name="{{ tabs_name }}" id="{{ tab1_uuid }}" value="tablabelinput1" checked />
  <input class="c-tab__input c-tab__input--2" type="radio" name="{{ tabs_name }}" id="{{ tab2_uuid }}" value="tablabelinput2" />
  <input class="c-tab__input c-tab__input--3" type="radio" name="{{ tabs_name }}" id="{{ tab3_uuid }}" value="tablabelinput3"/>
  
  
  <div class="c-tabs__labels {{ tabs.label_classes }}">
    <label for="{{ tab1_uuid }}" class="c-tab__label c-tab__label--1">Retail Banking Tab</label>
    <label for="{{ tab2_uuid }}" class="c-tab__label c-tab__label--2">Commercial Banking Tab</label>
    <label for="{{ tab3_uuid }}" class="c-tab__label c-tab__label--3">Financial Markets</label>
  </div>
  
  
  
  <div class="c-tabs__panels">
  
    <div class="c-tab">
      <label for="{{ tab1_uuid }}" class="c-tab__label c-tab__label--1">Retail Banking Tab</label>
      
      <div class="c-tab__panel c-tab__panel--1" id="tab-panel-{{ tab1_uuid }}">
        <div class="c-tab__content">
          {% include "@organisms/card-sets/card-set.twig" %}
        </div>
      </div>
    </div>
    

    <div class="c-tab">  
      <label for="{{ tab2_uuid }}" class="c-tab__label c-tab__label--2">Commercial Banking Tab</label>
      
      <div class="c-tab__panel c-tab__panel--2" id="tab-panel-{{ tab2_uuid }}">
        <div class="c-tab__content">
          {% grid %}
            {% cell "u-1/1 u-1/2@tiny u-1/3@small" %}
              {% include "@molecules/cards/card.twig" with {
                image: {
                  src: "http://lorempixel.com/800/400/",
                  is_lazyloaded: true
                }
              } %}
            {% endcell %}

            {% cell "u-1/1 u-1/2@tiny u-1/3@small" %}
              {% include "@molecules/cards/card.twig" with {
                image: {
                  src: "http://lorempixel.com/800/400/",
                  is_lazyloaded: true
                }
              } %}
            {% endcell %}

            {% cell "u-1/1 u-1/2@tiny u-1/3@small" %}
              {% include "@molecules/cards/card.twig" with {
                image: {
                  src: "http://lorempixel.com/800/400/",
                  is_lazyloaded: true
                }
              } %}
            {% endcell %}
          {% endgrid %}
        </div>
      </div>
    </div>
    
    

    <div class="c-tab">  
      <label for="{{ tab3_uuid }}" class="c-tab__label c-tab__label--3">Financial Markets</label>
      
      <div class="c-tab__panel c-tab__panel--3" id="tab-panel-{{ tab3_uuid }}">
        <div class="c-tab__content">
            {% include "@organisms/card-sets/card-set.twig" %}
        </div>
      </div>
    </div>
    
    
  
  
  
  </div>
</div>