document.addEventListener('DOMContentLoaded', () => {
    const switcherLogin = document.querySelector('.switcher-login');
    const switcherSignup = document.querySelector('.switcher-signup');
    const formLoginWrapper = document.querySelector('.form-login-wrapper');
    const formSignupWrapper = document.querySelector('.form-signup-wrapper');

    switcherLogin.addEventListener('click', () => {
        switcherLogin.classList.add('is-active');
        switcherSignup.classList.remove('is-active');
        formLoginWrapper.classList.add('is-active');
        formSignupWrapper.classList.remove('is-active');
    });

    switcherSignup.addEventListener('click', () => {
        switcherSignup.classList.add('is-active');
        switcherLogin.classList.remove('is-active');
        formSignupWrapper.classList.add('is-active');
        formLoginWrapper.classList.remove('is-active');
    });

    const togglePasswordIcons = document.querySelectorAll('.toggle-password');
    togglePasswordIcons.forEach(icon => {
        icon.addEventListener('click', () => {
            const input = icon.previousElementSibling;
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    });
});