{{define "public/change_password_modal_frag"}}
<div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePasswordModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow">
      <div class="modal-header border-0 pb-0">
        <h2 class="modal-title fs-5 fw-semibold" id="changePasswordModalLabel">{{Tp "user_password" "user_password_title"}}</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "modal_close_aria"}}"></button>
      </div>
      <div class="modal-body pt-2">
        <form id="changePasswordForm" autocomplete="off">
          <div class="mb-3">
            <label class="form-label" for="pwdOld">{{Tp "user_password" "user_password_old"}}</label>
            <input type="password" class="form-control" name="old_password" id="pwdOld" required autocomplete="current-password">
          </div>
          <div class="mb-3">
            <label class="form-label" for="pwdNew">{{Tp "user_password" "user_password_new"}}</label>
            <input type="password" class="form-control" name="new_password" id="pwdNew" required minlength="6" autocomplete="new-password">
          </div>
          <div class="mb-2">
            <label class="form-label" for="pwdNew2">{{Tp "user_password" "user_password_new2"}}</label>
            <input type="password" class="form-control" name="new_password2" id="pwdNew2" required minlength="6" autocomplete="new-password">
          </div>
          <div class="form-text mb-2">{{Tp "user_password" "user_password_hint"}}</div>
          <div id="changePasswordErr" class="alert alert-danger d-none py-2"></div>
          <div id="changePasswordOk" class="alert alert-success d-none py-2"></div>
        </form>
      </div>
      <div class="modal-footer border-0 pt-0 gap-2">
        <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">{{T "btn_cancel"}}</button>
        <button type="button" class="btn btn-primary btn-sm" id="changePasswordSubmit">{{Tp "user_password" "user_password_submit"}}</button>
      </div>
    </div>
  </div>
</div>
<script>
(function () {
  'use strict';
  if (window.__utChangePasswordBound) return;
  window.__utChangePasswordBound = true;

  function msg(id, text, show) {
    var el = document.getElementById(id);
    if (!el) return;
    el.textContent = text || '';
    el.classList.toggle('d-none', !show);
  }

  function resetForm() {
    var form = document.getElementById('changePasswordForm');
    if (form) form.reset();
    msg('changePasswordErr', '', false);
    msg('changePasswordOk', '', false);
  }

  document.addEventListener('DOMContentLoaded', function () {
    var modalEl = document.getElementById('changePasswordModal');
    if (modalEl) {
      modalEl.addEventListener('hidden.bs.modal', resetForm);
    }

    var submitBtn = document.getElementById('changePasswordSubmit');
    var form = document.getElementById('changePasswordForm');
    if (!submitBtn || !form) return;

    function submitPassword() {
      msg('changePasswordErr', '', false);
      msg('changePasswordOk', '', false);
      var payload = {
        old_password: form.querySelector('[name=old_password]').value,
        new_password: form.querySelector('[name=new_password]').value,
        new_password2: form.querySelector('[name=new_password2]').value
      };
      fetch('/api/user/password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      }).then(function (res) {
        return res.json().then(function (data) {
          return { ok: res.ok, data: data };
        });
      }).then(function (result) {
        if (result.ok && result.data && result.data.success) {
          msg('changePasswordOk', result.data.message || '', true);
          setTimeout(function () {
            if (modalEl && window.bootstrap && bootstrap.Modal) {
              bootstrap.Modal.getOrCreateInstance(modalEl).hide();
            }
          }, 900);
          return;
        }
        msg('changePasswordErr', (result.data && result.data.message) || {{jsString (T "error_generic")}}, true);
      }).catch(function () {
        msg('changePasswordErr', {{jsString (T "error_request_failed")}}, true);
      });
    }

    submitBtn.addEventListener('click', submitPassword);
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      submitPassword();
    });
  });
})();
</script>
{{end}}