<%
  var _id            = locals.id || ('dh-' + Math.random().toString(36).substr(2,6));
  var _statusVariant = locals.statusVariant || 'neutral';
  var _tabs          = locals.tabs || [];
  var _activeTab     = locals.activeTab || (_tabs.length ? _tabs[0].value : '');
  var variantBadge = {
    success: 'bg-success-subtle text-success-fg',
    error:   'bg-error-subtle text-error-fg',
    warning: 'bg-warning-subtle text-warning-fg',
    info:    'bg-info-subtle text-info-fg',
    neutral: 'bg-surface-sunken text-text-secondary',
    primary: 'bg-primary-subtle text-primary'
  };
  var _badgeCls = variantBadge[_statusVariant] || variantBadge.neutral;
%>

  

    

      

        

          
<%= locals.title %>
          <% if (locals.status) { %>
          <%= locals.status %>
          <% } %>
          <% if (locals.badgeContent) { %><%- locals.badgeContent %><% } %>
        
        <% if (locals.subtitle) { %>
<%= locals.subtitle %>
<% } %>
      
      <% if (locals.actionsContent) { %>
      
<%- locals.actionsContent %>
      <% } %>
    

    <% if (_tabs.length) { %>
    

      <% _tabs.forEach(function(tab) {
        var isActive = tab.value === _activeTab;
      %>
      aria-disabled="true"<% } %>
        onclick="<% if (!tab.disabled) { %>activateDetailTab('<%= _id %>','<%= tab.value %>')<% } %>"
        data-tab="<%= tab.value %>"
        class="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<%= isActive ? ' border-primary text-primary' : ' border-transparent text-text-secondary hover:text-text-primary hover:border-border-strong' %><%= tab.disabled ? ' opacity-40 cursor-not-allowed pointer-events-none' : '' %>">
        <%= tab.label %>
      
      <% }); %>
    
    <% } %>
  

<% if (_tabs.length) { %>

<% } %>