<div class="ecp-component ecp_ChangePassword">
  <h2 aria-describedby="ecpi_changepassword_info">{message:ChangePassword/Title}</h2>
  <p id="ecpi_changepassword_info" class="ecp-summary">{message:ChangePassword/Summary}</p>
  <form class="ecp-form">
    <div class="ecp-form-fieldset">
      <input type="text" name="username" placeholder="{message:ChangePassword/EmailInput}" aria-label="{message:ChangePassword/EmailInputLabel}" autocomplete="email" autofocus required>
    </div>
    <div class="ecp-form-fieldset">
      <input type="password" name="password" placeholder="{message:ChangePassword/PasswordInput}" aria-label="{message:ChangePassword/PasswordInputLabel}" autocomplete="current-password" autofocus required>
    </div>
    <div class="ecp-form-fieldset-scrunched">
      <input type="password" name="new_password_1" placeholder="{message:ChangePassword/NewPasswordInput1}" aria-label="{message:ChangePassword/NewPasswordInput1Label}" autocomplete="new-password" required>
      <input type="password" name="new_password_2" placeholder="{message:ChangePassword/NewPasswordInput2}" aria-label="{message:ChangePassword/NewPasswordInput2Label}" autocomplete="new-password" 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">{message:ChangePassword/CancelButton}</button>
        </span>
        <span class="ecp-grid-col-6">
          <button data-ecp-action="save">{message:ChangePassword/ChangeButton}</button>
        </span>
      </div>
    </div>
  </form>
</div>