<%
  var _name    = locals.name    || 'radio-' + Math.random().toString(36).substr(2, 9);
  var _opts    = locals.options || [];
  var _val     = (locals.value !== undefined && locals.value !== null) ? String(locals.value) : '';
  var _dis     = !!locals.disabled;
  var _variant = locals.variant || (locals.cardStyle ? 'card' : 'default');
  var _cols    = locals.columns || 1;

  var _gridClass = '';
  if (_cols === 1) {
    _gridClass = 'space-y-2';
  } else if (_cols === 2) {
    _gridClass = 'grid gap-2 grid-cols-1 sm:grid-cols-2';
  } else if (_cols === 3) {
    _gridClass = 'grid gap-2 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
  } else {
    _gridClass = 'space-y-2';
  }
%>

  <% if (locals.legend) { %>
    
<%= locals.legend %>
  <% } %>
  

    <% _opts.forEach(function (opt) { %>
      <%
        var active = (String(opt.value) === _val);
        var labelClass = 'flex items-start gap-2 ';
        labelClass += _dis ? 'cursor-not-allowed opacity-50 ' : 'cursor-pointer ';
        if (_variant === 'card') {
          labelClass += 'rounded-lg border border-border bg-surface-base p-3 transition-colors hover:border-border-focus ';
          if (active) labelClass += 'border-primary bg-primary/5 ';
          if (locals.error) labelClass += 'border-error ';
        }
        if (locals.optionClassName) labelClass += locals.optionClassName + ' ';

        var inputClass = 'mt-0.5 h-4 w-4 border-border text-primary focus-visible:ring-2 focus-visible:ring-border-focus';
        if (locals.error) inputClass += ' border-error';
      %>
      
        
          <%= _dis ? 'disabled' : '' %>
        >
        

          

            <% if (opt.icon) { %>
              <%- opt.icon %>
            <% } %>
            <%= opt.label %>
          
          <% if (opt.hint) { %>
            
<%= opt.hint %>
          <% } %>
        
      
    <% }); %>
  
  <% if (locals.error) { %>
    
<%= locals.error %>
  <% } %>