<% if use_billing %>
  <div class="field" style="position: absolute;margin-top: -15px;right: 0;">
    <span data-hook="use_billing">
      <%= check_box_tag 'order[use_billing]', '1', (!(@order.bill_address.empty? && @order.ship_address.empty?) && @order.bill_address.same_as?(@order.ship_address)) %>
      <%= label_tag 'order[use_billing]', Spree.t(:use_billing_address) %>
    </span>
  </div>
<% end %>

<% is_shipping_address = name == Spree.t(:shipping_address) %>
<% shipping_or_billing = is_shipping_address ? 'shipping' : 'billing' %>
<% s_or_b = is_shipping_address ? 's' : 'b' %>

<div id="<%= is_shipping_address ? 'shipping' : 'billing' %>" style="display: <%= (use_billing && (!(@order.bill_address.empty? && @order.ship_address.empty?) && @order.bill_address.eql?(@order.ship_address))) ? 'none' : 'block' %>" data-hook="address_fields">
  <div class="field <%= "#{shipping_or_billing}-row" %>">
    <%= f.label :firstname, Spree.t(:first_name) + ':' %>
    <%= f.text_field :firstname, :class => 'fullwidth' %>
  </div>
  <div class="field <%= "#{shipping_or_billing}-row" %>">
    <%= f.label :lastname, Spree.t(:last_name) + ':' %>
    <%= f.text_field :lastname, :class => 'fullwidth' %>
  </div>
  <% if Spree::Config[:company] %>
    <div class="field <%= "#{shipping_or_billing}-row" %>">
      <%= f.label :company, Spree.t(:company) + ':' %>
      <%= f.text_field :company, :class => 'fullwidth' %>
    </div>
  <% end %>
  <div class="field <%= "#{shipping_or_billing}-row" %>">
    <%= f.label :address1, Spree.t(:street_address) + ':' %>
    <%= f.text_field :address1, :class => 'fullwidth' %>
  </div>
  <div class="field <%= "#{shipping_or_billing}-row" %>">
    <%= f.label :address2, Spree.t(:street_address_2) + ':' %>
    <%= f.text_field :address2, :class => 'fullwidth' %>
  </div>
  <div class="field <%= "#{shipping_or_billing}-row" %>">
    <%= f.label :city, Spree.t(:city) + ':' %>
    <%= f.text_field :city, :class => 'fullwidth' %>
  </div>
  <div class="field <%= "#{shipping_or_billing}-row" %>">
    <%= f.label :zipcode, Spree.t(:zip) + ':' %>
    <%= f.text_field :zipcode, :class => 'fullwidth' %>
  </div>
  <div class="field <%= "#{shipping_or_billing}-row" %>">
    <%= f.label :country_id, Spree.t(:country) + ':' %>
    <span id="<%= s_or_b %>country">
      <%= f.collection_select :country_id, available_countries, :id, :name, {}, {:class => 'select2 fullwidth'} %>
    </span>
  </div>
  <div class="field <%= "#{shipping_or_billing}-row" %>">
    <%= f.label :state_id, Spree.t(:state) + ':' %>
    <span id="<%= s_or_b %>state">
      <%= f.text_field :state_name, 
            :style => "display: #{f.object.country.states.empty? ? 'block' : 'none' };",
           :disabled => !f.object.country.states.empty?, :class => 'fullwidth state_name' %>
      <%= f.collection_select :state_id, f.object.country.states.sort, :id, :name, {:include_blank => true}, {:class => 'select2 fullwidth', :style => "display: #{f.object.country.states.empty? ? 'none' : 'block' };", :disabled => f.object.country.states.empty?} %>
    </span>
  </div>
  <div class="field <%= "#{shipping_or_billing}-row" %>">
    <%= f.label :phone, Spree.t(:phone) + ':' %>
    <%= f.phone_field :phone, :class => 'fullwidth' %>
  </div>
</div>

<% content_for :head do %>
  <%= javascript_tag do -%>
    $(document).ready(function(){
      $('span#<%= s_or_b %>country .select2').on('change', function() { update_state('<%= s_or_b %>'); });
    });
  <% end -%>
<% end %>
