function parseUser(user) {
    const html = `
        <a class="person" href="/profile?id=${user.user_id}">
            <div class="profile">
                ${pfp(user.user_id)}
            </div>
            <div class="info">
                <span class="bold ltext">${user.firstname + ' ' + user.lastname}</span>
                <span class="gtext">Joined ${parseDate(new Date(user.date))}</span>
                <span class="gtext">Gender: ${user.gender}</span>
                <span class="gtext">Birthday: ${parseMonth(user.month) + ' ' + user.day + ', ' + user.year}</span>
                <span class="gtext" style="margin-bottom: -100px;">User ID: ${user.user_id}</span>
            </div>
        </a>
    `
    return html
}

function render() {
    const html = `
    <div id="users">
        ${data.users.map(u => parseUser(u)).join('')}
    </div>
    `

    append(html)

    const load = `
    <div id="load">
        <a class="bold gtext" onclick="loadMore()">Load more users</a>
    </div>
    `

    append(load)
}

var page = 0
var data = {
    users: []
}

async function loadMore() {
    let users = await load()
    const users_block = document.getElementById("users")
    for (user of users) {
        append(parseUser(user), users_block)
    }
}

async function load() {
    const self = (await loadself()).json
    header(false, true, self.user_id)
    const users = (await loaduserspage(page)).json
    if (users.length === 0) {
        page = -1
        remove('load')
    } else {
        page++
    }
    return users
}

async function init() {
    let users = await load()
    data.users.push(... users)
    render()
}

init()