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();
            
            uptimeElement.innerHTML = '';
            
            data.forEach(element => {
                const pairDiv = document.createElement('div');
                pairDiv.className = 'uptime-pair';
                
                const nameDiv = document.createElement('div');
                nameDiv.className = 'uptime-name-element';
            
                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;
                }
            
                const statusDiv = document.createElement('div');
                statusDiv.className = 'uptime-status-element';
            
                if (element.status === "up") {
                    statusDiv.style.color = "#00b400";
                } else if (element.status === "down") {
                    statusDiv.style.color = "#b30000";
                }
                statusDiv.textContent = element.status;
            
                pairDiv.appendChild(nameDiv);
                pairDiv.appendChild(statusDiv);
                uptimeElement.appendChild(pairDiv);
            });
            
        } catch (error) {
            console.error('Error fetching uptime data:', error);
        }
    }

    fetchUptime();
    setInterval(fetchUptime, 10000);
});