document.querySelector('#content').innerHTML = `<h1>Raspberry Settings</h1>
<fieldset>
<legend>Keys</legend>
<table>
<tbody id="keys">

</tbody>
</table>
</fieldset>`;

async function addKeySetter(functionName: string, displayName?: string)
{
    if (displayName === undefined)
        displayName = pretty(functionName);
    const setKeyInput: HTMLInputElement = document.createElement('input');
    setKeyInput.type = 'button';
    setKeyInput.value = 'Set';
    setKeyInput.classList.add('button');
    setKeyInput.addEventListener('click', async (e: MouseEvent): Promise<void> =>
    {
        console.log(`Setting ${functionName}`);
        const key: string = (document.querySelector(`#${functionName}-key`) as HTMLInputElement).value.toUpperCase();
        await setStorageValue(functionName, key);
    });

    const tr: HTMLTableRowElement = document.createElement('tr');
    const td1: HTMLTableDataCellElement = document.createElement('td');
    td1.innerHTML += `<label>${displayName}</label>`;
    const td2: HTMLTableDataCellElement = document.createElement('td');
    td2.innerHTML += `<input type="text" id="${functionName}-key" value="${await getStorageValue(functionName) || '?'}">`;
    const td3: HTMLTableDataCellElement = document.createElement('td');
    td3.appendChild(setKeyInput);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    document.querySelector('#keys').appendChild(tr);
    // This doesn't work apparently
    /*document.querySelector('#keys').innerHTML +=
        `<tr><td><label>${displayName}</label></td><td><input type="text" id="${functionName}-key" value="${await getStorageValue(functionName) || '?'}"></td><td><input type="button" class="button" id="set-${functionName}-key" value="Set"></td></tr>`;*/
}

(async () =>
{
    // Set up the keybind setting form
    for (let i = 0; i < keybinds.length; i++) {
        if (keybinds[i].displayName)
            await addKeySetter(keybinds[i].functionName, keybinds[i].displayName);
        else
            await addKeySetter(keybinds[i].functionName);
    }
})();