<div class="ecp-component ecp_CreateClubSubscription">
  <h2 aria-describedby="ecpi_createclubsubscription_info">{message:CreateClubSubscription/Title}</h2>
  <p id="ecpi_createclubsubscription_info" class="ecp-summary">{message:CreateClubSubscription/Summary_template}</p>
  <form class="ecp-form">
    <div>
      <div class="ecp-section">
        <div data-ecp-handle="club_tier_info" class="ecp-card" role="region" aria-labelledby="ecpi_ccs_tier_info">
          <!-- | CreateClubSubscription__TierInfo template | -->
        </div>
        <div data-ecp-handle="club_tier_select" class="ecp-card" role="region" aria-labelledby="ecpi_ccs_tiers">
          <h3 id="ecpi_ccs_tiers">{message:CreateClubSubscription/TiersSubtitle}</h3>
          <div data-ecp-handle="tiers" role="list">
            <!-- | CreateClubSubscription__Tier template | -->
          </div>  
        </div>
        <div data-ecp-handle="custom_tier" class="ecp-card" role="region" aria-labelledby="ecpi_ccs_products">
          <h3 id="ecpi_ccs_products">{message:CreateClubSubscription/Products/Subtitle}</h3>
          <div data-ecp-handle="custom_tier_products">
            <!-- | CreateClubSubscription__CustomTier template | -->
          </div>
        </div>
        <div class="ecp-card" role="region" aria-labelledby="ecpi_ccs_addresses">
          <h3 id="ecpi_ccs_addresses">{message:CreateClubSubscription/ShippingAddressesSubtitle}</h3>
          <div data-ecp-handle="shipping_addresses" role="list">
            <!-- | CreateClubSubscription__Address template | -->
          </div>
          <div><a href="#" class="ecp-option" data-ecp-action="add-shipping-address">{message:CreateClubSubscription/AddShippingAddressLink}</a></div>
        </div>
        <div class="ecp-card" role="region" aria-labelledby="ecpi_ccs_paymentmethods">
          <h3 id="ecpi_ccs_paymentmethods">{message:CreateClubSubscription/PaymentMethodsSubtitle}</h3>
          <div data-ecp-handle="payment_methods" role="list">
            <!-- | SelectPaymentMethod__PaymentMethod template | -->
          </div>
          <div><a href="#" class="ecp-option" data-ecp-action="add-payment-method">{message:CreateClubSubscription/AddPaymentMethodLink}</a></div>
        </div>
      </div>
      <div class="ecp-section" data-ecp-handle="billing_address" role="region" aria-labelledby="ecpi_ccs_billingaddress">
        <a href="#" class="ecp-section-menu" data-ecp-action="copy-shipping-address">{message:CreateClubSubscription/BillingAddress/CopyShipToLink}</a>
        <h3 id="ecpi_ccs_billingaddress">{message:CreateClubSubscription/BillingAddress/Subtitle}</h3>
        <div class="ecp-form-fieldset-scrunched">
          <input type="text" name="first_name" placeholder="{message:CreateClubSubscription/BillingAddress/FirstNameInput}" aria-label="{message:CreateClubSubscription/BillingAddress/FirstNameInputLabel}" autocomplete="billing given-name" required>
          <input type="text" name="last_name" placeholder="{message:CreateClubSubscription/BillingAddress/LastNameInput}" aria-label="{message:CreateClubSubscription/BillingAddress/LastNameInputLabel}" autocomplete="billing family-name" required>
          <input type="text" name="company_name" placeholder="{message:CreateClubSubscription/BillingAddress/CompanyNameInput}" aria-label="{message:CreateClubSubscription/BillingAddress/CompanyNameInputLabel}" autocomplete="billing organization">
          <input type="text" name="address_line_1" placeholder="{message:CreateClubSubscription/BillingAddress/AddressLine1Input}" aria-label="{message:CreateClubSubscription/BillingAddress/AddressLine1InputLabel}" autocomplete="billing address-line1" required>
          <input type="text" name="address_line_2" placeholder="{message:CreateClubSubscription/BillingAddress/AddressLine2Input}" aria-label="{message:CreateClubSubscription/BillingAddress/AddressLine2InputLabel}" autocomplete="billing address-line2">
          <input type="text" name="city" placeholder="{message:CreateClubSubscription/BillingAddress/CityInput}" aria-label="{message:CreateClubSubscription/BillingAddress/CityInputLabel}" autocomplete="billing address-level2" required>
          <select name="state_code" aria-label="{message:CreateClubSubscription/BillingAddress/StateCodeLabel}" autocomplete="billing address-level1" required>
            <!-- | Address__StateOption template | -->
          </select>
          <input type="text" name="region" placeholder="{message:CreateClubSubscription/BillingAddress/RegionInput}" aria-label="{message:CreateClubSubscription/BillingAddress/RegionInputLabel}" autocomplete="billing address-level1">
          <input type="text" name="postal_code" placeholder="{message:CreateClubSubscription/BillingAddress/PostalCodeInput}" aria-label="{message:CreateClubSubscription/BillingAddress/PostalCodeInputLabel}" autocomplete="billing postal-code" required>
          <input type="text" name="zip_extension" placeholder="{message:CreateClubSubscription/BillingAddress/ZipExtensionInput}" maxlength="4" aria-label="{message:CreateClubSubscription/BillingAddress/ZipExtensionInputLabel}" autocomplete="xyzpdq">
          <select name="country_code" data-ecp-action="change-country" aria-label="{message:CreateClubSubscription/BillingAddress/CountryCodeLabel}" autocomplete="billing country" required>
            <!-- | Address__CountryOption template | -->
          </select>
        </div>
        <p class="ecp-summary">{message:CreateClubSubscription/BillingAddress/PhoneAndBirthDateInfo}</p>
        <div class="ecp-form-fieldset-scrunched">
          <input type="text" name="birth_date" placeholder="{message:CreateClubSubscription/BillingAddress/BirthDateInput}" aria-label="{message:CreateClubSubscription/BillingAddress/BirthDateInputLabel}" autocomplete="bday" required>
          <input type="text" name="phone" placeholder="{message:CreateClubSubscription/BillingAddress/PhoneInput}" aria-label="{message:CreateClubSubscription/BillingAddress/PhoneInputLabel}" autocomplete="mobile tel">
        </div>
      </div>
      <div class="ecp-section">
        <label for="ecpi_ccs_note">{message:CreateClubSubscription/NoteTip}</label>
        <textarea id="ecpi_ccs_note" name="note" rows="4"></textarea>
      </div>
      <div class="ecp-section">
        <div class="ecp-callout-box">
          <div class="ecp-html-content">
            <div data-ecp-handle="terms"></div>
            <label><input type="checkbox" name="is_fee_confirmed" aria-label="{message:CreateClubSubscription/ConfirmationInputLabel}" required> {message:CreateClubSubscription/ConfirmationLabel}</label>
          </div>
        </div>
      </div>
    </div>
    <div class="ecp-form-buttonset-2 ecp-clearfix">
      <button class="ecp-secondary" data-ecp-action="cancel">{message:CreateClubSubscription/CancelButton}</button>
      <button data-ecp-action="save" data-ecp-handle="save">{message:CreateClubSubscription/SaveButton}</button>
    </div>
  </form>
</div>