(() => {
    const initMobileNavigation = () => {
        const drawer = document.querySelector('[data-mobile-drawer]');
        const backdrop = document.querySelector('[data-mobile-backdrop]');
        if (!drawer || !backdrop) return;

        const openButtons = document.querySelectorAll('[data-mobile-nav-toggle]');
        const closeButtons = document.querySelectorAll('[data-mobile-nav-close]');
        const page = document.documentElement;

        const setOpen = (open) => {
            drawer.classList.toggle('open', open);
            backdrop.hidden = !open;
            backdrop.classList.toggle('open', open);
            drawer.setAttribute('aria-hidden', open ? 'false' : 'true');
            page.classList.toggle('mobile-menu-open', open);
            document.body.classList.toggle('mobile-menu-open', open);
            if (open) {
                drawer.scrollTop = 0;
                const firstLink = drawer.querySelector('a, button');
                firstLink?.focus({ preventScroll: true });
            }
        };

        // Use event listeners on every More/menu button. This also works if
        // another component renders a second mobile trigger later.
        openButtons.forEach((button) => {
            button.addEventListener('click', (event) => {
                event.preventDefault();
                event.stopPropagation();
                setOpen(true);
            });
        });

        closeButtons.forEach((button) => {
            button.addEventListener('click', (event) => {
                event.preventDefault();
                setOpen(false);
            });
        });

        backdrop.addEventListener('click', () => setOpen(false));

        drawer.addEventListener('click', (event) => {
            const link = event.target.closest('a');
            if (link) setOpen(false);
        });

        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape') setOpen(false);
        });

        // Prevent background scrolling while allowing the drawer itself to scroll.
        drawer.addEventListener('touchmove', (event) => event.stopPropagation(), { passive: true });
    };

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initMobileNavigation, { once: true });
    } else {
        initMobileNavigation();
    }
})();


(function initPasswordToggles(){
    const run = () => {
        document.querySelectorAll('[data-password-toggle]').forEach((button) => {
            if (button.dataset.bound === '1') return;
            button.dataset.bound = '1';
            button.addEventListener('click', () => {
                const input = document.getElementById(button.dataset.passwordToggle);
                if (!input) return;
                const visible = input.type === 'text';
                input.type = visible ? 'password' : 'text';
                button.textContent = visible ? 'Show' : 'Hide';
                button.setAttribute('aria-label', visible ? 'Show password' : 'Hide password');
            });
        });
    };
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', run, {once:true}); else run();
})();
