<%
  var _name    = locals.name    || 'paymentMethod';
  var _value   = locals.value   || 'CREDIT_CARD';
  var _legend  = locals.legend  || 'Payment method';
  var _disabled = !!locals.disabled;

  var methods = [
    { value: 'CREDIT_CARD',   label: 'Credit Card',     desc: 'Visa, Mastercard, Amex',    icon: 'fa-solid fa-credit-card text-blue-600' },
    { value: 'DEBIT_CARD',    label: 'Debit Card',       desc: 'All bank debit cards',      icon: 'fa-solid fa-credit-card text-green-600' },
    { value: 'BANK_TRANSFER', label: 'Bank Transfer',    desc: 'Direct from your account',  icon: 'fa-solid fa-building-columns text-text-secondary' },
    { value: 'WALLET',        label: 'Digital Wallet',   desc: 'PayPal, Google Pay, etc.', icon: 'fa-solid fa-wallet text-purple-600' },
  ];
%>
>
  
<%= _legend %>
  

    <% methods.forEach(function(m) { %>
    <%
      var isSelected = m.value === _value;
      var cardClass = isSelected
        ? 'border-primary ring-2 ring-primary bg-primary-subtle/30'
        : 'border-border hover:border-border-strong';
    %>
    
       <%= _disabled ? 'disabled' : '' %>
        class="sr-only">
      
        <% if (isSelected) { %><% } %>
      
      
      

        
<%= m.label %>
        
<%= m.desc %>
      
    
    <% }); %>