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

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

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

    loadTexts();
});