{{define "conditions-tab"}}
<div class="space-y-6 text-shadow-sm">
    <!-- Kilauea Webcams -->
    <div>
        <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90">
            <span>🌋</span> Kilauea Webcams
            <span class="text-xs text-white/50 font-normal">(auto-refresh every 60s)</span>
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- V1cam - West Halemaʻumaʻu -->
            <div class="bg-black/40 backdrop-blur-sm rounded-lg overflow-hidden">
                <a href="https://www.usgs.gov/volcanoes/kilauea/v1cam-kilauea-volcano-hawaii-west-halemaumau-crater" target="_blank">
                    <img id="v1cam"
                         src="https://volcanoes.usgs.gov/observatories/hvo/cams/V1cam/images/M.jpg"
                         alt="V1cam - West Rim"
                         class="w-full aspect-video object-cover hover:opacity-90 transition-opacity"
                         loading="lazy">
                </a>
                <div class="p-2 text-center">
                    <span class="text-xs text-white/60">V1cam - West Rim</span>
                </div>
            </div>

            <!-- V2cam - East Halemaʻumaʻu -->
            <div class="bg-black/40 backdrop-blur-sm rounded-lg overflow-hidden">
                <a href="https://www.usgs.gov/media/webcams/v2cam-kilauea-volcano-hawaii-east-halemaumau-crater" target="_blank">
                    <img id="v2cam"
                         src="https://volcanoes.usgs.gov/cams/V2cam/images/M.jpg"
                         alt="V2cam - East Rim"
                         class="w-full aspect-video object-cover hover:opacity-90 transition-opacity"
                         loading="lazy">
                </a>
                <div class="p-2 text-center">
                    <span class="text-xs text-white/60">V2cam - East Rim</span>
                </div>
            </div>

            <!-- F1cam - Thermal -->
            <div class="bg-black/40 backdrop-blur-sm rounded-lg overflow-hidden">
                <a href="https://www.usgs.gov/observatories/hvo/multimedia/webcams" target="_blank">
                    <img id="f1cam"
                         src="https://volcanoes.usgs.gov/observatories/hvo/cams/F1cam/images/M.jpg"
                         alt="F1cam - Thermal"
                         class="w-full aspect-video object-cover hover:opacity-90 transition-opacity"
                         loading="lazy">
                </a>
                <div class="p-2 text-center">
                    <span class="text-xs text-white/60">F1cam - Thermal</span>
                </div>
            </div>
        </div>
        <div class="mt-2 text-center">
            <a href="https://www.usgs.gov/volcanoes/kilauea/webcams" target="_blank"
               class="text-xs text-white/50 hover:text-white/70">View all USGS webcams →</a>
        </div>
    </div>

    <!-- Weather Maps -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Local Weather (Big Island) -->
        <div>
            <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90">
                <span>🌴</span> Local Weather
            </h2>
            <div class="bg-black/40 backdrop-blur-sm rounded-lg overflow-hidden">
                <div class="aspect-video">
                    <iframe
                        src="https://embed.windy.com/embed2.html?lat=19.5&lon=-155.5&zoom=8&level=surface&overlay=rain&product=ecmwf&menu=&message=true&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=mph&metricTemp=%C2%B0F&radarRange=-1"
                        class="w-full h-full"
                        frameborder="0"
                        loading="lazy">
                    </iframe>
                </div>
                <div class="p-2 text-center">
                    <a href="https://www.windy.com/?19.5,-155.5,8" target="_blank"
                       class="text-xs text-white/60 hover:text-white/90">Open in Windy →</a>
                </div>
            </div>
        </div>

        <!-- National Weather -->
        <div>
            <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90">
                <span>🇺🇸</span> National Weather
            </h2>
            <div class="bg-black/40 backdrop-blur-sm rounded-lg overflow-hidden">
                <div class="aspect-video">
                    <iframe
                        src="https://embed.windy.com/embed2.html?lat=39&lon=-98&zoom=4&level=surface&overlay=rain&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=mph&metricTemp=%C2%B0F&radarRange=-1"
                        class="w-full h-full"
                        frameborder="0"
                        loading="lazy">
                    </iframe>
                </div>
                <div class="p-2 text-center">
                    <a href="https://www.windy.com/?39,-98,4" target="_blank"
                       class="text-xs text-white/60 hover:text-white/90">Open in Windy →</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Auto-refresh webcam images every 60 seconds
(function() {
    function refreshCams() {
        var cams = ['v1cam', 'v2cam', 'f1cam'];
        var ts = Date.now();
        cams.forEach(function(id) {
            var img = document.getElementById(id);
            if (img) {
                var src = img.src.split('?')[0];
                img.src = src + '?t=' + ts;
            }
        });
    }
    setInterval(refreshCams, 60000);
})();
</script>
{{end}}