{% set tab_style = tabStyle|striptags %}
{% set style_classes = {
  'underline': 'border-b-2  border-body-bg',
  'default_fill': '',
  'outline': '',
  'primary_fill': '',
   'secondary_fill': '',
  'icon_tabs': ' flex gap-2 justify-center items-center rounded-xl cursor-pointer'
} %}
{% set  active_classes = {
  'underline': 'border-b-2 border-primary text-primary',
  'default_fill': 'bg-primary text-body-bg',
  'outline': 'border-1 rounded-t-xl border-gray-400',
  'primary_fill':  'bg-primary text-body-bg',
  'secondary_fill': 'bg-secondary text-body-bg',
  'icon_tabs': 'bg-primary fill-body-bg text-body-bg' ,
} %}

{% set tabStyle_classes = style_classes[tab_style|default('underline')] %}
{% set activClasses = active_classes[tab_style|default('underline')] %}


 
 
  {% set id = tabid %}
  
{% set tab_buttons = tabButtons|striptags|capitalize %}


 {% if render_mode == 'tabsHeader' %} 

         <button
            @click="activeTab = '{{ id }}'"
            :class="activeTab === '{{ id }}'
                ? ' {{activClasses}} '
                : ''"
            class="{{tabStyle_classes}} w-1/3 py-3 text-body font-bold "
        >
           {{ tab_buttons }}
        </button>
{% elseif render_mode == 'content' %} 

 {# <span class="{{tabContent}}"><span> #}
   <div x-show="activeTab === '{{ id }}'" class= ""> 
             {{tabContent}}
        </div> 
 {% endif %}



 