document.addEventListener('DOMContentLoaded', () => {
    const textsList = document.getElementById('texts-list');
    const form = document.getElementById('texts-form');

    async function loadTexts() {
        const response = await fetch('/api/texts', {
            credentials: 'same-origin',
        });
        const texts = await response.json();
        textsList.innerHTML = texts.map(function (text) {
            return '<li class="card"><a class="card-link"'
                + ' href=/texts/'
                + text.id
                + '>'
                + text.name
                + '</a></li>';
        }).join('');
    }

    form.addEventListener('submit', async (submitEvent) => {
        submitEvent.preventDefault();
        const formData = new FormData(form);
        const response = await fetch('/api/texts', {
            method: 'POST',
            credentials: 'same-origin',
            body: formData,
        });
        if (response.ok) {
            const text = await response.json();
            const li = document.createElement('li');
            li.className = 'card';
            const link = document.createElement('a');
            link.className = 'card-link';
            link.href = '/texts/' + text.id;
            link.textContent = text.name;
            li.appendChild(link);
            textsList.appendChild(li);
            form.reset();
        }
    });

    loadTexts();
});