<%
  var _cards          = locals.cards          || [];
  var _selectedCardId = locals.selectedCardId || null;
  var _addHref        = locals.addHref        || null;
  var _removeAction   = locals.removeAction   || null;

  var brandColor = {
    VISA: 'bg-blue-600', MASTERCARD: 'bg-orange-500', AMEX: 'bg-teal-600',
    DISCOVER: 'bg-orange-400', JCB: 'bg-blue-600', TROY: 'bg-cyan-600',
    MIR: 'bg-green-600', UNIONPAY: 'bg-red-600', UNKNOWN: 'bg-gray-500',
  };
  var brandLabel = {
    VISA: 'VISA', MASTERCARD: 'MC', AMEX: 'AMEX', DISCOVER: 'DISC',
    JCB: 'JCB', TROY: 'TROY', MIR: 'MIR', UNIONPAY: 'UNIONPAY', UNKNOWN: '••',
  };
%>

  
Select payment card

  <% if (_cards.length === 0) { %>
  
No saved cards.
  <% } else { %>
  

    <% _cards.forEach(function(card) {
      var isSelected = card.cardId === _selectedCardId;
      var bc = brandColor[card.brand] || 'bg-gray-500';
      var bl = brandLabel[card.brand] || '••';
      var rowClass = isSelected
        ? 'border-primary ring-2 ring-primary ring-offset-1 bg-surface-raised'
        : 'border-border hover:border-border-strong bg-surface-raised';
    %>
    
      
        class="sr-only">
      
        <% if (isSelected) { %><% } %>
      

      <%= bl %>

      

        
•••• •••• •••• <%= card.last4 %>
        

          <%= card.cardholderName %> · <%= card.expiryMonth %>/<%= card.expiryYear %>
          <% if (card.isDefault) { %>Default<% } %>
        
      

      <% if (_removeAction) { %>
      

        
          Remove
        
      
      <% } %>
    
    <% }); %>
  
  <% } %>

  <% if (_addHref) { %>
  
    + Add new card
  
  <% } %>