<%
  var _tabs      = locals.tabs      || [];
  var _activeTab = locals.activeTab || (_tabs.length > 0 ? _tabs[0].id : '');
  var _label     = locals.label     || 'Tabs';
  var _id        = locals.id        || 'tabgroup-' + Math.random().toString(36).substr(2, 9);
%>

  

    <% _tabs.forEach(function (tab) { %>
    
      tabindex="<%= tab.id === _activeTab ? '0' : '-1' %>"
      onclick="<%= !tab.disabled ? 'activateTab(\'' + _id + '\', \'' + tab.id + '\')' : '' %>"
      class="inline-flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus <%= tab.disabled ? 'opacity-40 cursor-not-allowed pointer-events-none border-transparent text-text-secondary' : (tab.id === _activeTab ? 'border-primary text-primary' : 'border-transparent text-text-secondary hover:text-text-primary hover:border-border') %>"
    >
      <% if (tab.icon) { %><% } %>
      <%= tab.label %>
      <% if (tab.badge) { %><%- tab.badge %><% } %>
    
    <% }); %>
  

  <% _tabs.forEach(function (tab) { %>
  

    class="py-4 focus-visible:outline-none"
  >
    <%- tab.content || '' %>
  
  <% }); %>