<%
  var _action     = locals.action     || '#';
  var _method     = locals.method     || 'post';
  var _cancelHref = locals.cancelHref || null;
  var _error      = locals.error      || '';
  var _errors     = locals.errors     || {};
  var _initial    = locals.initial    || {};
%>

  <% if (_error) { %>
  

    
    <%= _error %>
  
  <% } %>

  

    <%- include('../payment/CreditCardVisual', {
      brand:          _initial.brand          || 'UNKNOWN',
      cardNumber:     _initial.cardNumber     || '',
      cardholderName: _initial.cardholderName || '',
      expiryMonth:    _initial.expiryMonth    || 'MM',
      expiryYear:     _initial.expiryYear     || 'YY',
      cvv:            _initial.cvv            || ''
    }) %>
  

  <%- include('../../../ui/Input', {
    id: 'card-number', label: 'Card Number', name: 'cardNumber',
    placeholder: '1234 5678 9012 3456',
    value: _initial.cardNumber || '',
    error: _errors.cardNumber
  }) %>

  <%- include('../../../ui/Input', {
    id: 'cardholder-name', label: 'Cardholder Name', name: 'cardholderName',
    placeholder: 'Name on card',
    value: _initial.cardholderName || '',
    error: _errors.cardholderName
  }) %>

  

    <%- include('../../../ui/Input', {
      id: 'expiry', label: 'Expiry', name: 'expiry',
      placeholder: 'MM/YY',
      value: _initial.expiry || '',
      error: _errors.expiry
    }) %>
    <%- include('../../../ui/Input', {
      id: 'cvv', label: 'CVV', name: 'cvv', type: 'password',
      placeholder: '•••',
      value: '',
      error: _errors.cvv
    }) %>
  

  

    <% if (_cancelHref) { %>
    <%- include('../../../ui/Button', { variant: 'outline', children: 'Cancel', href: _cancelHref }) %>
    <% } %>
    <%- include('../../../ui/Button', { type: 'submit', children: 'Add Card' }) %>