document.addEventListener('DOMContentLoaded', async function() {
    async function fetchUptime() {
        const uptimeElement = document.getElementById('uptime');
        const names = {
            "Zipline": "https://zip.quinten0508.com"
        };
        
        try {
            const response = await fetch('https://quinten0508.com/api/uptime');
            const data = await response.json();
            
            // Clear previous content
            uptimeElement.innerHTML = '';
            
            data.forEach(element => {
                // Create parent div for each pair
                const pairDiv = document.createElement('div');
                pairDiv.className = 'uptime-pair';
                
            // Create div for name
                const nameDiv = document.createElement('div');
                nameDiv.className = 'uptime-name-element';

                // Check if there is a specific URL for this monitor name
                if (names.hasOwnProperty(element.monitor_name)) {
                    const url = names[element.monitor_name];
                    nameDiv.innerHTML = `<a href="${url}" class="link" target="_blank">${element.monitor_name}</a>`;
                } else {
                    nameDiv.textContent = element.monitor_name;
                }

            // Create div for status
                const statusDiv = document.createElement('div');
                statusDiv.className = 'uptime-status-element';
                statusDiv.textContent = element.status;
                
            // Append name and status divs to pair div
                pairDiv.appendChild(nameDiv);
                pairDiv.appendChild(statusDiv);
                
            // Append pair div to uptime container
                uptimeElement.appendChild(pairDiv);
            });
            
        } catch (error) {
            console.error('Error fetching uptime data:', error);
        }
    }

    // Fetch the uptime immediately and then every 10 seconds
    fetchUptime();
    setInterval(fetchUptime, 10000);
});