<div class="field">
  <div class="control">
    <a href="/profile" hx-boost="true" class="button is-link is-light">Schließen</a>
  </div>
</div>
<form class="box" hx-post="/users/changepassword" hx-params="not dry" hx-target-400="#error-message"
  hx-on:change="document.getElementById('error-message').innerHTML = ''">

  <input type="hidden" name="dry" value="true" />

  <div class="field">
    <label class="label" for="currentpassword">aktuelles Passwort:</label>
    <div class="control">
      <input class="input" placeholder="**********" name="currentpassword" type="password" required>
    </div>
  </div>

  <div class="field">
    <label class="label" for="password">neues Passwort:</label>
    <div class="control">
      <input class="input" hx-post="/users/changepassword" hx-params="*" hx-trigger="keyup changed delay:500ms"
        hx-target="#password-strength" hx-target-400="#password-strength" placeholder="**********" name="password"
        type="password" required hx-swap="outerHTML" maxlength=256
        hx-on:input="document.getElementById('password-strength').innerHTML = ''">
    </div>
    <div id="password-strength" class="mb-3 help content"></div>
  </div>

  <div class="field">
    <label class="label" for="passwordretyped">neues Passwort wiederholen:</label>
    <div class="control">
      <input class="input" placeholder="**********" name="passwordretyped" type="password" maxlength=256 required>
    </div>
  </div>

  <div id="error-message" class="mb-3 help is-danger"></div>

  <div class="level">
    <input class="button is-primary level-left" type="submit" value="Passwort ändern" />
  </div>
</form>
