<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dutch Touch Radio - A Canadian-Dutch Radio Experience</title>
    <meta name="description" content="Dutch Touch Radio by Martin Vandenzen - Your weekly dose of Dutch culture and music">
    
    <!-- Open Graph -->
    <meta property="og:title" content="Dutch Touch Radio">
    <meta property="og:description" content="A Canadian-Dutch Radio Experience">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://dutchtouchradio.com">
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="../../shared/assets/artwork/favicon.svg">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'dutch-orange': '#FF6B35',
                        'dutch-orange-dark': '#E55A2B',
                        'dutch-blue': '#0066CC',
                        'dutch-red': '#C8102E',
                        'warm-orange': '#FF8C42',
                        'coral': '#FF6B6B'
                    },
                    animation: {
                        'pulse-slow': 'pulse 4s ease-in-out infinite',
                        'fade-in': 'fadeIn 1s ease-out',
                        'slide-up': 'slideUp 0.8s ease-out',
                        'wave': 'wave 1.5s ease-in-out infinite'
                    }
                }
            }
        }
    </script>
    
    <!-- HTMX -->
    <script src="https://unpkg.com/htmx.org@1.9.12"></script>
    
    <!-- Alpine.js -->
    <script src="js/alpine-components.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <!-- Shared Styles -->
    <link rel="stylesheet" href="../../shared/assets/shared-styles.css">
    <link rel="stylesheet" href="css/info-popup.css">
    
    <style>
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        @keyframes wave {
            0%, 100% { transform: scaleY(1); opacity: 0.7; }
            50% { transform: scaleY(1.5); opacity: 1; }
        }
        
        /* Fix for animation delay - hide elements until animation starts */
        .animate-slide-up {
            animation-fill-mode: both !important;
        }
        
        .animate-fade-in {
            animation-fill-mode: both !important;
        }
        
        /* Ensure animated elements with opacity-0 become visible */
        .opacity-0.animate-slide-up,
        .opacity-0.animate-fade-in {
            animation-fill-mode: both !important;
        }
        
        .dutch-gradient {
            background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 25%, #FF6B6B 50%, #4C6EF5 75%, #5B86E5 100%);
        }
        
        .orange-gradient {
            background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 50%, #FFB347 100%);
        }
        
        .text-gradient {
            background: linear-gradient(135deg, #FF6B35, #FF8C42);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .card-shadow {
            box-shadow: 0 10px 30px -5px rgba(255, 107, 53, 0.3);
        }
        
        .audio-player {
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-top: 1px solid #e5e7eb;
            padding: 1rem;
            z-index: 1000;
        }
        
        /* Info popup styles are loaded from css/info-popup.css */
    </style>
</head>
<body class="bg-gray-50">
    
    <!-- Header -->
    <header class="bg-white/95 backdrop-blur-md shadow-sm sticky top-0 z-50">
        <nav class="container mx-auto px-4 py-4">
            <div class="flex items-center justify-between">
                <a href="/" class="flex items-center space-x-3">
                    <img src="dutch-touch-radio-redesign/shared/assets/artwork/logo.svg" alt="Dutch Touch Radio" class="h-12">
                </a>
                
                <div class="hidden md:flex items-center space-x-6">
                    <a href="/" class="text-gray-700 hover:text-dutch-orange transition">Home</a>
                    <a href="episodes.html" class="text-gray-700 hover:text-dutch-orange transition">Episodes</a>
                    <a href="about.html" class="text-gray-700 hover:text-dutch-orange transition">About</a>
                </div>
                
                <!-- Mobile Menu Button -->
                <button class="md:hidden p-2" onclick="toggleMobileMenu()">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
            
            <!-- Mobile Menu -->
            <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4 border-t pt-4">
                <a href="/" class="block py-2 text-gray-700 hover:text-dutch-orange">Home</a>
                <a href="episodes.html" class="block py-2 text-gray-700 hover:text-dutch-orange">Episodes</a>
                <a href="about.html" class="block py-2 text-gray-700 hover:text-dutch-orange">About</a>
            </div>
        </nav>
    </header>
    
    <!-- Hero Section with Gradient -->
    <section class="relative min-h-[700px] flex items-center dutch-gradient overflow-hidden pb-12">
        <!-- Geometric Pattern Overlay -->
        <div class="absolute inset-0 opacity-10">
            <div class="absolute transform rotate-45 -left-20 top-20 w-80 h-80 border-8 border-white"></div>
            <div class="absolute transform rotate-45 -right-20 bottom-20 w-96 h-96 border-8 border-white"></div>
        </div>
        
        <div class="container mx-auto px-4 relative z-10">
            <div class="max-w-4xl mx-auto text-center text-white">
                <h1 class="text-5xl md:text-7xl font-bold mb-6 animate-fade-in">
                    Dutch Touch Radio
                </h1>
                <p class="text-2xl md:text-3xl mb-8 opacity-90 animate-slide-up">
                    A Canadian-Dutch Radio Experience
                </p>
                
                <!-- Animated Waveform -->
                <div class="flex justify-center items-center space-x-2 mb-8 animate-slide-up" style="animation-delay: 0.2s; animation-fill-mode: both">
                    <div class="w-1 h-16 bg-white rounded-full animate-wave" style="animation-delay: 0s"></div>
                    <div class="w-1 h-24 bg-white rounded-full animate-wave" style="animation-delay: 0.1s"></div>
                    <div class="w-1 h-20 bg-white rounded-full animate-wave" style="animation-delay: 0.2s"></div>
                    <div class="w-1 h-28 bg-white rounded-full animate-wave" style="animation-delay: 0.3s"></div>
                    <div class="w-1 h-16 bg-white rounded-full animate-wave" style="animation-delay: 0.4s"></div>
                    <div class="w-1 h-12 bg-white rounded-full animate-wave" style="animation-delay: 0.5s"></div>
                    <div class="w-1 h-14 bg-white rounded-full animate-wave" style="animation-delay: 0.6s"></div>
                </div>
                
                <p class="text-xl mb-12 animate-slide-up" style="animation-delay: 0.4s; animation-fill-mode: both">
                    Hosted by Martin Vandenzen
                </p>
                
                <!-- Latest Episode Player -->
                <div id="latest-episode" 
                     hx-get="/api/current-show" 
                     hx-trigger="load"
                     hx-target="this"
                     hx-swap="innerHTML">
                </div>
            </div>
        </div>
    </section>
    
    <!-- Latest Episodes -->
    <section class="py-16" id="main-content">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between mb-8">
                <h2 class="text-3xl font-bold text-gray-900">Latest Episodes</h2>
                <a href="episodes.html" class="text-dutch-orange hover:text-dutch-orange-dark transition">View All →</a>
            </div>
            
            <!-- Episode Cards Grid -->
            <div id="episodes-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
                 hx-get="/api/shows?limit=3&offset=1" 
                 hx-trigger="load"
                 hx-target="this">
                <!-- Loading placeholders -->
                <div class="bg-white rounded-2xl p-6 animate-pulse">
                    <div class="aspect-video bg-gray-200 rounded-lg mb-4"></div>
                    <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                    <div class="h-3 bg-gray-200 rounded w-full"></div>
                </div>
                <div class="bg-white rounded-2xl p-6 animate-pulse">
                    <div class="aspect-video bg-gray-200 rounded-lg mb-4"></div>
                    <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                    <div class="h-3 bg-gray-200 rounded w-full"></div>
                </div>
                <div class="bg-white rounded-2xl p-6 animate-pulse">
                    <div class="aspect-video bg-gray-200 rounded-lg mb-4"></div>
                    <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                    <div class="h-3 bg-gray-200 rounded w-full"></div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Features Section -->
    <section class="py-16 bg-surface">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">Why Listen to Dutch Touch Radio?</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="text-center">
                    <div class="w-16 h-16 orange-gradient rounded-2xl flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path>
                        </svg>
                    </div>
                    <h3 class="font-bold text-lg mb-2">Weekly Episodes</h3>
                    <p class="text-gray-600">Fresh content every week with carefully curated music and stories.</p>
                </div>
                
                <div class="text-center">
                    <div class="w-16 h-16 bg-gradient-to-br from-warm-orange to-coral rounded-2xl flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
                        </svg>
                    </div>
                    <h3 class="font-bold text-lg mb-2">Cultural Bridge</h3>
                    <p class="text-gray-600">Connecting Dutch and Canadian communities through engaging content.</p>
                </div>
                
                <div class="text-center">
                    <div class="w-16 h-16 bg-gradient-to-br from-coral to-dutch-orange rounded-2xl flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                    </div>
                    <h3 class="font-bold text-lg mb-2">Community Focus</h3>
                    <p class="text-gray-600">Stories and updates that matter to the Dutch-Canadian community.</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Newsletter (Feature Flag: Newsletter) -->
    <section class="py-16 hidden" data-feature="newsletter">
        <div class="container mx-auto px-4">
            <div class="max-w-2xl mx-auto text-center">
                <h2 class="text-3xl font-bold mb-4">Never Miss an Episode</h2>
                <p class="text-gray-600 mb-8">Get notified when new episodes drop and receive exclusive content.</p>
                
                <form class="flex flex-col sm:flex-row gap-4">
                    <input type="email" 
                           placeholder="Enter your email" 
                           class="flex-1 px-6 py-3 border-2 border-gray-200 rounded-full focus:border-dutch-orange focus:outline-none"
                           required>
                    <button type="submit" class="orange-gradient text-white px-8 py-3 rounded-full font-medium hover:shadow-lg transition">
                        Subscribe
                    </button>
                </form>
                
                <p class="text-sm text-gray-500 mt-4">Join 1,000+ listeners. No spam, unsubscribe anytime.</p>
            </div>
        </div>
    </section>
    
    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div class="md:col-span-2">
                    <div class="flex items-center space-x-3 mb-4">
                        <img src="dutch-touch-radio-redesign/shared/assets/artwork/logo.svg" alt="Dutch Touch Radio" class="h-10 mb-4 brightness-0 invert">
                    </div>
                    <p class="text-gray-400">
                        A weekly podcast bringing Dutch culture to Canada through music, stories, and community connections.
                    </p>
                </div>
                
                <div>
                    <h3 class="font-bold mb-4">Quick Links</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="/" class="hover:text-white transition">Home</a></li>
                        <li><a href="episodes.html" class="hover:text-white transition">Episodes</a></li>
                        <li><a href="about.html" class="hover:text-white transition">About</a></li>
                        <li><a href="#" class="hover:text-white transition">Contact</a></li>
                    </ul>
                </div>
                
                <div class="hidden" data-feature="podcast-links">
                    <h3 class="font-bold mb-4">Listen On</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white transition">Apple Podcasts</a></li>
                        <li><a href="#" class="hover:text-white transition">Spotify</a></li>
                        <li><a href="#" class="hover:text-white transition">Google Podcasts</a></li>
                        <li><a href="#" class="hover:text-white transition">RSS Feed</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="mt-8 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400">&copy; 2025 Dutch Touch Radio. All rights reserved.</p>
                <div class="flex space-x-4 mt-4 md:mt-0 hidden" data-feature="social-links">
                    <a href="#" class="text-gray-400 hover:text-white transition">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                        </svg>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                        </svg>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1112.324 0 6.162 6.162 0 01-12.324 0zM12 16a4 4 0 110-8 4 4 0 010 8zm4.965-10.405a1.44 1.44 0 112.881.001 1.44 1.44 0 01-2.881-.001z"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- Admin Panel Container -->
    <div id="admin-container"></div>
    
    <!-- Persistent Audio Player -->
    <div id="audio-player" class="audio-player hidden">
        <div class="container mx-auto px-4">
            <div class="flex items-center space-x-4">
                <button onclick="togglePlay()" class="p-3 bg-dutch-orange text-white rounded-full hover:bg-dutch-orange-dark transition">
                    <svg id="play-icon" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/>
                    </svg>
                    <svg id="pause-icon" class="w-6 h-6 hidden" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M5.75 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h1.5a.75.75 0 00.75-.75V3.75A.75.75 0 007.25 3h-1.5zM12.75 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h1.5a.75.75 0 00.75-.75V3.75a.75.75 0 00-.75-.75h-1.5z"/>
                    </svg>
                </button>
                
                <div class="flex-1">
                    <div class="text-sm font-medium" id="now-playing-title">No episode selected</div>
                    <div class="flex items-center space-x-2 mt-1">
                        <span class="text-xs text-gray-500" id="current-time">0:00</span>
                        <div class="flex-1 bg-gray-200 rounded-full h-1">
                            <div class="bg-dutch-orange h-1 rounded-full" style="width: 0%" id="progress-bar"></div>
                        </div>
                        <span class="text-xs text-gray-500" id="duration">0:00</span>
                    </div>
                </div>
                
                <button onclick="closePlayer()" class="p-2 text-gray-500 hover:text-gray-700">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
        </div>
        <audio id="audio-element"></audio>
    </div>
    
    <!-- JavaScript -->
    <script>
        // Mobile menu toggle
        function toggleMobileMenu() {
            const menu = document.getElementById('mobile-menu');
            menu.classList.toggle('hidden');
        }
        
        // Audio player functionality
        let audio = document.getElementById('audio-element');
        let player = document.getElementById('audio-player');
        let playIcon = document.getElementById('play-icon');
        let pauseIcon = document.getElementById('pause-icon');
        
        
        function playEpisode(mp3, title) {
            // Reset all other episode buttons to play state
            resetAllEpisodeButtons();
            
            audio.src = mp3;
            document.getElementById('now-playing-title').textContent = title;
            player.classList.remove('hidden');
            audio.play();
            playIcon.classList.add('hidden');
            pauseIcon.classList.remove('hidden');
            
            // Update current show button only if this is the current show
            updateCurrentShowButtonForEpisode(mp3, false); // false = playing
        }
        
        function resetAllEpisodeButtons() {
            // Reset all episode buttons to play state
            const allButtons = document.querySelectorAll('[id^="play-icon"], [id^="pause-icon"], [id^="play-text"]');
            allButtons.forEach(element => {
                if (element.id.includes('play-icon')) {
                    element.classList.remove('hidden');
                } else if (element.id.includes('pause-icon')) {
                    element.classList.add('hidden');
                } else if (element.id.includes('play-text')) {
                    element.textContent = 'Play';
                }
            });
        }
        
        function toggleEpisode(mp3, title) {
            // Check if the current audio source includes the mp3 path
            const isCurrentEpisode = audio.src && audio.src.includes(mp3.replace(/ /g, '%20'));
            
            if (isCurrentEpisode && !audio.paused) {
                // Currently playing this episode, pause it
                audio.pause();
                playIcon.classList.remove('hidden');
                pauseIcon.classList.add('hidden');
                updateCurrentShowButtonForEpisode(mp3, true); // true = paused
                updateEpisodeButton(title, true); // true = paused
            } else {
                // Play this episode
                playEpisode(mp3, title);
                updateEpisodeButton(title, false); // false = playing
            }
        }
        
        function updateEpisodeButton(title, isPaused) {
            // Clean the title to use as ID (same as Go sanitizeForID function)
            const episodeId = title.replace(/[^a-zA-Z0-9]+/g, '-');
            
            // Try different button variations (card, list, grid)
            const variations = ['', '-list', '-grid'];
            
            variations.forEach(variation => {
                const playIconId = `play-icon${variation}-${episodeId}`;
                const pauseIconId = `pause-icon${variation}-${episodeId}`;
                const playTextId = `play-text${variation}-${episodeId}`;
                
                const playIcon = document.getElementById(playIconId);
                const pauseIcon = document.getElementById(pauseIconId);
                const playText = document.getElementById(playTextId);
                
                if (playIcon && pauseIcon) {
                    if (isPaused) {
                        playIcon.classList.remove('hidden');
                        pauseIcon.classList.add('hidden');
                        if (playText) playText.textContent = 'Play';
                    } else {
                        playIcon.classList.add('hidden');
                        pauseIcon.classList.remove('hidden');
                        if (playText) playText.textContent = 'Pause';
                    }
                }
            });
        }
        
        function toggleCurrentPlay(mp3, title) {
            // Check if the current audio source includes the mp3 path
            const isCurrentEpisode = audio.src && audio.src.includes(mp3.replace(/ /g, '%20'));
            
            if (isCurrentEpisode && !audio.paused) {
                // Currently playing this episode, pause it
                audio.pause();
                playIcon.classList.remove('hidden');
                pauseIcon.classList.add('hidden');
                updateCurrentShowButton(true); // true = paused
            } else {
                // Play this episode
                playEpisode(mp3, title);
            }
        }
        
        function updateCurrentShowButton(isPaused) {
            const playBtn = document.getElementById('current-play-icon');
            const pauseBtn = document.getElementById('current-pause-icon');
            const playText = document.getElementById('current-play-text');
            
            if (playBtn && pauseBtn && playText) {
                if (isPaused) {
                    playBtn.classList.remove('hidden');
                    pauseBtn.classList.add('hidden');
                    playText.textContent = 'Play Episode';
                } else {
                    playBtn.classList.add('hidden');
                    pauseBtn.classList.remove('hidden');
                    playText.textContent = 'Pause Episode';
                }
            }
        }
        
        function updateCurrentShowButtonForEpisode(mp3, isPaused) {
            // Get the current show episode path from the blue button
            const currentBtn = document.getElementById('current-play-btn');
            if (currentBtn && currentBtn.onclick) {
                const onclickStr = currentBtn.onclick.toString();
                const match = onclickStr.match(/toggleCurrentPlay\(['"]([^'"]+)['"]/);
                if (match && match[1] === mp3) {
                    // This is the current show episode, update the button
                    updateCurrentShowButton(isPaused);
                }
            }
        }
        
        function togglePlay() {
            if (audio.paused) {
                audio.play();
                playIcon.classList.add('hidden');
                pauseIcon.classList.remove('hidden');
                updateCurrentShowButton(false); // playing
            } else {
                audio.pause();
                playIcon.classList.remove('hidden');
                pauseIcon.classList.add('hidden');
                updateCurrentShowButton(true); // paused
            }
        }
        
        function closePlayer() {
            audio.pause();
            player.classList.add('hidden');
            updateCurrentShowButton(true); // reset to play state
        }
        
        // Update progress bar
        audio.addEventListener('timeupdate', () => {
            const progress = (audio.currentTime / audio.duration) * 100;
            document.getElementById('progress-bar').style.width = progress + '%';
            document.getElementById('current-time').textContent = formatTime(audio.currentTime);
        });
        
        audio.addEventListener('loadedmetadata', () => {
            document.getElementById('duration').textContent = formatTime(audio.duration);
        });
        
        function formatTime(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${mins}:${secs.toString().padStart(2, '0')}`;
        }
        
        // Keyboard shortcuts
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
                e.preventDefault();
                togglePlay();
            }
        });
        
        // Show notes slide-out panel
        function openShowNotesPanel(date, path, filename) {
            const panel = document.createElement('div');
            panel.id = 'show-notes-panel';
            panel.innerHTML = `
                <div class="fixed inset-0 bg-black/50 z-40" onclick="closeShowNotesPanel()"></div>
                <div class="fixed inset-y-0 right-0 w-full md:w-3/4 bg-white shadow-2xl z-50 flex flex-col" style="animation: slideIn 0.3s ease-out;">
                    <div class="bg-gradient-to-r from-dutch-orange to-warm-orange p-6 text-white flex items-center justify-between">
                        <div>
                            <h2 class="text-2xl font-bold">${date}</h2>
                            <p class="text-white/80 text-sm">Show Notes</p>
                        </div>
                        <button onclick="closeShowNotesPanel()" class="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>
                    <div class="flex-1 overflow-y-auto p-6">
                        <div id="show-notes-content" class="text-gray-700 leading-relaxed">
                            <div class="text-center py-8">
                                <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-gray-300 border-t-dutch-orange"></div>
                            </div>
                        </div>
                    </div>
                    <div class="border-t p-4 bg-gray-50">
                        <button onclick="playEpisode('${path}', '${date}'); closeShowNotesPanel();" class="w-full bg-dutch-orange text-white py-3 rounded-lg hover:bg-orange-600 font-medium flex items-center justify-center gap-2">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/>
                            </svg>
                            Play Episode
                        </button>
                    </div>
                </div>
                <style>@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }</style>
            `;
            document.body.appendChild(panel);
            document.body.style.overflow = 'hidden';
            fetch('/api/show-notes-full?filename=' + encodeURIComponent(filename))
                .then(r => r.text())
                .then(html => { document.getElementById('show-notes-content').innerHTML = html || '<p class="text-gray-500">No show notes.</p>'; });
        }
        function closeShowNotesPanel() {
            const panel = document.getElementById('show-notes-panel');
            if (panel) { panel.remove(); document.body.style.overflow = ''; }
        }

        // Make functions globally available for HTMX loaded content
        window.toggleEpisode = toggleEpisode;
        window.toggleCurrentPlay = toggleCurrentPlay;
        window.playEpisode = playEpisode;
        window.togglePlay = togglePlay;
        window.openShowNotesPanel = openShowNotesPanel;
        window.closeShowNotesPanel = closeShowNotesPanel;
        
        // Alpine.js components are loaded from js/alpine-components.js

        // Alpine.js should auto-initialize new content via mutation observer
        // No manual reinitialization needed

        // Admin panel functionality
        document.addEventListener('DOMContentLoaded', function() {
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.has('admin')) {
                // Show login modal
                htmx.ajax('GET', '/api/admin-panel?login=true', {
                    target: '#admin-container',
                    swap: 'innerHTML'
                });
            }
        });

        // File input handler
        document.addEventListener('change', function(e) {
            if (e.target.id === 'file-input') {
                const fileName = e.target.files[0]?.name || 'Select MP3 File';
                const label = document.getElementById('file-label');
                if (label) label.textContent = fileName;
            }
        });
    </script>
</body>
</html>