<% address_id = address_type.chars.first %>
<div class="inner" data-hook=<%="#{address_type}_inner" %>>
  <p class="field" id=<%="#{address_id}firstname" %>>
    <%= form.label :firstname, t('spree.first_name') %><span class="required">*</span><br />
    <%= form.text_field :firstname, class: 'required', autocomplete: address_type + ' given-name', required: true, autofocus: true %>
  </p>

  <p class="field" id=<%="#{address_id}lastname" %>>
    <%= form.label :lastname, t('spree.last_name') %><br />
    <%= form.text_field :lastname, autocomplete: address_type + ' family-name' %>
  </p>

  <% if Spree::Config[:company] %>
    <p class="field" id=<%="#{address_id}company" %>>
      <%= form.label :company, t('spree.company') %><br />
      <%= form.text_field :company, autocomplete: address_type + ' organization' %>
    </p>
  <% end %>

  <p class="field" id=<%="#{address_id}address1" %>>
    <%= form.label :address1, t('spree.street_address') %><span class="required">*</span><br />
    <%= form.text_field :address1, class: 'required', autocomplete: address_type + ' address-line1',  required: true %>
  </p>

  <p class="field" id=<%="#{address_id}address2" %>>
    <%= form.label :address2, I18n.t('spree.street_address_2') %><br />
    <%= form.text_field :address2, autocomplete: address_type + ' address-line2' %>
  </p>

  <p class="field" id=<%="#{address_id}city" %>>
    <%= form.label :city, t('spree.city') %><span class="required">*</span><br />
    <%= form.text_field :city, class: 'required', autocomplete: address_type + ' address-level2',  required: true %>
  </p>

  <p class="field" id=<%="#{address_id}country" %>>
    <%= form.label :country_id, t('spree.country') %><span class="required">*</span><br />
    <span id=<%="#{address_id}country-selection" %>>
      <%= form.collection_select :country_id, available_countries, :id, :name, {},
          class: 'required',
          autocomplete: address_type + ' country-name',
          required: true
        %>
    </span>
  </p>

  <% if Spree::Config[:address_requires_state] %>
    <p class="field" id=<%="#{address_id}state" %>>
      <% have_states = !address.country.states.empty? %>
      <%= form.label :state, t('spree.state') %><span class='required' id=<%="#{address_id}state-required"%>>*</span><br/>

      <span class="js-address-fields" style="display: none;">
        <%=
          form.collection_select(
            :state_id, address.country.states, :id, :name,
            {include_blank: true},
            {
              class: have_states ? 'required' : '',
              style: have_states ? '' : 'display: none;',
              disabled: !have_states,
              autocomplete: address_type + ' address-level1',
            })
          %>
        <%=
          form.text_field(
            :state_name,
            class: !have_states ? 'required' : '',
            style: have_states ? 'display: none;' : '',
            disabled: have_states,
            autocomplete: address_type + ' address-level1',
          )
        %>
      </span>
      <noscript>
        <%= form.text_field :state_name, class: 'required', autocomplete: address_type + ' address-level1',  required: true %>
      </noscript>
    </p>
  <% end %>

  <p class="field" id=<%="#{address_id}zipcode" %>>
    <%= form.label :zipcode, t('spree.zip') %><% if address.require_zipcode? %><span class="required">*</span><% end %><br />
    <%= form.text_field :zipcode, class: "#{'required' if address.require_zipcode?}", autocomplete: address_type + ' postal-code',  required: true %>
  </p>

  <p class="field" id=<%="#{address_id}phone" %>>
    <%= form.label :phone, t('spree.phone') %><% if address.require_phone? %><span class="required">*</span><% end %><br />
    <% phone_hash = address.require_phone? ? { class: 'required', required: true } : {} %>
    <%= form.phone_field :phone, phone_hash.merge({ autocomplete: address_type + ' home tel' }) %>
  </p>

  <% if Spree::Config[:alternative_shipping_phone] %>
    <p class="field" id=<%="#{address_id}altphone" %>>
      <%= form.label :alternative_phone, t('spree.alternative_phone') %><br />
      <%= form.phone_field :alternative_phone, autocomplete: address_type + ' tel'%>
    </p>
  <% end %>
</div>