async function fetchAndDisplayStories() {
            const response = await fetch('/api/stories');
            if (!response.ok) {
                console.error('Failed to load stories');
                return;
            }
            const stories = await response.json();
            renderStories(stories);
        }

        function renderStories(stories) {
        const tbody = document.getElementById('story-list');
        tbody.innerHTML = '';

        // Sort stories: Live first, then Done (published on FRN), In Progress, Planned, Unknown
        stories.sort((a, b) => {
            const getStatusOrder = (story) => {
            if (story.isLive) return -1; // Live stories have the highest priority
            if (story.status?.[5]) return 0; // Done (published on FRN)
            if (story.status?.[1] || story.status?.[2]) return 1; // In Progress
            if (story.status?.[0]) return 2; // Planned
            return 3; // Unknown status
            };
            return getStatusOrder(a) - getStatusOrder(b);
        });

        stories.forEach(story => {
            const tr = document.createElement('tr');
            const title = story.title || '';
            const format = story.format || '';
            const minutes = parseInt(story.length) || 0;
            const length = `${minutes} min`;
            const statusFlags = story.status || [];
            const frnLink = story.frnLink || '';
            let statusText = '';
            let statusClass = '';
            let statusDetails = '';

            // If the story is published on FRN, mark it as "Done"
            if (statusFlags[5]) {
            statusText = 'Done';
            statusClass = 'status-done';
            }
            // If the story is live but not published on FRN, mark it as "Live"
            else if (story.isLive) {
            statusText = 'Live';
            statusClass = 'status-live';
            statusDetails = `${story.liveDate} on ${story.liveChannel}`;
            }
            // If the story is in progress, mark it as "In Progress"
            else if (statusFlags[1] || statusFlags[2]) {
            statusText = 'In Progress';
            statusClass = 'status-inprogress';
            }
            // Default to "Planned" if no checkboxes are checked
            else {
            statusText = 'Planned';
            statusClass = 'status-planned';
            }

            tr.innerHTML = `
            <td>${title}</td>
            <td>${format}</td>
            <td class="length-cell">${length}</td>
            <td class="${statusClass}">${statusText}${statusDetails ? `<br><small>${statusDetails}</small>` : ''}</td>
            <td>${statusFlags[5] && frnLink ? `<a href="${frnLink}" target="_blank">Open</a>` : ''}</td>
            `;
            tbody.appendChild(tr);
        });
        }


        document.addEventListener('DOMContentLoaded', fetchAndDisplayStories);

        const eventSource = new EventSource('/updates');
        eventSource.onmessage = function(event) {
            const data = JSON.parse(event.data);
            if (data.type === 'UPDATE') {
                fetchAndDisplayStories();
            }
        };