document.addEventListener('DOMContentLoaded', () => {
    const textsList = document.getElementById('texts-list');
    const createPlanModal = document.getElementById('create-plan-modal');

    async function loadTexts() {
        const response = await fetch('/api/texts');
        const texts = await response.json();
        textsList.innerHTML = texts
            .map(text =>
                '<li>' + text.name +
                ' <button class="create-plan" data-text-id="' +
                text.id + '">Create plan</button></li>'
            )
            .join('');
    }

    function openCreatePlanModal(textId) {
        createPlanModal.dataset.textId = textId;
        createPlanModal.hidden = false;
    }

    textsList.addEventListener('click', (clickEvent) => {
        const createPlanButton = clickEvent.target.closest(
            'button.create-plan'
        );
        if (createPlanButton === null) {
            return;
        }
        openCreatePlanModal(createPlanButton.dataset.textId);
    });

    loadTexts();
});