<div class="ecp-component ecp_CreateShippingAddress--checkout">
  <h2 aria-describedby="ecpi_co__csa_info">{message:CreateShippingAddress/Title}</h2>
    <div data-ecp-handle="progress_bar">
    <!-- | Checkout__ProgressBar template | -->
  </div>
  <p id="ecpi_co__csa_info" class="ecp-summary">{message:CreateShippingAddress/Summary}</p>
  <p data-ecp-handle="virtual_giftcard_info">{message:CreateShippingAddress/VirtualGiftCardInfo}</p>
  <p data-ecp-handle="pickup_link"><a href="#" class="ecp-option" data-ecp-action="load-pickup">{message:CreateShippingAddress/PreferPickupLink}</a></p>
  
  <form class="ecp-form">
    <div class="ecp-form-fieldset">
      <select name="country_code" data-ecp-action="change-country" aria-label="{message:CreateShippingAddress/CountryCodeLabel}" autocomplete="shipping country" required>
        <!-- | Address__CountryOption template | -->
      </select>
    </div>
    <div class="ecp-form-fieldset-scrunched">
      <input type="text" name="first_name" placeholder="{message:CreateShippingAddress/FirstNameInput}" aria-label="{message:CreateShippingAddress/FirstNameInputLabel}" autocomplete="shipping given-name" required>
      <input type="text" name="last_name" placeholder="{message:CreateShippingAddress/LastNameInput}" aria-label="{message:CreateShippingAddress/LastNameInputLabel}" autocomplete="shipping family-name" required>
      <input type="text" name="company_name" placeholder="{message:CreateShippingAddress/CompanyNameInput}" aria-label="{message:CreateShippingAddress/CompanyNameInputLabel}" autocomplete="shipping organization">
      <input type="text" name="address_line_1" placeholder="{message:CreateShippingAddress/AddressLine1Input}" aria-label="{message:CreateShippingAddress/AddressLine1InputLabel}" autocomplete="shipping address-line1" required>
      <input type="text" name="address_line_2" placeholder="{message:CreateShippingAddress/AddressLine2Input}" aria-label="{message:CreateShippingAddress/AddressLine2InputLabel}" autocomplete="shipping address-line2">
      <input type="text" name="city" placeholder="{message:CreateShippingAddress/CityInput}" aria-label="{message:CreateShippingAddress/CityInputLabel}" autocomplete="shipping address-level2" required>
      <select name="state_code" aria-label="{message:CreateShippingAddress/StateCodeLabel}" autocomplete="shipping address-level1" required>
        <!-- | Address__StateOption template | -->
      </select>
      <input type="text" name="region" placeholder="{message:CreateShippingAddress/RegionInput}" aria-label="{message:CreateShippingAddress/RegionInputLabel}" autocomplete="shipping address-level1">
      <input type="text" name="postal_code" placeholder="{message:CreateShippingAddress/PostalCodeInput}" aria-label="{message:CreateShippingAddress/PostalCodeInputLabel}" autocomplete="shipping postal-code" required>
      <input type="text" name="zip_extension" placeholder="{message:CreateShippingAddress/ZipExtensionInput}" maxlength="4" aria-label="{message:CreateShippingAddress/ZipExtensionInputLabel}" autocomplete="xyzpdq">
    </div>
    <p class="ecp-summary">{message:CreateShippingAddress/PhoneAndBirthDateInfo}</p>
    <div class="ecp-form-fieldset-scrunched">
      <input type="text" name="birth_date" placeholder="{message:CreateShippingAddress/BirthDateInput}" aria-label="{message:CreateShippingAddress/BirthDateInputLabel}" autocomplete="bday" required>
      <input type="text" name="phone" placeholder="{message:CreateShippingAddress/PhoneInput}" aria-label="{message:CreateShippingAddress/PhoneInputLabel}" autocomplete="mobile tel" required>
    </div>
    <div data-ecp-handle="make_default_section">
      <p id="ecpi_co__csa_options" class="ecp-summary">{message:CreateShippingAddress/MakeDefaultInfo}</p>
      <ul class="ecp-form-checkboxes" role="listbox" tabindex="0" aria-labelledby="ecpi_co__csa_options">
        <li><input type="checkbox" id="ecpi_co__csa_option_1" name="is_default" role="option"><label for="ecpi_co__csa_option_1">{message:CreateShippingAddress/MakeDefaultYesNo}</label></li>
      </ul>
    </div>
    <div data-ecp-handle="one_button">
      <button data-ecp-action="save" aria-label="{message:CreateShippingAddress/SaveButtonLabel}">{message:CreateShippingAddress/SaveButton}</button>
    </div>
    <div class="ecp-form-buttonset-2 ecp-clearfix" data-ecp-handle="two_buttons">
        <button class="ecp-secondary" data-ecp-action="cancel" aria-label="{message:CreateShippingAddress/CancelButtonLabel}">{message:CreateShippingAddress/CancelButton}</button>
        <button data-ecp-action="save" aria-label="{message:CreateShippingAddress/SaveButtonLabel}">{message:CreateShippingAddress/SaveButton}</button>
      </div>
  </form>
</div>