<%
  var _id         = locals.id         || 'select-' + Math.random().toString(36).substr(2, 9);
  var _dis        = !!locals.disabled;
  var _req        = !!locals.required;
  var _opts       = locals.options    || [];
  var _searchable = !!locals.searchable;
  var _hasIcons   = _opts.some(function (o) { return !!o.icon; });
  var _useCombo   = _searchable || _hasIcons;

  var _val        = (locals.value !== undefined && locals.value !== null) ? String(locals.value) : '';

  var _hintId  = (locals.hint  && !locals.error) ? (_id + '-hint')  : '';
  var _errorId = locals.error ? (_id + '-error') : '';
  var _describedBy = [_hintId, _errorId].filter(function (x) { return !!x; }).join(' ');

  var _selected = null;
  for (var i = 0; i < _opts.length; i++) {
    if (String(_opts[i].value) === _val) { _selected = _opts[i]; break; }
  }
%>
<% if (_useCombo) { %>
  <%
    var comboClass = 'flex items-center gap-2 w-full rounded-md border px-3 py-2 text-sm transition-colors cursor-pointer '
      + 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ';
    comboClass += locals.error
      ? 'border-error ring-1 ring-error bg-error-subtle '
      : 'border-border bg-surface-base ';
    if (_dis) comboClass += 'opacity-50 cursor-not-allowed bg-surface-sunken ';
  %>
  

    
      <%= locals.label || '' %><% if (_req) { %>*(required)<% } %>
    

    

    
aria-describedby="<%= _describedBy %>"<% } %>
      aria-disabled="<%= _dis ? 'true' : 'false' %>"
      aria-required="<%= _req ? 'true' : 'false' %>"
      aria-invalid="<%= locals.error ? 'true' : 'false' %>"
      data-testid="select-<%= _id %>"
      data-combobox-trigger
      class="<%= comboClass %>"
    >
      <% if (_selected && _selected.icon) { %>
        <%- _selected.icon %>
      <% } %>
      <%= _selected ? _selected.label : (locals.placeholder || 'Select…') %>
      
        
      
    

    

      <% if (_searchable) { %>
        

          
        
      <% } %>
      

        <% if (locals.placeholder) { %>
          
<%= locals.placeholder %>
        <% } %>
        <% _opts.forEach(function (opt) { %>
          <% var active = String(opt.value) === _val; %>
          

            <% if (opt.icon) { %><%- opt.icon %><% } %>
            <%= opt.label %>
            <% if (active) { %>
              
                
              
            <% } %>
          
        <% }); %>
        
No results found.
      
    

    <% if (_hintId) { %>
<%= locals.hint %>
<% } %>
    <% if (_errorId) { %>
<%= locals.error %>
<% } %>
  

  
<% } else { %>
  <%
    var baseClass = 'block w-full rounded-md border px-3 py-2 text-sm transition-colors appearance-none '
      + 'bg-surface-base text-text-primary '
      + 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:border-border-focus '
      + 'disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-sunken ';
    baseClass += locals.error
      ? 'border-error ring-1 ring-error bg-error-subtle'
      : 'border-border';
  %>
  

    
      <%= locals.label || '' %><% if (_req) { %>*(required)<% } %>
    
    

      disabled<% } %>
        <% if (_req) { %>required<% } %>
        <% if (locals.name) { %>name="<%= locals.name %>"<% } %>
        aria-invalid="<%= locals.error ? 'true' : 'false' %>"
        <% if (_describedBy) { %>aria-describedby="<%= _describedBy %>"<% } %>
        data-testid="select-<%= _id %>"
      >
        <% if (locals.placeholder) { %>
          ><%= locals.placeholder %>
        <% } %>
        <% _opts.forEach(function (opt) { %>
          ><%= opt.label %>
        <% }); %>
      
      

        
          
        
      
    
    <% if (_hintId) { %>
<%= locals.hint %>
<% } %>
    <% if (_errorId) { %>
<%= locals.error %>
<% } %>
  
<% } %>