<div class="ecp-component ecp_JoinList">
  <h2 aria-describedby="ecpi_joinlist_info">{message:JoinList/Title}</h2>
  <div id="ecpi_joinlist_info" class="ecp-html-content">{message:JoinList/SummaryHTML}</div>

  <form class="ecp-form">
    <div class="ecp-section" role="region" aria-labelledby="ecpi_login_title" aria-describedby="ecpi_login_info">
      <h3 id="ecpi_login_title">{message:JoinList/LoginTitle}</h3>
      <p id="ecpi_login_info" class="ecp-summary">{message:JoinList/LoginInfo}</p>
      
      <div class="ecp-form-fieldset-scrunched">
        <!-- TODO_ADA: remove
        <span data-ecp-handle-input-error="email_address_invalid_template" class="ecp_error_message">{message:JoinList/Validation/email_address_invalid_template}</span>
        -->
        <input type="text" name="email_address" placeholder="{message:JoinList/EmailInput}" aria-label="{message:JoinList/EmailInputLabel}" autocomplete="email" required>
        <input type="password" name="password_1" placeholder="{message:JoinList/PasswordInput1}" aria-label="{message:JoinList/PasswordInput1Label}" autocomplete="new-password" required>
        <input type="password" name="password_2" placeholder="{message:JoinList/PasswordInput2}" aria-label="{message:JoinList/PasswordInput2Label}" autocomplete="new-password" required>
      </div>
    </div>

    <div class="ecp-section" role="region" aria-labelledby="ecpi_address_title" aria-describedby="ecpi_address_info">
      <h3 id="ecpi_address_title">{message:JoinList/AddressTitle}</h3>
      <p id="ecpi_address_info" class="ecp-summary">{message:JoinList/AddressInfo}</p>
      
      <div class="ecp-form-fieldset">
        <select name="country_code" data-ecp-action="change-country" aria-label="{message:JoinList/CountryCodeLabel}" autocomplete="country" required>
          <!-- | Address__CountryOption template | -->
        </select>
      </div>
      
      <div class="ecp-form-fieldset-scrunched">
        <input type="text" name="first_name" placeholder="{message:JoinList/FirstNameInput}" aria-label="{message:JoinList/FirstNameInputLabel}" autocomplete="given-name" required>
        <input type="text" name="last_name" placeholder="{message:JoinList/LastNameInput}" aria-label="{message:JoinList/LastNameInputLabel}" autocomplete="family-name" required>
        <input type="text" name="company_name" placeholder="{message:JoinList/CompanyNameInput}" aria-label="{message:JoinList/CompanyNameInputLabel}" autocomplete="organization">
        <input type="text" name="address_line_1" placeholder="{message:JoinList/AddressLine1Input}" aria-label="{message:JoinList/AddressLine1InputLabel}" autocomplete="address-line1" required>
        <input type="text" name="address_line_2" placeholder="{message:JoinList/AddressLine2Input}" aria-label="{message:JoinList/AddressLine2InputLabel}" autocomplete="address-line2">
        <input type="text" name="city" placeholder="{message:JoinList/CityInput}" aria-label="{message:JoinList/CityInputLabel}" autocomplete="address-level2" required>
        <select name="state_code" aria-label="{message:JoinList/StateCodeLabel}" autocomplete="address-level1" required>
          <!-- | Address__StateOption template | -->
        </select>
        <input type="text" name="region" placeholder="{message:JoinList/RegionInput}" aria-label="{message:JoinList/RegionInputLabel}" autocomplete="address-level1">
        <input type="text" name="postal_code" placeholder="{message:JoinList/PostalCodeInput}" aria-label="{message:JoinList/PostalCodeInputLabel}" autocomplete="postal-code" required>
        <input type="text" name="zip_extension" placeholder="{message:JoinList/ZipExtensionInput}" maxlength="4" aria-label="{message:JoinList/ZipExtensionInputLabel}" autocomplete="xyzpdq">
      </div>
    </div>

    <div class="ecp-section" role="region" aria-labelledby="ecpi_additional_title" aria-describedby="ecpi_additional_info">
      <h3 id="ecpi_additional_title">{message:JoinList/AdditionalInfoTitle}</h3>
      <p id="ecpi_additional_info" class="ecp-summary">{message:JoinList/AdditionalInfoInfo}</p>
      
      <div class="ecp-form-fieldset-scrunched">
        <input type="text" name="birth_date" placeholder="{message:JoinList/BirthDateInput}" aria-label="{message:JoinList/BirthDateInputLabel}" autocomplete="bday" required>
      </div>
      
      <div class="ecp-form-fieldset-scrunched">
        <input type="text" name="phone_1" placeholder="{message:JoinList/Phone1Input}" aria-label="{message:JoinList/Phone1InputLabel}" autocomplete="home tel">
        <input type="text" name="phone_2" placeholder="{message:JoinList/Phone2Input}" aria-label="{message:JoinList/Phone2InputLabel}" autocomplete="work tel">
        <input type="text" name="mobile_phone" placeholder="{message:JoinList/MobilePhoneInput}" aria-label="{message:JoinList/MobilePhoneInputLabel}" autocomplete="mobile tel">
      </div>
    </div>

    <div class="ecp-section" data-ecp-handle="customer_tags_section" role="region" aria-labelledby="ecpi_tags_title">
      <h3 id="ecpi_tags_title">{message:JoinList/TagsTitle}</h3>
      <div data-ecp-handle="customer_tags">
        <!-- 
          | CustomerTag__Single template |
          or
          | CustomerTag__Multiple template | 
        -->
      </div>
    </div>

    <div class="ecp-section">
      <label for="ecpi_account_note">{message:JoinList/NotesLabel}</label>
      <textarea id="ecpi_account_note" name="account_note" rows="4"></textarea>
    </div>
    
    <button data-ecp-action="save" aria-label="{message:JoinList/SaveButtonLabel}">{message:JoinList/SaveButton}</button>
  </form>
</div>