<fieldset>
  <p 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', @previous_cards.none? %> <%= t(:use_new_cc) %></label>
  </p>
  <div id="card_form" data-hook>
    <%= image_tag 'creditcards/creditcard.gif', :id => 'creditcard-image' %>
    <% param_prefix = "payment_source[#{payment_method.id}]" %>

    <div data-hook="card_number">
      <%= label_tag nil, t(:card_number) %><br />
      <%= text_field_tag "#{param_prefix}[number]", '', :class => 'required', :size => 19, :maxlength => 19 %>
      <span class="required">*</span>
      &nbsp;
      <span id="card_type" style="display:none;">
        ( <span id="looks_like" ><%= t(:card_type_is) %> <span id="type"></span></span>
          <span id="unrecognized"><%= t(:unrecognized_card_type) %></span>
        )
      </span>
    </div>
    <div data-hook="card_expiration">
      <%= label_tag nil, t(:expiration) %><br />
      <%= select_month(Date.today, :prefix => param_prefix, :field_name => 'month', :use_month_numbers => true, :class => 'required') %>
      <%= select_year(Date.today, :prefix => param_prefix, :field_name => 'year', :start_year => Date.today.year, :end_year => Date.today.year + 15, :class => 'required') %>
      <span class="required">*</span>
    </div>
    <div data-hook="card_code">
      <%= label_tag nil, t(:card_code) %><br />
      <%= text_field_tag "#{param_prefix}[verification_value]", '', :class => 'required', :size => 5 %>
      <span class="required">*</span>
      <a href="/content/cvv" target="_blank" onclick="window.open(this.href,'cvv_info','left=20,top=20,width=500,height=500,toolbar=0,resizable=0,scrollbars=1');return false">
        (<%= t(:whats_this) %>)
      </a>
    </div>

  </div>

</fieldset>
