<%
  var _value       = locals.value       || '';
  var _name        = locals.name        || 'countryCode';
  var _id          = locals.id          || ('country-selector-' + Math.random().toString(36).slice(2, 9));
  var _label       = locals.label !== undefined ? locals.label : 'Country';
  var _placeholder = locals.placeholder || 'Select country…';
  var _disabled    = !!locals.disabled;
  var _hint        = locals.hint        || '';
  var _error       = locals.error       || '';
  var _required    = !!locals.required;
  var _className   = locals.className   || '';
  var _countries   = locals.countries   || [];

  var selected = null;
  for (var i = 0; i < _countries.length; i++) {
    if (_countries[i].iso2 === _value) { selected = _countries[i]; break; }
  }

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

  var triggerClass = 'inline-flex items-center justify-between gap-2 w-full rounded-md border text-text-primary hover:bg-surface-overlay px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:opacity-50 disabled:cursor-not-allowed ' +
                    (_error ? 'border-error ring-1 ring-error' : 'border-border');
%>

  <% if (_label) { %>
  
    <%= _label %><% if (_required) { %>*(required)<% } %>
  
  <% } %>

  

    
            aria-haspopup="listbox"
            aria-expanded="false"
            <% if (describedBy) { %>aria-describedby="<%= describedBy %>"<% } %>
            aria-invalid="<%= _error ? 'true' : 'false' %>"
            aria-required="<%= _required ? 'true' : 'false' %>"
            data-cs-trigger>
      
        <% if (selected) { %>
        <%= selected.iso2 %>
        <%= selected.name %>
        <% } else { %>
        
        <%= _placeholder %>
        <% } %>
      
      
    

    
    

      

        
      
      

        <% _countries.forEach(function(opt) {
          var active = opt.iso2 === _value;
          var optClass = 'flex w-full items-center gap-2 px-3 py-2 text-sm text-left transition-colors focus-visible:outline-none focus-visible:bg-surface-overlay ' +
                         (active ? 'bg-primary-subtle text-primary font-medium' : 'text-text-primary hover:bg-surface-overlay');
        %>
        

          
            <%= opt.iso2 %>
            <%= opt.name %>
            <%= opt.iso2 %>
            
          
        
        <% }); %>
        
No results
      
    

     required<% } %>>
  

  <% if (_hint && !_error) { %>
  
<%= _hint %>
  <% } %>
  <% if (_error) { %>
  
<%= _error %>
  <% } %>