<div class="ecp-component ecp_EditProfile">
  <h2 aria-describedby="ecpi_editprofile_info">{message:EditProfile/Title}</h2>
  <p id="ecpi_editprofile_info" class="ecp-summary">{message:EditProfile/Summary}</p>
  <form class="ecp-form">
    <div class="ecp-section" role="region" aria-labelledby="ecpi_info_title">
      <h3 id="ecpi_info_title">{message:EditProfile/PersonalInfoTitle}</h3>
      <div class="ecp-form-fieldset-scrunched">
        <input type="text" name="first_name" placeholder="{message:EditProfile/FirstNameInput}" aria-label="{message:EditProfile/FirstNameInputLabel}" autocomplete="given-name" required>
        <input type="text" name="last_name" placeholder="{message:EditProfile/LastNameInput}" aria-label="{message:EditProfile/LastNameInputLabel}" autocomplete="family-name" required>
      </div>
      <div class="ecp-form-fieldset-scrunched">
        <input type="text" name="company_name" placeholder="{message:EditProfile/CompanyNameInput}" aria-label="{message:EditProfile/CompanyNameInputLabel}" autocomplete="organization">
      </div>
      <div class="ecp-form-fieldset-scrunched">
        <input type="text" name="phone_1" placeholder="{message:EditProfile/Phone1Input}" aria-label="{message:EditProfile/Phone1InputLabel}" autocomplete="home tel">
        <input type="text" name="phone_2" placeholder="{message:EditProfile/Phone2Input}" aria-label="{message:EditProfile/Phone2InputLabel}" autocomplete="work tel">
        <input type="text" name="mobile_phone" placeholder="{message:EditProfile/MobilePhoneInput}" aria-label="{message:EditProfile/MobilePhoneInputLabel}" autocomplete="mobile tel">
      </div>
      <div class="ecp-form-fieldset-scrunched">
        <input type="text" name="birth_date" placeholder="{message:EditProfile/BirthDateInput}" aria-label="{message:EditProfile/BirthDateInputLabel}" autocomplete="bday" required>
      </div>
    </div>

    <div class="ecp-section" role="region" aria-labelledby="ecpi_prefs_title">
      <h3 id="ecpi_prefs_title">{message:EditProfile/PreferencesTitle}</h3>
      <p class="ecp-form-tip">{message:EditProfile/PreferencesTip}</p>
      <ul class="ecp-form-checkboxes">
        <li><label><input type="checkbox" name="is_ok_to_email">{message:EditProfile/OKToEmail}</label></li>
        <li><label><input type="checkbox" name="is_ok_to_mail">{message:EditProfile/OKToMail}</label></li>
      </ul>
    </div>

    <div class="ecp-section" data-ecp-handle="customer_tags_section" role="region" aria-labelledby="ecpi_tags_title">
      <h3 class="ecp-bottomline" id="ecpi_tags_title">{message:EditProfile/TagsTitle}</h3>
      <div data-ecp-handle="customer_tags">
        <!-- 
          | CustomerTag__Single template |
          or
          | CustomerTag__Multiple template | 
        -->
      </div>
    </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">{message:EditProfile/CancelButton}</button>
        </span>
        <span class="ecp-grid-col-6">
          <button data-ecp-action="save">{message:EditProfile/SaveButton}</button>
        </span>
      </div>
    </div>
  </form>
</div>