{{define "password_change_form"}}
<form id="password-change-form"
      hx-put="/profile/password"
      hx-target="#password-change-section"
      hx-swap="innerHTML"
      hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'
      onsubmit="return mciasPwChangeConfirm(this)">
  <div class="form-group">
    <label for="current_password">Current Password</label>
    <input type="password" id="current_password" name="current_password"
           class="form-control" autocomplete="current-password"
           placeholder="Your current password" required>
  </div>
  <div class="form-group" style="margin-top:.5rem">
    <label for="new_password">New Password</label>
    <input type="password" id="new_password" name="new_password"
           class="form-control" autocomplete="new-password"
           placeholder="Minimum 12 characters" required minlength="12">
  </div>
  <div class="form-group" style="margin-top:.5rem">
    <label for="confirm_password">Confirm New Password</label>
    <input type="password" id="confirm_password" name="confirm_password"
           class="form-control" autocomplete="new-password"
           placeholder="Repeat new password" required minlength="12">
  </div>
  <div id="pw-change-error" role="alert"
       style="display:none;color:var(--color-danger,#c0392b);font-size:.85rem;margin-top:.35rem"></div>
  <button type="submit" class="btn btn-primary btn-sm" style="margin-top:.75rem">
    Change Password
  </button>
</form>
<script>
function mciasPwChangeConfirm(form) {
  var pw  = form.querySelector('#new_password').value;
  var cfm = form.querySelector('#confirm_password').value;
  var err = form.querySelector('#pw-change-error');
  if (pw !== cfm) {
    err.textContent = 'Passwords do not match.';
    err.style.display = 'block';
    return false;
  }
  err.style.display = 'none';
  return true;
}
</script>
{{end}}

{{define "password_change_result"}}
{{if .Flash}}
<div class="alert alert-success" role="alert">{{.Flash}}</div>
{{end}}
{{template "password_change_form" .}}
{{end}}