{{define "public/logout_confirm_bootstrap_frag"}}
<!--
  supchat — Bootstrap Modal 退出确认（前台/后台 a.js-logout-confirm）
  对齐分册 D§10 / SupDoc：禁止 window.confirm / layer 作为主路径。
-->
<div class="modal fade" id="utLogoutConfirmModal" tabindex="-1" aria-labelledby="utLogoutConfirmModalLabel" 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-6 fw-semibold ut-logout-confirm-title" id="utLogoutConfirmModalLabel"></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 pb-2 text-secondary small ut-logout-confirm-body"></div>
      <div class="modal-footer border-0 pt-0 gap-2">
        <button type="button" class="btn btn-light btn-sm ut-logout-confirm-cancel" data-bs-dismiss="modal"></button>
        <button type="button" class="btn btn-danger btn-sm ut-logout-confirm-ok"></button>
      </div>
    </div>
  </div>
</div>
<script>
window.utLogoutConfirmDefaults = {
  ok: {{jsString (Tp "public_header" "user_modal_confirm_ok")}},
  cancel: {{jsString (Tp "public_header" "user_modal_confirm_cancel")}},
  fallback: {{jsString (T "logout_confirm_fallback")}}
};
</script>
<script>
(function () {
  'use strict';
  if (window.__utLogoutBootstrapBound) return;
  window.__utLogoutBootstrapBound = true;

  var pendingHref = '/logout';
  var modalEl = document.getElementById('utLogoutConfirmModal');

  function bindOkOnce() {
    if (!modalEl) return;
    var btnOk = modalEl.querySelector('.ut-logout-confirm-ok');
    if (!btnOk || btnOk.getAttribute('data-ut-bound') === '1') return;
    btnOk.setAttribute('data-ut-bound', '1');
    btnOk.addEventListener('click', function () {
      window.location.href = pendingHref;
    });
  }

  bindOkOnce();

  document.addEventListener(
    'click',
    function (e) {
      var a = e.target && e.target.closest && e.target.closest('a.js-logout-confirm');
      if (!a) return;
      e.preventDefault();
      pendingHref = a.getAttribute('href') || '/logout';
      var title = a.getAttribute('data-confirm-title') || '';
      var msg = a.getAttribute('data-confirm-msg') || '';
      var okTxt = a.getAttribute('data-confirm-ok') || (window.utLogoutConfirmDefaults && window.utLogoutConfirmDefaults.ok) || '';
      var cancelTxt = a.getAttribute('data-confirm-cancel') || (window.utLogoutConfirmDefaults && window.utLogoutConfirmDefaults.cancel) || '';

      var elModal = document.getElementById('utLogoutConfirmModal');
      if (!elModal || !window.bootstrap || typeof bootstrap.Modal !== 'function') {
        var fb = (window.utLogoutConfirmDefaults && window.utLogoutConfirmDefaults.fallback) || '';
        if (window.confirm(msg || title || fb)) {
          window.location.href = pendingHref;
        }
        return;
      }

      var titleEl = elModal.querySelector('.ut-logout-confirm-title');
      var bodyEl = elModal.querySelector('.ut-logout-confirm-body');
      var btnOk = elModal.querySelector('.ut-logout-confirm-ok');
      var btnCancel = elModal.querySelector('.ut-logout-confirm-cancel');
      if (titleEl) titleEl.textContent = title;
      if (bodyEl) bodyEl.textContent = msg;
      if (btnOk) btnOk.textContent = okTxt;
      if (btnCancel) btnCancel.textContent = cancelTxt;

      bootstrap.Modal.getOrCreateInstance(elModal).show();
    },
    true
  );
})();
</script>
{{end}}