async function lockedProfile() {
    let main = document.getElementById('main')

    let response = await fetch(`http://localhost:3030/jsonstore/advanced/profiles`);
    if (!response.ok) {
        throw new Error('Error');
    }
    let data = await response.json();


    Object.values(data).forEach(el => {

        let div = document.createElement('div')
        div.className = 'profile'
        div.innerHTML = `<img src="./iconProfile2.png" class="userIcon" />
        <label>Lock</label>
        <input type="radio" name="user1Locked" value="lock" checked>
        <label>Unlock</label>
        <input type="radio" name="user1Locked" value="unlock"><br>
        <hr>
        <label>Username</label>
        <input type="text" name="user1Username" value="${el.username}" disabled readonly />
        <div class="user1Username">
        <hr>
        <label>Email:</label>
        <input type="email" name="user1Email" value="${el.email}" disabled readonly />
        <label>Age:</label>
        <input type="text" name="user1Age" value="${el.age}" disabled readonly />
        </div>
        <button>Show more</button>

            `

        Array.from(div.querySelectorAll('button')).forEach(button =>
            button.addEventListener('click', onClick))

        main.appendChild(div)

        function onClick(ev) {
            let profile = ev.target.parentElement

            console.log(profile);

            let isActive = profile.querySelector('input[value="unlock"]').checked
            if (isActive) {
                let info = Array.from(profile.querySelectorAll('div.user1Username')).find(p => p.className.includes('Username'))

                console.log(info);

                if (ev.target.textContent == 'Show more') {
                    ev.target.textContent = 'Hide it'
                    info.style.display = 'block'
                } else {
                    ev.target.textContent = 'Show more'
                    info.style.display = 'none'
                }
            }
        }
    })

}