<%
var _variant = locals.variant || 'single';
var _sz      = locals.size    || 'md';
var _name    = locals.name    || '';
var _src     = locals.src     || null;
var _status  = locals.status  || null;

var sc = {
  xs: 'h-6 w-6 text-xs',
  sm: 'h-8 w-8 text-xs',
  md: 'h-10 w-10 text-sm',
  lg: 'h-12 w-12 text-base',
  xl: 'h-16 w-16 text-lg',
}[_sz] || 'h-10 w-10 text-sm';

var statusColor = {
  online: 'bg-success', offline: 'bg-text-disabled', away: 'bg-warning', busy: 'bg-error',
}[_status] || '';

var dotSc = {
  xs: 'h-1.5 w-1.5', sm: 'h-2 w-2', md: 'h-2.5 w-2.5', lg: 'h-3 w-3', xl: 'h-4 w-4',
}[_sz] || 'h-2.5 w-2.5';

function _initials(n) {
  return (n || '').trim().split(/\s+/).map(function(w){ return w[0] || ''; }).slice(0, 2).join('').toUpperCase() || '?';
}
%>
<% if (_variant === 'group') {
  var _avatars = locals.avatars || [];
  var _max     = (typeof locals.max === 'number') ? locals.max : 4;
  var _visible = _avatars.slice(0, _max);
  var _overflow = _avatars.length - _max;
%>

  <% _visible.forEach(function(a) { %>
    
      <% if (a.src) { %>
        
      <% } else { %>
        
          <%= _initials(a.name) %>
        
      <% } %>
    
  <% }); %>
  <% if (_overflow > 0) { %>
    +<%= _overflow %>
  <% } %>

<% } else { %>

  <% if (_src) { %>
    
  <% } else { %>
    
      <%= _initials(_name) %>
    
  <% } %>
  <% if (_status) { %>
    
  <% } %>

<% } %>