<%
  var _name        = locals.name        || '';
  var _token       = locals.token       || '';
  var _masked      = locals.masked      || null;
  var _scopes      = locals.scopes      || null;
  var _createdAt   = locals.createdAt   || null;
  var _lastUsedAt  = (typeof locals.lastUsedAt !== 'undefined') ? locals.lastUsedAt : null;
  var _environment = locals.environment || null;
  var _onRevoke    = !!locals.onRevoke;
  var _revokeLabel = locals.revokeLabel || ('Revoke ' + _name);
  var _className   = locals.className   || '';

  var envBadgeVariant = {
    production:  'success',
    staging:     'warning',
    development: 'neutral',
  };

  function maskToken(token) {
    if (!token) return '';
    var tail = token.slice(-4);
    var bulletCount = Math.max(0, token.length - 4);
    var bullets = '';
    for (var i = 0; i < bulletCount; i++) bullets += '•';
    return bullets + tail;
  }

  function formatDate(d) {
    if (!d) return '—';
    try {
      var date = (typeof d === 'string' || typeof d === 'number') ? new Date(d) : d;
      if (isNaN(date.getTime())) return '—';
      return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
    } catch (e) { return '—'; }
  }

  var displayMasked = _masked != null ? _masked : maskToken(_token);

  // Unique id per render so multiple instances on a page don't collide.
  var _uid = 'aktc_' + Math.random().toString(36).slice(2, 10);
%>

  

    

      

        
          
        
      
      

        
<%= _name %>
        <% if (_environment) { %>
        

          <%- include('../../ui/Badge', { variant: envBadgeVariant[_environment] || 'neutral', size: 'sm', children: _environment }) %>
        
        <% } %>
      
    

    <% if (_onRevoke) { %>
    
      
        
      
      Revoke
    
    <% } %>
  

  

    <%= displayMasked %>
    
      
        
      
    
    
      
        
      
    
  

  

    

      
Created
      
<%= formatDate(_createdAt) %>
    
    

      
Last used
      
<%= _lastUsedAt ? formatDate(_lastUsedAt) : 'Never' %>
    
  

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

    <% _scopes.forEach(function(scope) { %>
      <%= scope %>
    <% }); %>
  
  <% } %>