{{-- Mini script générique de spinner réutilisable sur toutes les pages
     membre (dashboard, parcours 2FA, etc.).

     Deux modes au choix sur un <button type="submit"> :

       1. data-spinner (+ data-spinner-loading-text="…" optionnel)
          Remplace tout le contenu du bouton par : « spinner + libellé de chargement ».
          À privilégier pour les CTA principaux (« Activer », « Valider », etc.).

       2. data-spinner-inline
          Conserve le contenu d'origine et ajoute simplement un petit spinner
          juste à droite du libellé. Utile pour des liens / actions secondaires
          (« Renvoyer le code », « Changer de méthode »…) où l'on veut juste un
          feedback discret sans masquer le texte cliqué.

     Dans tous les cas le bouton est désactivé pendant la requête : le submit
     HTML natif suit son cours et la redirection serveur s'effectue normalement. --}}
<script>
(function () {
    var SPINNER_HTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';

    function escapeHtml(text) {
        return String(text)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    }

    function activateReplace(btn) {
        if (!btn.dataset.originalHtml) {
            btn.dataset.originalHtml = btn.innerHTML;
        }
        var loadingText = btn.dataset.spinnerLoadingText || btn.textContent.trim();
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>' +
            '<span>' + escapeHtml(loadingText) + '</span>';
    }

    function activateInline(btn) {
        if (btn.querySelector('[data-spinner-inline-mark]')) return;
        if (!btn.classList.contains('d-inline-flex')) {
            btn.classList.add('d-inline-flex', 'align-items-center');
        }
        var node = document.createElement('span');
        node.className = 'ms-2';
        node.setAttribute('data-spinner-inline-mark', '');
        node.innerHTML = SPINNER_HTML;
        btn.appendChild(node);
    }

    function bind(btn, mode) {
        var form = btn.closest('form');
        if (!form) return;

        form.addEventListener('submit', function () {
            if (typeof form.checkValidity === 'function' && !form.checkValidity()) {
                return;
            }

            btn.disabled = true;
            btn.setAttribute('aria-busy', 'true');

            if (mode === 'inline') {
                activateInline(btn);
            } else {
                activateReplace(btn);
            }
        });
    }

    document.querySelectorAll('button[data-spinner]').forEach(function (btn) {
        bind(btn, 'replace');
    });
    document.querySelectorAll('button[data-spinner-inline]').forEach(function (btn) {
        bind(btn, 'inline');
    });
})();
</script>