<%
  var _brand       = (locals.brand || 'UNKNOWN').toUpperCase();
  var _number      = locals.cardNumber      || '';
  var _name        = locals.cardholderName  || '';
  var _month       = locals.expiryMonth     || 'MM';
  var _year        = locals.expiryYear      || 'YY';
  var _cvv         = locals.cvv             || '';
  var _flipped     = !!locals.flipped;

  var brandStyle = {
    VISA:      { label: 'VISA',      gradient: 'linear-gradient(135deg,#1A1F71,#0A0F3D)' },
    MASTERCARD:{ label: 'Mastercard',gradient: 'linear-gradient(135deg,#EB001B,#F79E1B,#FF5F00)' },
    AMEX:      { label: 'AMEX',      gradient: 'linear-gradient(135deg,#2E77BC,#006FCF)' },
    DISCOVER:  { label: 'Discover',  gradient: 'linear-gradient(135deg,#F58220,#111827)' },
    TROY:      { label: 'TROY',      gradient: 'linear-gradient(135deg,#00AEEF,#003B71,#111827)' },
    MIR:       { label: 'MIR',       gradient: 'linear-gradient(135deg,#00A551,#0072BC,#111827)' },
    UNIONPAY:  { label: 'UnionPay',  gradient: 'linear-gradient(135deg,#E21836,#00447C,#007A3D)' },
    JCB:       { label: 'JCB',       gradient: 'linear-gradient(135deg,#0B5CAD,#D71920,#009A44)' },
    UNKNOWN:   { label: '',          gradient: 'linear-gradient(135deg,#4B5563,#111827)' },
  };
  var bs = brandStyle[_brand] || brandStyle.UNKNOWN;

  var digits = _number.replace(/\D/g, '');
  var isAmex = _brand === 'AMEX';
  var maxLen  = isAmex ? 15 : 16;
  var padded  = digits.padEnd(maxLen, '•');
  var masked;
  if (isAmex) {
    masked = padded.slice(0,4) + ' ' + padded.slice(4,10) + ' ' + padded.slice(10,15);
  } else {
    masked = padded.slice(0,4) + ' ' + padded.slice(4,8) + ' ' + padded.slice(8,12) + ' ' + padded.slice(12,16);
  }

  var cvvStars = _cvv ? '•'.repeat(_cvv.length) : '•••';
%>

  


    <%# Front %>
    

      

        

          

          

        
        <% if (bs.label) { %>
        <%= bs.label %>
        <% } %>
      
      
<%= masked %>
      

        

          
Card Holder
          

            <%= _name || '••••• •••••' %>
          
        
        

          
Expires
          
<%= _month %>/<%= _year %>
        
      
    

    <%# Back %>
    

      

      

        

        

          
CVV
          
<%= cvvStars %>
        
      
      <% if (bs.label) { %>
      
<%= bs.label %>
      <% } %>