<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swightshome - Upcoming Anime for {{ season.capitalize() }}</title>
    <link rel="icon" href="Logonowhite.png" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
    <script>
        // Function to start countdown timers
        function startCountdown() {
            const elements = document.querySelectorAll('.countdown');
            elements.forEach(element => {
                const airingTime = new Date(element.dataset.airingAt * 1000);
                const countdown = setInterval(() => {
                    const now = new Date().getTime();
                    const distance = airingTime - now;
                    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
                    element.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
                    if (distance < 0) {
                        clearInterval(countdown);
                        element.innerHTML = "Airing Now";
                    }
                }, 1000);
            });
        }

        // Function to toggle dropdown menu
        function toggleDropdown() {
            const dropdownMenu = document.getElementById('dropdown-menu');
            dropdownMenu.classList.toggle('is-active');
            if (dropdownMenu.classList.contains('is-active')) {
                dropdownMenu.style.maxHeight = dropdownMenu.scrollHeight + "px";
            } else {
                dropdownMenu.style.maxHeight = 0;
            }
        }

        // Function to close dropdown menu when clicking outside
        document.addEventListener('click', (event) => {
            const dropdownMenu = document.getElementById('dropdown-menu');
            const dropdownTrigger = document.querySelector('.dropdown-trigger');
            if (!dropdownTrigger.contains(event.target) && !dropdownMenu.contains(event.target)) {
                dropdownMenu.classList.remove('is-active');
                dropdownMenu.style.maxHeight = 0;
            }
        });

        // Function to toggle dark mode
        function toggleDarkMode() {
            const body = document.body;
            const darkModeButton = document.getElementById('dark-mode-button');
            const isDarkMode = body.classList.toggle('dark-mode');

            // Update button icon and save preference to localStorage
            if (isDarkMode) {
                darkModeButton.innerHTML = '🌙';
                localStorage.setItem('theme', 'dark');
            } else {
                darkModeButton.innerHTML = '☀️';
                localStorage.setItem('theme', 'light');
            }
        }

        // Function to set initial theme based on browser preference or localStorage
        function setInitialTheme() {
            const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
            const savedTheme = localStorage.getItem('theme');
            const body = document.body;
            const darkModeButton = document.getElementById('dark-mode-button');

            if (savedTheme === 'dark' || (!savedTheme && prefersDarkMode)) {
                body.classList.add('dark-mode');
                darkModeButton.innerHTML = '🌙';
            } else {
                body.classList.remove('dark-mode');
                darkModeButton.innerHTML = '☀️';
            }
        }

        // Initialize theme and event listeners
        document.addEventListener('DOMContentLoaded', () => {
            startCountdown();
            setInitialTheme();
        });
    </script>
    <style>
        /* Dropdown menu styles */
        .dropdown {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 10px; /* Space between dropdown and dark mode button */
        }

        .dropdown-trigger button {
            background-color: #00d1b2;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 24px;
            padding: 10px 12px;
            border-radius: 5px;
        }

        .dropdown-menu {
            display: block;
            position: absolute;
            background-color: white; /* Default light mode background */
            color: #00d1b2;
            border: 2px solid #00d1b2;
            border-radius: 5px;
            padding: 0;
            margin-top: 10px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.3s ease;
            opacity: 0;
        }

        .dropdown-menu.is-active {
            opacity: 1;
            max-height: 300px;
        }

        .dropdown-menu .dropdown-item {
            display: flex;
            align-items: center;
            padding: 10px;
            color: #00d1b2;
            text-decoration: none;
            font-size: 24px;
            transition: background 0.3s ease, color 0.3s ease;
        }

        .dropdown-menu .dropdown-item.current {
            background-color: #00d1b2;
            color: white;
        }

        .dropdown-menu .dropdown-item.current .title {
            max-width: 200px; /* Always visible for current page */
        }

        .dropdown-menu .dropdown-item .title {
            margin-left: 10px;
            font-size: 18px;
            max-width: 0;
            overflow: hidden;
            white-space: nowrap;
            transition: max-width 0.3s ease;
        }

        .dropdown-menu .dropdown-item:hover .title {
            max-width: 200px;
        }

        .dropdown-menu .dropdown-item:hover {
            background-color: #00d1b2;
            color: white;
        }

        .dropdown-menu .separator {
            padding: 10px;
            color: #00d1b2; /* Green text for "Upcoming seasons this year" */
            text-align: center;
            font-size: 18px;
        }

        /* Dark mode styles */
        .dark-mode {
            background-color: #121212;
            color: #ffffff;
        }

        .dark-mode .title,
        .dark-mode .subtitle {
            color: #ffffff !important;
        }

        .dark-mode .dropdown-menu {
            background-color: #1e1e1e; /* Black background for dropdown menu */
            color: #ffffff; /* White text */
            border-color: #00d1b2; /* Keep the border color consistent */
        }

        .dark-mode .dropdown-menu .dropdown-item {
            color: #ffffff; /* White text for buttons */
        }

        .dark-mode .dropdown-menu .dropdown-item:hover {
            background-color: #00d1b2; /* Green background on hover */
            color: white; /* White text on hover */
        }

        .dark-mode .dropdown-menu .separator {
            color: #00d1b2; /* Green text for "Upcoming seasons this year" */
        }

        .dark-mode footer {
            background-color: #1e1e1e;
            border-color: #333;
        }

        .dark-mode footer a {
            color: #00d1b2;
        }

        .dark-mode .card {
            background-color: #1e1e1e;
            color: #ffffff;
        }

        .dark-mode .card .title,
        .dark-mode .card .subtitle {
            color: #ffffff !important;
        }

        /* Dark mode toggle button */
        #dark-mode-button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 24px;
            padding: 0;
            margin: 0;
            color: #00d1b2; /* Greenish color for the icon */
        }

        /* Anime list styles */
        .anime-list {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
        }

        .anime-card {
            margin-bottom: 1rem;
            max-width: 150px;
            flex: 1 0 21%;
        }

        .anime-card img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        .countdown {
            font-weight: bold;
            color: #ff3860;
        }

        /* Footer styles */
        footer {
            background-color: #f5f5f5;
            padding: 2rem 1.5rem;
            margin-top: 3rem;
            text-align: center;
            border-top: 1px solid #eaeaea;
        }

        footer a {
            color: #00d1b2;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }

        /* Mobile responsiveness */
        @media (max-width: 768px) {
            .dropdown-trigger button {
                font-size: 20px;
                padding: 8px 10px;
            }

            .dropdown-menu .dropdown-item {
                font-size: 20px;
            }

            .dropdown-menu .dropdown-item .title {
                font-size: 16px;
            }

            .anime-card {
                max-width: 120px;
                flex: 1 0 45%;
            }

            .anime-card .title.is-6 {
                font-size: 14px;
            }

            .anime-card .subtitle.is-7 {
                font-size: 12px;
            }

            footer {
                padding: 1.5rem 1rem;
            }
        }
    </style>
</head>

<body>
    <!-- Dropdown menu and dark mode button -->
    <div class="dropdown">
        <div class="dropdown-trigger">
            <button onclick="toggleDropdown()">
                <span>☰</span>
            </button>
        </div>
        <button id="dark-mode-button" onclick="toggleDarkMode()">☀️</button>
        <div id="dropdown-menu" class="dropdown-menu">
            <div class="dropdown-content">
                <!-- "Currently Airing" button with current season in parentheses -->
                <a href="/" class="dropdown-item {% if current_page == 'airing' %}current{% endif %}">
                    <span class="icon">📅</span>
                    <span class="title">Currently Airing ({{ current_season.capitalize() }})</span>
                </a>
                <div class="separator">Upcoming seasons this year</div>
                <!-- Only show seasons that are not the current season -->
                {% if current_season != 'winter' %}
                <a href="/season/winter" class="dropdown-item {% if season == 'winter' %}current{% endif %}">
                    <span class="icon">❄️</span>
                    <span class="title">Winter</span>
                </a>
                {% endif %}
                {% if current_season != 'spring' %}
                <a href="/season/spring" class="dropdown-item {% if season == 'spring' %}current{% endif %}">
                    <span class="icon">🌸</span>
                    <span class="title">Spring</span>
                </a>
                {% endif %}
                {% if current_season != 'summer' %}
                <a href="/season/summer" class="dropdown-item {% if season == 'summer' %}current{% endif %}">
                    <span class="icon">☀️</span>
                    <span class="title">Summer</span>
                </a>
                {% endif %}
                {% if current_season != 'fall' %}
                <a href="/season/fall" class="dropdown-item {% if season == 'fall' %}current{% endif %}">
                    <span class="icon">🍂</span>
                    <span class="title">Fall</span>
                </a>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Main content -->
    <section class="section">
        <div class="container">
            <h1 class="title has-text-centered">Upcoming Anime for {{ season.capitalize() }}</h1>
            <div class="anime-list">
                {% for anime in anime_list %}
                <div class="card anime-card">
                    <div class="card-image">
                        <figure class="image is-2by3">
                            <a href="{{ anime.site_url }}" target="_blank">
                                <img src="{{ anime.cover_image }}" alt="{{ anime.title }}">
                            </a>
                        </figure>
                    </div>
                    <div class="card-content">
                        <a href="{{ anime.site_url }}" target="_blank">
                            <p class="title is-6">{{ anime.title }}</p>
                        </a>
                        {% if anime.start_date %}
                        <p class="subtitle is-7">Starts on: {{ formatDateTime(anime.start_date) }}</p>
                        {% else %}
                        <p class="subtitle is-7">Start date unknown</p>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="content has-text-centered">
            <p>
                Made with ❤️ by Swight.
                Powered by <a href="https://anilist.co" target="_blank">AniList</a>.
            </p>
            <p>
                <a href="https://git.swightshome.xyz/Swight/swightshome" target="_blank">Source Code</a>
            </p>
        </div>
    </footer>
</body>

</html>
