<%
  var _id          = locals.id          || 'taginput-' + Math.random().toString(36).substr(2, 9);
  var _label       = locals.label       || '';
  var _hint        = locals.hint        || '';
  var _error       = locals.error       || '';
  var _value       = locals.value       || [];
  var _placeholder = locals.placeholder || 'Type and press Enter or comma…';
  var _dis         = !!locals.disabled;
  var _className   = locals.className   || '';

  var hintId      = _hint  ? (_id + '-hint')  : '';
  var errorId     = _error ? (_id + '-error') : '';
  var describedBy = [hintId, errorId].filter(Boolean).join(' ');

  var shellClass = 'flex flex-wrap gap-1.5 min-h-10 w-full rounded-md border px-3 py-2 transition-colors cursor-text focus-within:ring-2 focus-within:ring-border-focus focus-within:border-border-focus';
  if (_dis) shellClass += ' opacity-50 cursor-not-allowed bg-surface-sunken border-border';
  else shellClass += ' bg-surface-base border-border';
  if (_error) shellClass += ' border-error ring-1 ring-error bg-error-subtle';
%>

  <%= _label %>
  

    
      <% _value.forEach(function(tag) { %>
        
          <%= tag %>
          <% if (!_dis) { %>
            
              
            
          <% } %>
        
      <% }); %>
    
    <% if (!_dis) { %>
      aria-describedby="<%= describedBy %>"<% } %>
        <% if (_value.length === 0) { %>placeholder="<%= _placeholder %>"<% } %>
        class="flex-1 min-w-24 bg-transparent text-sm text-text-primary placeholder:text-text-disabled outline-none"
      />
    <% } %>
  
  <% if (_hint && !_error) { %>
<%= _hint %>
<% } %>
  <% if (!_hint && !_error && _value.length > 0) { %>
Double-click a tag to edit it
<% } %>
  <% if (_error) { %>
<%= _error %>
<% } %>