{% extends 'main/base.html' %}
{% load static %}

{% block title %}ODEON Dashboard{% endblock %}

{% block content %}
    <div class="content-card section-inner" style="margin: 0 auto;">
        <section id="hero-card" class="hero-card" style="position: relative; border-radius: 12px; overflow: hidden; min-height: 360px; background: #000; border: var(--border-tech);">
            <div id="hero-video-container" style="position:absolute; inset:0; width:100%; height:100%; pointer-events: none;">
                <iframe id="hero-video" style="width: 100%; height: 100%; border: none; display: none;" allow="autoplay; encrypted-media" src=""></iframe>
                <video id="hero-video-native" style="width: 100%; height: 100%; object-fit: cover; display: none;" playsinline muted loop></video>
            </div>
            <div id="hero-fallback" style="position:absolute; inset:0; background:#111214 url('{% static "assets/BG1.jpg" %}') center/cover no-repeat; z-index: 0; background-size: cover; background-position: center;"></div>
            
            <!-- Custom Controls -->
            <div id="hero-controls" style="position:absolute; bottom:0; left:0; right:0; padding:1.5rem; background:linear-gradient(transparent, rgba(0,0,0,0.8)); z-index:10; display:none; flex-direction:column; gap:0.75rem;">
                <!-- Progress Bar Container -->
                <div id="progress-container" style="width:100%; height:6px; background:rgba(255,255,255,0.2); border-radius:3px; cursor:pointer; position:relative;">
                    <div id="progress-bar" style="position:absolute; height:100%; background:var(--primary); width:0%; border-radius:3px;"></div>
                </div>
                <!-- Control Buttons -->
                <div style="display:flex; align-items:center; gap:1.25rem;">
                    <button id="play-pause-btn" style="background:none; border:none; color:#fff; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;">
                        <svg id="play-icon" viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        <svg id="pause-icon" viewBox="0 0 24 24" width="28" height="28" fill="currentColor" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
                    </button>
                    <button id="volume-btn" style="background:none; border:none; color:#fff; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;"   >
                        <svg id="volume-on-icon" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
                        <svg id="volume-off-icon" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" style="display:none;"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>
                    </button>
                </div>
            </div>

            <button id="hero-play-button" style="position:absolute; right:1.5rem; bottom:1.5rem; z-index:2; border:var(--border-tech); border-radius:4px; background:var(--primary); color:#fff; padding:0.9rem 1.4rem; font-weight:700; cursor:pointer; display:none; font-family:var(--font-mono); text-transform:uppercase; box-shadow:0 0 15px var(--primary-glow);">Play trailer</button>
            <div style="position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.4)); z-index: 1;"></div>
            <div id="hero-text-overlay" style="position: absolute; bottom: 1.5rem; left: 1.5rem; z-index: 2; color: #fff; max-width: 52rem; display: none;">
                <p id="hero-label" style="margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.75rem; color: rgba(255,255,255,0.7);">Now Playing</p>
                <h1 id="hero-title" style="margin: 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05;">Loading live preview...</h1>
                <p id="hero-summary" style="margin: 1rem 0 0; color: rgba(255,255,255,0.85); max-width: 44rem; line-height: 1.7;">The current preview movie will appear in this live hero section. Use the filters to update the listing below.</p>
                <div id="hero-meta" style="display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; color: rgba(255,255,255,0.7); font-size: 0.9rem;"></div>
            </div>
        </section>
        <!-- <div style="margin-top: 1.5rem; padding: 1.5rem 1rem; border-radius: 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);">
            <p style="margin: 0 0 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.8rem;">Welcome back</p>
            <h2 style="margin: 0 0 1rem; font-size: clamp(1.55rem, 2.5vw, 2rem);">Your review dashboard is ready.</h2>
            <p style="margin: 0; color: var(--text-muted); max-width: 52rem; line-height: 1.7;">Use the feature cards below to see what is playing now, what is coming soon, and access the home view for quick review status.</p>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.5rem;">
                <article style="display: flex; gap: 1rem; padding: 1.1rem; border-radius: 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); align-items: center;">
                    <div style="width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(59, 130, 246, 0.18); color: #7dd3fc; font-size: 1.2rem;">🏠</div>
                    <div>
                        <strong style="display:block; font-size: 0.95rem; color: var(--text-main);">Home</strong>
                        <span style="color: var(--text-muted); font-size: 0.85rem;">Your central review hub for fast access.</span>
                    </div>
                </article>
                <article style="display: flex; gap: 1rem; padding: 1.1rem; border-radius: 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); align-items: center;">
                    <div style="width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(16, 185, 129, 0.18); color: #34d399; font-size: 1.2rem;">🎬</div>
                    <div>
                        <strong style="display:block; font-size: 0.95rem; color: var(--text-main);">Now Playing</strong>
                        <span style="color: var(--text-muted); font-size: 0.85rem;">See movies and review sessions currently live.</span>
                    </div>
                </article>
                <article style="display: flex; gap: 1rem; padding: 1.1rem; border-radius: 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); align-items: center;">
                    <div style="width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(245, 158, 11, 0.18); color: #fbbf24; font-size: 1.2rem;">⏳</div>
                    <div>
                        <strong style="display:block; font-size: 0.95rem; color: var(--text-main);">Coming Soon</strong>
                        <span style="color: var(--text-muted); font-size: 0.85rem;">Upcoming titles and previews in the queue.</span>
                    </div>
                </article>
            </div>
        </div> -->
        <section style="margin-top: 1.5rem;">
            <div class="section-title" style="display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 0.5rem;">
                <h2 style="margin: 0; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--primary); font-family: var(--font-mono);">Home movie listing</h2>
            </div>
            <div id="movie-status" style="margin-top: 1rem; color: var(--text-muted); font-size: 0.85rem; font-family: var(--font-mono);">Loading latest movies...</div>
            <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem;">
                <button id="filter-home" style="border:var(--border-tech); border-radius:4px; padding:0.6rem 1rem; background:var(--primary); color:#fff; cursor:pointer; font-family:var(--font-mono); text-transform:uppercase; font-size:0.8rem;">Home</button>
                <button id="filter-nowplaying" style="border:var(--border-tech); border-radius:4px; padding:0.6rem 1rem; background:var(--bg-elev); color:var(--primary); cursor:pointer; font-family:var(--font-mono); text-transform:uppercase; font-size:0.8rem;">Now Playing</button>
                <button id="filter-comingsoon" style="border:var(--border-tech); border-radius:4px; padding:0.6rem 1rem; background:var(--bg-elev); color:var(--primary); cursor:pointer; font-family:var(--font-mono); text-transform:uppercase; font-size:0.8rem;">Coming Soon</button>
            </div>
            <div id="movie-list" class="poster-grid" style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 1rem;"></div>
        </section>
        <section style="margin-top: 1.5rem;">
            <div class="section-title" style="display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 0.5rem;">
                <h2 style="margin: 0; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--primary); font-family: var(--font-mono);">Featured titles</h2>
            </div>
            <div class="poster-grid" style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-top: 1rem;">
                <article class="poster-card" style="border-radius: 24px; overflow: hidden; background: var(--bg-elev); border: var(--border-soft);">
                    <img src="https://images.unsplash.com/photo-1524985069026-dd778a71c7b4?auto=format&fit=crop&w=600&q=80" alt="Titan poster" style="width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;" />
                    <div class="poster-info" style="padding: 0.95rem 0.95rem 1rem; display: grid; gap: 0.25rem;">
                        <strong style="margin: 0; font-size: 0.95rem; line-height: 1.2;">TITAN</strong>
                        <small style="color: var(--text-muted); font-size: 0.82rem;">Only on Netflix | June 11</small>
                    </div>
                </article>
                <article class="poster-card" style="border-radius: 24px; overflow: hidden; background: var(--bg-elev); border: var(--border-soft);">
                    <img src="https://images.unsplash.com/photo-1517602302552-471fe67acf66?auto=format&fit=crop&w=600&q=80" alt="Straw poster" style="width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;" />
                    <div class="poster-info" style="padding: 0.95rem 0.95rem 1rem; display: grid; gap: 0.25rem;">
                        <strong style="margin: 0; font-size: 0.95rem; line-height: 1.2;">STRAW</strong>
                        <small style="color: var(--text-muted); font-size: 0.82rem;">Only on Netflix | June 6</small>
                    </div>
                </article>
                <article class="poster-card" style="border-radius: 24px; overflow: hidden; background: var(--bg-elev); border: var(--border-soft);">
                    <img src="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=600&q=80" alt="K-pop Demon Hunters poster" style="width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;" />
                    <div class="poster-info" style="padding: 0.95rem 0.95rem 1rem; display: grid; gap: 0.25rem;">
                        <strong style="margin: 0; font-size: 0.95rem; line-height: 1.2;">K-POP DEMON HUNTERS</strong>
                        <small style="color: var(--text-muted); font-size: 0.82rem;">Only on Netflix | Animation</small>
                    </div>
                </article>
                <article class="poster-card" style="border-radius: 24px; overflow: hidden; background: var(--bg-elev); border: var(--border-soft);">
                    <img src="https://images.unsplash.com/photo-1542204165-4f2fd1fcf5a1?auto=format&fit=crop&w=600&q=80" alt="La Vida Negra poster" style="width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;" />
                    <div class="poster-info" style="padding: 0.95rem 0.95rem 1rem; display: grid; gap: 0.25rem;">
                        <strong style="margin: 0; font-size: 0.95rem; line-height: 1.2;">LA VIDA NEGRA</strong>
                        <small style="color: var(--text-muted); font-size: 0.82rem;">Only on Netflix | 30 de Mayo</small>
                    </div>
                </article>
            </div>
        </section>
        {% include 'main/_bottomnav.html' with active='home' %}
    </div>
    {{ featured|json_script:"featured-data" }}
    <script>
        const heroCard = document.getElementById('hero-card');
        const heroLabel = document.getElementById('hero-label');
        const heroTitle = document.getElementById('hero-title');
        const heroSummary = document.getElementById('hero-summary');
        const heroMeta = document.getElementById('hero-meta');
        const movieList = document.getElementById('movie-list');
        const movieStatus = document.getElementById('movie-status');
        const filterHome = document.getElementById('filter-home');
        const filterNowPlaying = document.getElementById('filter-nowplaying');
        const filterComingSoon = document.getElementById('filter-comingsoon');

        // New Controls Elements
        const heroControls = document.getElementById('hero-controls');
        const progressContainer = document.getElementById('progress-container');
        const progressBar = document.getElementById('progress-bar');
        const playPauseBtn = document.getElementById('play-pause-btn');
        const playIcon = document.getElementById('play-icon');
        const pauseIcon = document.getElementById('pause-icon');
        const volumeBtn = document.getElementById('volume-btn');
        const volumeOnIcon = document.getElementById('volume-on-icon');
        const volumeOffIcon = document.getElementById('volume-off-icon');

        let allMovies = [];
        let currentFilter = 'home';
        let heroMovieId = null;
        // Admin-uploaded "now playing" movie (null if none configured); when set
        // it takes priority over the live listings for the dashboard hero.
        const FEATURED = JSON.parse(document.getElementById('featured-data').textContent);

        function isComingSoon(movie) {
            if (!movie.premiered) return false;
            const premiereDate = new Date(movie.premiered);
            const now = new Date();
            return premiereDate > now;
        }

        function isNowPlaying(movie) {
            // Include the featured movie regardless of its API status if it's in the list
            if (allMovies.length > 0 && movie.id === allMovies[0].id) return true;
            return movie.status && movie.status.toLowerCase() === 'running';
        }

        function setFilter(filter) {
            currentFilter = filter;
            filterHome.style.background = filter === 'home' ? 'var(--primary)' : 'var(--bg-elev)';
            filterHome.style.color = filter === 'home' ? 'white' : 'var(--primary)';
            filterNowPlaying.style.background = filter === 'nowplaying' ? 'var(--primary)' : 'var(--bg-elev)';
            filterNowPlaying.style.color = filter === 'nowplaying' ? 'white' : 'var(--primary)';
            filterComingSoon.style.background = filter === 'comingsoon' ? 'var(--primary)' : 'var(--bg-elev)';
            filterComingSoon.style.color = filter === 'comingsoon' ? 'white' : 'var(--primary)';
            renderMovies();
        }

        function getPreviewMovie(movies) {
            return movies[0] || null;
        }

        function renderPreview(movie) {
            const heroVideo = document.getElementById('hero-video');
            const heroVideoNative = document.getElementById('hero-video-native');
            const heroFallback = document.getElementById('hero-fallback');
            const heroPlayButton = document.getElementById('hero-play-button');
            const heroTextOverlay = document.getElementById('hero-text-overlay');

            // Reset controls
            heroControls.style.display = 'none';
            playIcon.style.display = 'block';
            pauseIcon.style.display = 'none';
            progressBar.style.width = '0%';

            if (!movie) {
                heroCard.style.backgroundImage = '';
                heroVideo.style.display = 'none';
                heroVideo.src = '';
                heroVideoNative.style.display = 'none';
                heroVideoNative.src = '';
                heroPlayButton.style.display = 'none';
                heroFallback.style.display = 'block';
                heroLabel.textContent = 'No preview available';
                heroTitle.textContent = 'No movie currently selected';
                heroSummary.textContent = 'Use the filters to show a list of movies and preview one live on top.';
                heroMeta.innerHTML = '';
                heroTextOverlay.style.display = 'none';
                return;
            }

            heroTextOverlay.style.display = 'block';
            heroFallback.style.display = 'block';
            heroFallback.style.backgroundImage = `url(${movie.image})`;
            
            const isYoutube = movie.trailer.includes('youtube.com') || movie.trailer.includes('youtu.be');

            if (isYoutube) {
                heroVideoNative.style.display = 'none';
                heroVideoNative.src = '';
                
                const trailerUrl = new URL(movie.trailer);
                trailerUrl.searchParams.set('autoplay', '1');
                trailerUrl.searchParams.set('mute', '1');
                trailerUrl.searchParams.set('controls', '0');
                trailerUrl.searchParams.set('loop', '1');
                trailerUrl.searchParams.set('playlist', movie.trailer.split('/').pop());
                
                heroVideo.src = trailerUrl.toString();
                heroVideo.style.display = 'block';
            } else {
                heroVideo.style.display = 'none';
                heroVideo.src = '';
                
                heroVideoNative.src = movie.trailer;
                heroVideoNative.style.display = 'block';
                heroVideoNative.muted = false;
                heroVideoNative.play().catch(e => {
                    console.log('Autoplay with sound blocked, muting to allow play');
                    heroVideoNative.muted = true;
                    heroVideoNative.play();
                    updateVolumeIcon();
                });
            }

            heroPlayButton.style.display = 'block';
            heroPlayButton.textContent = 'Play with sound';

            heroPlayButton.onclick = () => {
                if (isYoutube) {
                    const soundUrl = new URL(movie.trailer);
                    soundUrl.searchParams.set('autoplay', '1');
                    soundUrl.searchParams.set('mute', '0');
                    soundUrl.searchParams.set('controls', '1');
                    heroVideo.src = soundUrl.toString();
                    // YouTube iframe with controls=1 handles its own UI
                    heroControls.style.display = 'none';
                } else {
                    heroVideoNative.muted = false;
                    heroVideoNative.controls = false; // We use custom controls
                    heroVideoNative.play();
                    heroControls.style.display = 'flex';
                    updateVolumeIcon();
                }
                heroPlayButton.style.display = 'none';
                heroFallback.style.display = 'none';
                document.getElementById('hero-video-container').style.pointerEvents = 'auto';
            };

            // Native Video Events
            heroVideoNative.onplay = () => {
                playIcon.style.display = 'none';
                pauseIcon.style.display = 'block';
            };
            heroVideoNative.onpause = () => {
                playIcon.style.display = 'block';
                pauseIcon.style.display = 'none';
            };
            heroVideoNative.ontimeupdate = () => {
                const percent = (heroVideoNative.currentTime / heroVideoNative.duration) * 100;
                progressBar.style.width = percent + '%';
            };

            // Double check volume icon on mount
            updateVolumeIcon();

            // Control Actions
            playPauseBtn.onclick = () => {
                if (heroVideoNative.paused) {
                    heroVideoNative.play();
                } else {
                    heroVideoNative.pause();
                }
            };

            volumeBtn.onclick = () => {
                heroVideoNative.muted = !heroVideoNative.muted;
                updateVolumeIcon();
            };

            function updateVolumeIcon() {
                if (heroVideoNative.muted) {
                    volumeOnIcon.style.display = 'none';
                    volumeOffIcon.style.display = 'block';
                } else {
                    volumeOnIcon.style.display = 'block';
                    volumeOffIcon.style.display = 'none';
                }
            }

            progressContainer.onclick = (e) => {
                const rect = progressContainer.getBoundingClientRect();
                const pos = (e.clientX - rect.left) / rect.width;
                heroVideoNative.currentTime = pos * heroVideoNative.duration;
            };

            if (!heroVideoNative.muted && !isYoutube) {
                heroPlayButton.style.display = 'none';
                heroFallback.style.display = 'none';
                heroControls.style.display = 'flex';
                document.getElementById('hero-video-container').style.pointerEvents = 'auto';
                updateVolumeIcon();
            }

            heroLabel.textContent = currentFilter === 'comingsoon' ? 'Coming Soon' : 'Now Playing';
            heroTitle.textContent = movie.title;
            heroSummary.textContent = movie.summary ? movie.summary.replace(/<[^>]+>/g, '') : 'No summary available.';
            heroMeta.innerHTML = `
                <span>Status: ${movie.status || 'Unknown'}</span>
                <span>Premiered: ${movie.premiered || 'Unknown'}</span>
                <span>Review: ~5 min trailer</span>
            `;
        }

        function renderMovies() {
            let moviesToShow = allMovies;
            if (currentFilter === 'nowplaying') {
                moviesToShow = allMovies.filter(isNowPlaying);
                // Ensure the featured movie is at the top of "Now Playing"
                const featuredIndex = moviesToShow.findIndex(m => m.id === allMovies[0].id);
                if (featuredIndex > 0) {
                    const [featured] = moviesToShow.splice(featuredIndex, 1);
                    moviesToShow.unshift(featured);
                }
            } else if (currentFilter === 'comingsoon') {
                moviesToShow = allMovies.filter(isComingSoon);
            }

            // Always ensure a preview is rendered if none exists, but avoid
            // interrupting an already playing video unless it's gone.
            const previewMovie = FEATURED || getPreviewMovie(moviesToShow) || getPreviewMovie(allMovies);
            if (previewMovie && heroMovieId !== previewMovie.id) {
                renderPreview(previewMovie);
                heroMovieId = previewMovie.id;
                console.log('Hero preview updated to:', previewMovie.title);
            } else if (!previewMovie && heroMovieId !== null) {
                renderPreview(null);
                heroMovieId = null;
            }

            if (!moviesToShow.length) {
                movieStatus.textContent = 'No movies match the current filter.';
                movieList.innerHTML = '';
                return;
            }

            movieStatus.textContent = `Updated ${new Date().toLocaleTimeString()}`;
            movieList.innerHTML = moviesToShow.map(movie => {
                return `
                    <article class="poster-card" style="border-radius: 12px; overflow: hidden; background: var(--bg-elev); border: 1px solid rgba(43, 111, 255, 0.1); display: flex; flex-direction: column; min-height: 280px; box-shadow: 0 4px 15px rgba(43, 111, 255, 0.05);">
                        <img src="${movie.image}" alt="${movie.title}" style="width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; height: 180px;" />
                        <div class="poster-info" style="padding: 0.95rem 0.95rem 1rem; display: grid; gap: 0.25rem; flex: 1;">
                            <strong style="margin: 0; font-size: 0.95rem; line-height: 1.2; color: var(--text-main);">${movie.title}</strong>
                            <small style="color: var(--primary); font-size: 0.75rem; font-family: var(--font-mono); text-transform: uppercase;">Status: ${movie.status || 'Unknown'}</small>
                            <p style="margin: 0; color: var(--text-muted); font-size: 0.8rem; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">${movie.summary ? movie.summary.replace(/<[^>]+>/g, '') : 'No summary available.'}</p>
                        </div>
                    </article>
                `;
            }).join('');
        }

        async function fetchMovies() {
            movieStatus.textContent = 'Loading latest movies...';
            try {
                const response = await fetch('/api/movies/');
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json();
                allMovies = data.movies || [];

                if (!allMovies.length) {
                    movieStatus.textContent = 'No movies available right now.';
                    movieList.innerHTML = '';
                    renderPreview(null);
                    return;
                }

                renderMovies();
            } catch (error) {
                movieStatus.textContent = 'Unable to load movies right now.';
                movieList.innerHTML = '';
                renderPreview(null);
                console.error(error);
            }
        }

        filterHome.addEventListener('click', () => setFilter('home'));
        filterNowPlaying.addEventListener('click', () => setFilter('nowplaying'));
        filterComingSoon.addEventListener('click', () => setFilter('comingsoon'));

        setFilter('home');
        fetchMovies();
        setInterval(fetchMovies, 15000);
    </script>
{% endblock %}