<div class="ecp-component ecp_CreateBillingAddress">
  <h2 aria-describedby="ecpi_createbillingaddress_info">{message:CreateBillingAddress/Title}</h2>
  <p id="ecpi_createbillingaddress_info" class="ecp-summary">{message:CreateBillingAddress/Summary}</p>
  <form class="ecp-form">
    <div class="ecp-form-fieldset">
      <select name="country_code" data-ecp-action="change-country" aria-label="{message:CreateBillingAddress/CountryCodeLabel}" autocomplete="billing country" required>
        <!-- | Address__CountryOption template | -->
      </select>
    </div>
    <div class="ecp-form-fieldset-scrunched">
      <input type="text" name="first_name" placeholder="{message:CreateBillingAddress/FirstNameInput}" aria-label="{message:CreateBillingAddress/FirstNameInputLabel}" autocomplete="billing given-name" required>
      <input type="text" name="last_name" placeholder="{message:CreateBillingAddress/LastNameInput}" aria-label="{message:CreateBillingAddress/LastNameInputLabel}" autocomplete="billing family-name" required>
      <input type="text" name="company_name" placeholder="{message:CreateBillingAddress/CompanyNameInput}" aria-label="{message:CreateBillingAddress/CompanyNameInputLabel}" autocomplete="billing organization">
      <input type="text" name="address_line_1" placeholder="{message:CreateBillingAddress/AddressLine1Input}" aria-label="{message:CreateBillingAddress/AddressLine1InputLabel}" autocomplete="billing address-line1" required>
      <input type="text" name="address_line_2" placeholder="{message:CreateBillingAddress/AddressLine2Input}" aria-label="{message:CreateBillingAddress/AddressLine2InputLabel}" autocomplete="billing address-line2">
      <input type="text" name="city" placeholder="{message:CreateBillingAddress/CityInput}" aria-label="{message:CreateBillingAddress/CityInputLabel}" autocomplete="billing address-level2" required>
      <select name="state_code" aria-label="{message:CreateBillingAddress/StateCodeLabel}" autocomplete="billing address-level1" required>
        <!-- | Address__StateOption template | -->
      </select>
      <input type="text" name="region" placeholder="{message:CreateBillingAddress/RegionInput}" aria-label="{message:CreateBillingAddress/RegionInputLabel}" autocomplete="billing address-level1">
      <input type="text" name="postal_code" placeholder="{message:CreateBillingAddress/PostalCodeInput}" aria-label="{message:CreateBillingAddress/PostalCodeInputLabel}" autocomplete="billing postal-code" required>
      <input type="text" name="zip_extension" placeholder="{message:CreateBillingAddress/ZipExtensionInput}" maxlength="4" aria-label="{message:CreateBillingAddress/ZipExtensionInputLabel}" autocomplete="xyzpdq">
    </div>
    <p class="ecp-summary">{message:CreateBillingAddress/PhoneAndBirthDateInfo}</p>
    <div class="ecp-form-fieldset-scrunched">
      <input type="text" name="birth_date" placeholder="{message:CreateBillingAddress/BirthDateInput}" aria-label="{message:CreateBillingAddress/BirthDateInputLabel}" autocomplete="bday" required>
      <input type="text" name="phone" placeholder="{message:CreateBillingAddress/PhoneInput}" aria-label="{message:CreateBillingAddress/PhoneInputLabel}" autocomplete="mobile tel" required>
    </div>
    <div class="ecp-grid">
      <div class="ecp-grid-row ecp-clearfix">
        <span class="ecp-grid-col-6">
          <button class="ecp-secondary" data-ecp-action="cancel" aria-label="{message:CreateBillingAddress/CancelButtonLabel}">{message:CreateBillingAddress/CancelButton}</button>
        </span>
        <span class="ecp-grid-col-6">
          <button data-ecp-action="save" aria-label="{message:CreateBillingAddress/SaveButtonLabel}">{message:CreateBillingAddress/SaveButton}</button>
        </span>
      </div>
    </div>
  </form>
</div>