<div class="ecp-component ecp_JoinClub__CreateShippingAddress">
  <h2 aria-describedby="ecpi_jc__csa_info">{message:club_tier_name}</h2>
  <div data-ecp-handle="progress_bar">
    <!-- | JoinClub__ProgressBar template | -->
  </div>
  <p id="ecpi_jc__csa_info" class="ecp-summary">{message:JoinClub/CreateShippingAddress/Summary}</p>
  <form class="ecp-form">
    <div class="ecp-form-fieldset">
      <select name="country_code" data-ecp-action="change-country" aria-label="{message:JoinClub/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:JoinClub/CreateShippingAddress/FirstNameInput}" aria-label="{message:JoinClub/CreateShippingAddress/FirstNameInputLabel}" autocomplete="shipping given-name" required>
      <input type="text" name="last_name" placeholder="{message:JoinClub/CreateShippingAddress/LastNameInput}" aria-label="{message:JoinClub/CreateShippingAddress/LastNameInputLabel}" autocomplete="shipping family-name" required>
    </div>
    <div class="ecp-form-fieldset-scrunched">
      <input type="text" name="company_name" placeholder="{message:JoinClub/CreateShippingAddress/CompanyNameInput}" aria-label="{message:JoinClub/CreateShippingAddress/CompanyNameInputLabel}" autocomplete="shipping organization">
    </div>
    <div class="ecp-form-fieldset-scrunched">
      <input type="text" name="address_line_1" placeholder="{message:JoinClub/CreateShippingAddress/AddressLine1Input}" aria-label="{message:JoinClub/CreateShippingAddress/AddressLine1InputLabel}" autocomplete="shipping address-line1" required>
      <input type="text" name="address_line_2" placeholder="{message:JoinClub/CreateShippingAddress/AddressLine2Input}" aria-label="{message:JoinClub/CreateShippingAddress/AddressLine2InputLabel}" autocomplete="shipping address-line2">
      <input type="text" name="city" placeholder="{message:JoinClub/CreateShippingAddress/CityInput}" aria-label="{message:JoinClub/CreateShippingAddress/CityInputLabel}" autocomplete="shipping address-level2" required>
      <select name="state_code" aria-label="{message:JoinClub/CreateShippingAddress/StateCodeLabel}" autocomplete="shipping address-level1" required>
        <!-- | Address__StateOption template | -->
      </select>
      <input type="text" name="region" placeholder="{message:JoinClub/CreateShippingAddress/RegionInput}" aria-label="{message:JoinClub/CreateShippingAddress/RegionInputLabel}" autocomplete="shipping address-level1">
      <input type="text" name="postal_code" placeholder="{message:JoinClub/CreateShippingAddress/PostalCodeInput}" aria-label="{message:JoinClub/CreateShippingAddress/PostalCodeInputLabel}" autocomplete="shipping postal-code" required>
      <input type="text" name="zip_extension" placeholder="{message:JoinClub/CreateShippingAddress/ZipExtensionInput}" maxlength="4" aria-label="{message:JoinClub/CreateShippingAddress/ZipExtensionInputLabel}" autocomplete="xyzpdq">
    </div>
    <p class="ecp-form-tip">{message:JoinClub/CreateShippingAddress/PhoneAndBirthDateTip}</p>
    <div class="ecp-form-fieldset-scrunched">
      <input type="text" name="birth_date" placeholder="{message:JoinClub/CreateShippingAddress/BirthDateInput}" aria-label="{message:JoinClub/CreateShippingAddress/BirthDateInputLabel}" autocomplete="bday" required>
      <input type="text" name="phone" placeholder="{message:JoinClub/CreateShippingAddress/PhoneInput}" aria-label="{message:JoinClub/CreateShippingAddress/PhoneInputLabel}" autocomplete="mobile tel" required>
    </div>
    <button data-ecp-action="continue" aria-label="{message:JoinClub/CreateShippingAddress/ContinueButtonLabel}">{message:JoinClub/CreateShippingAddress/ContinueButton}</button>
  </form>
</div>