<%
  var _name        = locals.name        || '';
  var _type        = locals.type        || 'apiKey';
  var _description = locals.description || null;
  var _recommended = !!locals.recommended;
  var _metaItems   = locals.metaItems   || null;
  var _href        = locals.href        || null;
  var _onSelect    = !!locals.onSelect;
  var _className   = locals.className   || '';

  var schemeIcon = {
    apiKey:        'fa-solid fa-key',
    http:          'fa-solid fa-lock',
    oauth2:        'fa-solid fa-shield',
    openIdConnect: 'fa-solid fa-fingerprint',
    mutualTLS:     'fa-solid fa-user-shield',
  };

  var iconClass = schemeIcon[_type] || schemeIcon.apiKey;
  var interactive = !!(_href || _onSelect);

  var baseClass = 'block rounded-xl border border-border bg-surface-raised p-4 text-left'
    + (interactive ? ' transition-shadow hover:shadow-md hover:border-border-focus focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus' : '')
    + (_className ? ' ' + _className : '');
%>
<% if (_href) { %>

<% } else if (_onSelect) { %>

<% } else { %>

<% } %>

  

    

      

        
          
        
      
      

        
<%= _name %>
        

          <%- include('./SecuritySchemeBadge', { type: _type, size: 'sm' }) %>
          <% if (_recommended) { %>
          <%- include('../../ui/Badge', { variant: 'success', size: 'sm', children: 'Recommended' }) %>
          <% } %>
        
      
    
    <% if (interactive) { %>
    
    <% } %>
  

  <% if (_description) { %>
  
<%= _description %>
  <% } %>

  <% if (_metaItems && _metaItems.length > 0) { %>
  

    <% _metaItems.forEach(function(item) { %>
    

      
<%= item.label %>
      
<%- item.value %>
    
    <% }); %>
  
  <% } %>

<% if (_href) { %>

<% } else if (_onSelect) { %>

<% } else { %>