<div class="archive-controls">
    <label for="archive-date-selector-%%current_world_key%%">Archivdatum:</label>
    <select id="archive-date-selector-%%current_world_key%%">
        <option value="">-- Bitte wählen --</option>
    </select>
    <span id="archive-error-msg-%%current_world_key%%" class="archive-error"></span>
</div>

<div class="archive-image-container">
    <img id="archive-image-%%current_world_key%%" alt="Archivierte Karte" style="display:none; max-width:100%;">
    <p id="archive-placeholder-%%current_world_key%%">Bitte ein Datum auswählen, um die Karte anzuzeigen.</p>
</div>

<script>
// Um zu verhindern, dass das Skript mehrfach ausgeführt wird
if (!window.archiveScriptLoaded_%%current_world_key%%) {
    window.archiveScriptLoaded_%%current_world_key%% = true;

    const selector = document.getElementById('archive-date-selector-%%current_world_key%%');
    const imageElement = document.getElementById('archive-image-%%current_world_key%%');
    const placeholder = document.getElementById('archive-placeholder-%%current_world_key%%');
    const errorMessage = document.getElementById('archive-error-msg-%%current_world_key%%');
    const availableDates = %%available_archive_dates_js_array%%;
    const imageBaseUrl = '%%archive_world_rel_to_webroot%%';

    if (selector && availableDates && availableDates.length > 0) {
        availableDates.forEach(dateStr => {
            const option = document.createElement('option');
            const parts = dateStr.split('-');
            option.value = dateStr;
            option.textContent = `${parts[2]}.${parts[1]}.${parts[0]}`;
            selector.appendChild(option);
        });

        selector.addEventListener('change', function() {
            imageElement.style.display = 'none';
            errorMessage.textContent = '';
            
            const selectedDate = this.value;

            if (selectedDate) {
                // WICHTIGE ÄNDERUNG: Platzhalter wird jetzt hier versteckt
                placeholder.style.display = 'none';
                const dateParts = selectedDate.split('-');
                const imageUrl = `${imageBaseUrl}/${dateParts[0]}/${dateParts[1]}/${dateParts[2]}.png?v=%%CACHE_BUSTER%%`;
                imageElement.src = imageUrl;
            } else {
                // Wenn "-- Bitte wählen --" ausgewählt wird, Platzhalter wieder anzeigen
                placeholder.style.display = 'block';
            }
        });

        imageElement.onload = function() {
            this.style.display = 'block';
            errorMessage.textContent = ''; // Sicherstellen, dass keine alte Fehlermeldung mehr da ist
        };

        imageElement.onerror = function() {
            this.style.display = 'none';
            // WICHTIGE ÄNDERUNG: Fehlermeldung ersetzt jetzt den Platzhalter
            placeholder.style.display = 'none'; 
            errorMessage.textContent = 'Fehler: Bild für dieses Datum konnte nicht geladen werden.';
        };

    } else if (selector) {
        selector.disabled = true;
        selector.querySelector('option').textContent = 'Keine Archive verfügbar';
    }
}
</script>
