<div id="profile">
    <div class="banner">
        <div class="left">
            <div class="avatar unselectable"><img src="<%= locals.auth.avatar %>" alt=""></div>
            <div class="text">
                <p class="username"><%= locals.auth.username %></p>
                <p class="membersince">Member since: <%= new Date(locals.auth.memberSince).toLocaleDateString() %></p>
            </div>
        </div>
        <div class="right unselectable">
            <a href="/user/<%= locals.auth._id %>">View Profile</a>
        </div>
    </div>
    <form id="update">
        <h2>Update profile information</h2>
        <div class="email input">
            <svg viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                <title>Email</title>
                <path d="M19.0556 13.5C19.0556 16.5682 16.5682 19.0556 13.5 19.0556C10.4317 19.0556 7.94444 16.5682 7.94444 13.5C7.94444 10.4317 10.4317 7.94444 13.5 7.94444C16.5682 7.94444 19.0556 10.4317 19.0556 13.5ZM19.0556 13.5V15.5833C19.0556 17.501 20.6101 19.0556 22.5278 19.0556C24.4454 19.0556 26 17.501 26 15.5833V13.5C26 6.59644 20.4036 1 13.5 1C6.59644 1 1 6.59644 1 13.5C1 20.4036 6.59644 26 13.5 26H19.0556" stroke="#539FF5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>           
            <input type="text" name="email" id="email" placeholder="Email">
        </div>
        <div class="username input">
            <svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                <title>Username</title>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.56259 0.484775C8.18598 0.124 10.1554 0 12.5 0C14.8446 0 16.814 0.124 18.4374 0.484775C20.075 0.848713 21.436 1.47 22.483 2.51697C23.53 3.56395 24.1512 4.92502 24.5152 6.56259C24.876 8.18598 25 10.1554 25 12.5C25 14.8446 24.876 16.814 24.5152 18.4374C24.1512 20.075 23.53 21.436 22.483 22.483C21.436 23.53 20.075 24.1512 18.4374 24.5152C16.814 24.876 14.8446 25 12.5 25C10.1554 25 8.18598 24.876 6.56259 24.5152C4.92502 24.1512 3.56395 23.53 2.51697 22.483C1.47 21.436 0.848713 20.075 0.484775 18.4374C0.124 16.814 0 14.8446 0 12.5C0 10.1554 0.124 8.18598 0.484775 6.56259C0.848713 4.92502 1.47 3.56395 2.51697 2.51697C3.56395 1.47 4.92502 0.848713 6.56259 0.484775ZM12.5 5C9.73857 5 7.5 7.23857 7.5 10C7.5 12.7614 9.73857 15 12.5 15C15.2614 15 17.5 12.7614 17.5 10C17.5 7.23857 15.2614 5 12.5 5ZM20.4719 19.1178C20.9129 19.8369 20.7569 20.7875 20.0461 21.2419C19.3999 21.6551 18.6448 21.9081 17.8949 22.0747C16.5403 22.3757 14.7874 22.5 12.4998 22.5C10.2122 22.5 8.4593 22.3757 7.10476 22.0747C6.36895 21.9112 5.62756 21.6649 4.98914 21.265C4.26559 20.8119 4.10654 19.8483 4.55842 19.1239C5.07879 18.2898 5.79595 17.6344 6.76103 17.168C8.22528 16.4605 10.1446 16.25 12.4995 16.25C14.8464 16.25 16.7636 16.4435 18.2259 17.1309C19.2159 17.5963 19.9465 18.2611 20.4719 19.1178Z" fill="#539FF5"/>
            </svg>                
            <input type="text" name="username" id="username" placeholder="Username">
        </div>
        <div class="password input">
            <svg viewBox="0 0 27 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <title>Password</title>
                <path d="M15.5834 1L13.5 4.75003M13.5 4.75003L11.4166 1M13.5 4.75003H10.375M13.5 4.75003H16.625M13.5 4.75003L11.4166 8.50003M13.5 4.75003L15.5834 8.50003M6.20834 1.00008L4.125 4.75003M4.125 4.75003L2.04166 1.00008M4.125 4.75003H1M4.125 4.75003H7.25M4.125 4.75003L2.04166 8.50003M4.125 4.75003L6.20834 8.50003M24.9584 1.00008L22.875 4.75003M22.875 4.75003L20.7916 1.00008M22.875 4.75003H19.75M22.875 4.75003H26M22.875 4.75003L20.7916 8.50003M22.875 4.75003L24.9584 8.50003" stroke="#539FF5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>                
            <input type="password" name="password" id="password" placeholder="Password">
        </div>
        <div class="password input">
            <svg viewBox="0 0 27 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <title>Password again</title>
                <path d="M15.5834 1L13.5 4.75003M13.5 4.75003L11.4166 1M13.5 4.75003H10.375M13.5 4.75003H16.625M13.5 4.75003L11.4166 8.50003M13.5 4.75003L15.5834 8.50003M6.20834 1.00008L4.125 4.75003M4.125 4.75003L2.04166 1.00008M4.125 4.75003H1M4.125 4.75003H7.25M4.125 4.75003L2.04166 8.50003M4.125 4.75003L6.20834 8.50003M24.9584 1.00008L22.875 4.75003M22.875 4.75003L20.7916 1.00008M22.875 4.75003H19.75M22.875 4.75003H26M22.875 4.75003L20.7916 8.50003M22.875 4.75003L24.9584 8.50003" stroke="#539FF5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>                
            <input type="password" name="password-again" id="password-again" placeholder="Password again">
        </div>
        <div id="message"></div>
        <button id="submit">Update</button>
    </form>
    <button id="deleteAccount">Delete Account</button>
</div>
<script>
    // Handle login event
    const fields = {
        email: document.querySelector('#email'),
        username: document.querySelector('#username'),
        password: document.querySelector('#password'),
        password_again: document.querySelector('#password-again'),
        submit: document.querySelector('#submit')
    }

    submit.addEventListener('click', (e)=>{
        e.preventDefault();
        update(); // Update information
    })

    async function update() {
        // Update account
        let resp = await axios({
            url: '/api/profile/update',
            method: 'post',
            data: {
                email: fields.email.value,
                username: fields.username.value,
                password: fields.password.value,
                password_again: fields.password_again.value
            }
        });
        resp = await resp.data;
        
        // Failed?
        if (resp.error) return document.querySelector('#message').appendChild(addMessage(resp.error));

        // Success?
        if (resp.message === "success") {
            window.location.reload();
        }
    }

    function addMessage(msg) {
        const message = document.createElement('p');
        message.innerText = msg;
        setTimeout(()=>{
            message.remove();
        }, 1000*10)
        return message;
    }

    document.querySelector('#deleteAccount').addEventListener('click', async (e)=>{
        e.preventDefault();
        await axios({
            url: '/api/profile/delete',
            method: 'post'
        })

        window.location = '/';
    })
</script>