<fieldset class="no-border-bottom js-edit-credit-card">
  <legend><%= payment_method.name %></legend>

  <% if previous_cards.any? %>
    <div class="field" data-hook="previous_cards">
      <% previous_cards.each do |card| %>
        <label><%= radio_button_tag :card, card.id, card == previous_cards.first %> <%= card.display_number %><br></label>
      <% end %>
      <label><%= radio_button_tag :card, 'new', false, { id: "card_new#{payment_method.id}" } %> <%= t('spree.use_new_cc') %></label>
    </div>
  <% end %>

  <div id="card_form<%= payment_method.id %>" data-hook class="js-new-credit-card-form">
    <% param_prefix = "payment_source[#{payment_method.id}]" %>
    <div class="row">
      <div class="col-6">
        <div data-hook="card_number">
          <div class="field">
            <%= hidden_field_tag "#{param_prefix}[cc_type]", '', {class: 'ccType'} %>
            <%= label_tag "card_number#{payment_method.id}", Spree::CreditCard.human_attribute_name(:number), class: 'required' %>
            <%= text_field_tag "#{param_prefix}[number]", '', class: 'required fullwidth cardNumber', id: "card_number#{payment_method.id}", maxlength: 19 %>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div data-hook="card_name">
          <div class="field">
            <%= label_tag "card_name#{payment_method.id}", Spree::CreditCard.human_attribute_name(:name), class: 'required' %>
            <%= text_field_tag "#{param_prefix}[name]", '', id: "card_name#{payment_method.id}", class: 'required fullwidth', maxlength: 19 %>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        <div data-hook="card_expiration" class="field">
          <%= label_tag "card_expiry#{payment_method.id}", Spree::CreditCard.human_attribute_name(:expiration), class: 'required' %>
          <%= text_field_tag "#{param_prefix}[expiry]", '', id: "card_expiry#{payment_method.id}", class: "required cardExpiry fullwidth", placeholder: "MM / YY" %>
        </div>
      </div>
      <div class="col-6">
        <div data-hook="card_code" class="field">
          <%= label_tag "card_code#{payment_method.id}", Spree::CreditCard.human_attribute_name(:card_code), class: 'required' %>
          <%= text_field_tag "#{param_prefix}[verification_value]", '', id: "card_code#{payment_method.id}", class: 'required fullwidth cardCode', size: 5 %>
        </div>
      </div>
    </div>
  </div>
</fieldset>

<fieldset>
  <legend><%= t('spree.billing_address') %></legend>
  <% address = @order.bill_address || @order.ship_address || Spree::Address.build_default %>
  <%= fields_for "#{param_prefix}[address_attributes]", address do |f| %>
    <%= render partial: 'spree/admin/shared/address_form', locals: { f: f, type: "billing" } %>
  <% end %>
</fieldset>
