const loadingDiv = document.getElementById('loading');
const contentDiv = document.getElementById('content');

console.log(contentDiv);

fetch('data.json')
    .then(response => response.json())
    .then(data => {
        console.log(data);

        // Masquer l'indicateur de chargement
        if (loadingDiv) {
            loadingDiv.style.display = 'none';
        }

        // Créez les pages
        data.forEach(clock => {
            const page = document.createElement('div');
            page.className = 'page';

            // Conteneur principal pour l'horloge
            const container = document.createElement('div');
            container.className = 'clock-container';

            // titre
            const title = document.createElement('h1');
            title.className = 'clock-title';
            title.textContent = clock.title || 'Horloge sans titre';

            // DIV     Image
            const img = document.createElement('img');
            img.className = 'clock-image';
            img.src = clock.image_url_hd || clock.image_url || 'placeholder.jpg';
            img.alt = clock.title || 'Image d\'horloge';

            // Détails
            const details = document.createElement('div');
            details.className = 'clock-details';

            // Date
            const dateRow = document.createElement('div');
            dateRow.className = 'detail-row';
            dateRow.innerHTML = `
                <span class="detail-label">Date:</span>
                <span class="detail-value">${clock.date || 'Non spécifiée'}</span>
            `;

            // Culture
            const cultureRow = document.createElement('div');
            cultureRow.className = 'detail-row';
            cultureRow.innerHTML = `
                <span class="detail-label">Culture:</span>
                <span class="detail-value">${clock.culture || 'Non spécifiée'}</span>
            `;

            // Description
            const descRow = document.createElement('div');
            descRow.className = 'detail-row';
            descRow.innerHTML = `
                <span class="detail-label">Description:</span>
                <span class="detail-value">${clock.description || 'Aucune description disponible'}</span>
            `;

            // Ajoutez les détails au conteneur
            details.appendChild(dateRow);
            details.appendChild(cultureRow);
            details.appendChild(descRow);

            // Ajoutez le titre, l'image et les détails au conteneur principal
            container.appendChild(title);
            container.appendChild(img);
            container.appendChild(details);

            // Ajoutez le conteneur principal à la page
            page.appendChild(container);

            // Ajoutez la page au conteneur principal
            contentDiv.appendChild(page);
        });

        // Appeler Paged.js pour générer les pages
        PagedPolyfill.preview().catch(error => {
            console.error('Erreur avec Paged.js :', error);
        });
    })
    .catch(error => {
        console.error('Erreur lors du chargement des données :', error);
    });