async function RenderBoardList(mountPoint) {
    const response = await fetch(`/api/v1/boards`)
    const boardIds = await response.json()

    const boards = await Promise.all(
        boardIds.boards.map(async it => {
            return await (await fetch(`/api/v1/boards/${it}`)).json()
        })
    )

    mountPoint.innerHTML = `
    <div class="objects_list">
        <div class="objects_list_header">
            Boards:
            <div class="objects_list_header__underline"></div>
        </div>

        <div class="objects_list_container">
            <div class="objects_list_create_new">
                <img class="objects_list_item__image" src="/resources/plus.svg" />
                <div class="objects_list_item__text">Create new</div>
            </div>
        </div>
    </div>
    `

    const container = mountPoint.querySelector('.objects_list_container')
    const createButton = mountPoint.querySelector('.objects_list_create_new')

    for (const board of boards) {
        makeBoardLink(container, board, createButton)
    }

    createButton.addEventListener('click', async (e) => {
        const newBoard = await createNewBoard()
        makeBoardLink(container, newBoard, createButton, true)
    })

}

function makeBoardLink(mountPoint, board, before, focus) {
    const div = document.createElement('div')

    div.innerHTML = `
    <div class="objects_list_item">
        <img class="objects_list_item__image" src="/resources/hedgehog.jpg" />
        <div class="objects_list_item__link">
            <div class="objects_list_item__text" tabindex="0"> </div>
        </div>
        <div class="objects_list_item__save_button"> Edit </div>
    </div>`

    const button = div.querySelector('.objects_list_item__save_button')
    const text = div.querySelector('.objects_list_item__text')
    const link = div.querySelector('.objects_list_item__link')

    text.textContent = board.name || ''

    let editing = false

    const saveOnEnter = (event) => {
        if (event.key === "Enter") {
            event.preventDefault();
            button.click();
        }
    }

    const startEdit = () => {
        text.focus()
        text.addEventListener("keypress", saveOnEnter)
        button.innerHTML = 'Save'
        text.contentEditable = "true"
        editing = true
    }

    button.addEventListener('click', async (e) => {
        if (editing) {
            button.innerHTML = 'Edit'
            text.contentEditable = "false"
            editing = false

            text.removeEventListener("keypress", saveOnEnter)

            board.name = text.textContent
            text.textContent = text.textContent

            const response = await fetch(`/api/v1/boards/${board.id}`,
                {
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    method: "PUT",
                    body: JSON.stringify(board)
                })
            const result = await response.text();

            console.log(result)
        } else {
            startEdit()
        }
    })

    link.addEventListener('click', (e) => {
        if (editing) return

        console.log("link")

        window.location.href = `/boards/${board.id}`
    })

    mountPoint.insertBefore(div, before)

    if (focus)
        startEdit()
}

async function createNewBoard() {
    const response = await fetch(`/api/v1/boards`,
        {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            method: "PUT"
        })
    const result = await response.json();

    return result
}