{% extends "shared/base.html" %}

{% block title %}AniCove - Watch Anime Online{% endblock %}
{% block meta_description %}Watch the latest anime online for free in HD. Discover trending, popular, and new anime series.{% endblock %}
{% block og_title %}{{ self.title() }}{% endblock %}
{% block og_description %}{{ self.meta_description() }}{% endblock %}
{% block og_image %}{% if suggestions and suggestions.data and suggestions.data.spotlightAnimes %}{{ suggestions.data.spotlightAnimes[0].banner or suggestions.data.spotlightAnimes[0].poster }}{% endif %}{% endblock %}

{% block content %}
<div class="container" style="position: relative;">
    <!-- Skeleton Overlay -->
    <div class="skeleton-container" style="padding-top: var(--space-lg); background: var(--bg-primary);">
        <div class="skeleton skeleton-spotlight"></div>
        
        <div class="home-layout">
            <div class="home-main">
                <div style="display: flex; gap: 16px; margin-bottom: 24px; margin-top: 16px;">
                    <div class="skeleton skeleton-tab" style="width: 120px; height: 32px;"></div>
                    <div class="skeleton skeleton-tab" style="width: 120px; height: 32px;"></div>
                    <div class="skeleton skeleton-tab" style="width: 120px; height: 32px;"></div>
                </div>
                <div style="display: flex; gap: 14px; overflow: hidden;">
                    {% for _ in range(8) %}
                    <div class="skeleton-row-item" style="flex: 0 0 150px;">
                        <div class="skeleton" style="width: 150px; height: 200px; border-radius: var(--radius-lg);"></div>
                        <div class="skeleton skeleton-text" style="margin-top: 8px; height: 14px;"></div>
                        <div class="skeleton skeleton-text" style="width: 60%; height: 12px;"></div>
                    </div>
                    {% endfor %}
        </div>
                </div>
            </div>
            <div class="home-sidebar" style="margin-top: 16px;">
                <!-- Top Anime skeleton -->
                <div class="skeleton skeleton-title" style="width: 35%; margin-bottom: 16px;"></div>
                <div style="display: flex; gap: 6px; margin-bottom: 14px;">
                    <div class="skeleton" style="flex:1; height: 32px; border-radius: 8px;"></div>
                    <div class="skeleton" style="flex:1; height: 32px; border-radius: 8px;"></div>
                    <div class="skeleton" style="flex:1; height: 32px; border-radius: 8px;"></div>
                </div>
                <div class="sidebar-list" style="margin-bottom: 28px;">
                    {% for _ in range(6) %}
                    <div style="display: flex; gap: 10px; margin-bottom: 10px; align-items: center;">
                        <div class="skeleton" style="width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0;"></div>
                        <div class="skeleton" style="width: 36px; height: 50px; border-radius: 4px; flex-shrink: 0;"></div>
                        <div style="flex: 1;">
                            <div class="skeleton skeleton-text" style="margin-top: 4px; height: 12px;"></div>
                            <div class="skeleton skeleton-text" style="width: 40%; height: 10px;"></div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
</div>
        </div>
    </div>

    {% if error %}
    <div class="flash-message error" style="margin-bottom: var(--space-lg);">
        <span>{{ error }}</span>
    </div>
    {% endif %}

    <!-- Spotlight Carousel -->
    {% if suggestions and suggestions.data and suggestions.data.spotlightAnimes %}
    <section class="spotlight-section">
        <div class="spotlight-carousel" id="spotlight-carousel">
            {% for anime in suggestions.data.spotlightAnimes[:20] %}
            <div class="spotlight-slide {% if loop.first %}active{% endif %}" data-index="{{ loop.index0 }}">
                <div class="spotlight-backdrop">
                    <img src="{{ anime.banner or anime.poster }}" alt="{{ anime.name or anime.title }}"
                        loading="{% if loop.first %}eager{% else %}lazy{% endif %}">
                </div>
                <div class="spotlight-gradient"></div>
                <div class="spotlight-content">
                    <div class="spotlight-info">
                        <div class="spotlight-rank">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <polygon
                                    points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
                            </svg>
                            <span>#{{ loop.index }} Spotlight</span>
                        </div>
                        <h1 class="spotlight-title">{{ anime.name or anime.title }}</h1>

                        {# Genre Tags #}
                        {% if anime.genres %}
                        <div class="spotlight-genres">
                            {% for genre in anime.genres[:4] %}
                            <span class="spotlight-genre-tag">{{ genre }}</span>
                            {% endfor %}
                        </div>
                        {% endif %}

                        <p class="spotlight-description">{{ anime.description or anime.synopsis or '' }}</p>

                        {# Info Badges Row #}
                        <div class="spotlight-meta">
                            {% if anime.type %}<span class="spotlight-badge"><svg width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="2" y="2" width="20" height="20" rx="2" ry="2" />
                                    <line x1="7" y1="2" x2="7" y2="22" />
                                    <line x1="17" y1="2" x2="17" y2="22" />
                                </svg> {{ anime.type }}</span>{% endif %}
                            {% if anime.totalEpisodes %}<span class="spotlight-badge"><svg width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="2" y="3" width="20" height="18" rx="2" ry="2" />
                                    <line x1="8" y1="21" x2="8" y2="3" />
                                    <line x1="16" y1="21" x2="16" y2="3" />
                                </svg> {% if anime.releasedEpisodes is not none and anime.releasedEpisodes !=
                                anime.totalEpisodes
                                %}{{ anime.releasedEpisodes }}/{{ anime.totalEpisodes }}{% else %}{{ anime.totalEpisodes
                                }}{% endif %} Episodes</span>{% endif %}
                            {% if anime.rating %}
                            <span class="spotlight-badge spotlight-badge-rating">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="var(--warning)"
                                    stroke="var(--warning)" stroke-width="2">
                                    <polygon
                                        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
                                </svg>
                                {{ (anime.rating / 10) | round(1) }}
                            </span>
                            {% endif %}
                            {% if anime.duration %}<span class="spotlight-badge"><svg width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="12" r="10" />
                                    <polyline points="12 6 12 12 16 14" />
                                </svg> {{ anime.duration }}</span>{% endif %}
                            {% if anime.studio %}<span class="spotlight-badge"><svg width="14" height="14"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M12 2L2 7l10 5 10-5-10-5z" />
                                    <path d="M2 17l10 5 10-5" />
                                    <path d="M2 12l10 5 10-5" />
                                </svg> {{ anime.studio }}</span>{% endif %}
                            {% if anime.isAdult %}
                            <span class="spotlight-badge" style="background:var(--error);color:white;">18+</span>
                            {% endif %}
                        </div>

                        <div class="spotlight-actions">
                            <a href="/watch/{{ anime.id }}" class="btn btn-primary btn-lg">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                    <polygon points="5 3 19 12 5 21 5 3" />
                                </svg>
                                Watch Now
                            </a>
                            <a href="/anime/{{ anime.id }}" class="btn btn-secondary btn-lg">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2">
                                    <circle cx="12" cy="12" r="10" />
                                    <line x1="12" y1="16" x2="12" y2="12" />
                                    <line x1="12" y1="8" x2="12.01" y2="8" />
                                </svg>
                                Details
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- Carousel Navigation -->
        <div class="spotlight-nav">
            <button class="spotlight-nav-btn" id="spotlight-prev" aria-label="Previous">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                    <polyline points="15 18 9 12 15 6" />
                </svg>
            </button>
            <div class="spotlight-fraction" id="spotlight-fraction">
                <span class="spotlight-current">1</span> / <span class="spotlight-total">{{
                    suggestions.data.spotlightAnimes[:20]|length }}</span>
            </div>
            <button class="spotlight-nav-btn" id="spotlight-next" aria-label="Next">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                    <polyline points="9 18 15 12 9 6" />
                </svg>
            </button>
        </div>
    </section>
    {% endif %}

    <!-- Continue Watching Section (populated by JS from localStorage) -->
    <section class="cw-section" id="continue-watching-section" style="display: none;">
        <div class="section-header">
            <div>
                <div class="section-subtitle">Your Watchlist</div>
                <h2 class="section-title">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polygon points="5 3 19 12 5 21 5 3"></polygon>
                    </svg>
                    Continue Watching
                </h2>
            </div>
            <button class="cw-clear-btn" id="cw-clear-btn" title="Clear all">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="3 6 5 6 21 6"></polyline>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                </svg>
                Clear All
            </button>
        </div>
        <div class="cw-scroll-wrapper">
            <div class="cw-scroll" id="cw-scroll-container"></div>
        </div>
    </section>



    <!-- Main Home Layout -->
    <div class="home-layout">
        <!-- Main Content (Left) -->
        <div class="home-main">
            <!-- Share Banner -->
            <div class="share-banner">
                <div class="share-banner-text">
                    <img src="https://creator.nightcafe.studio/jobs/k7xk0gbBkN7kiRpucGh8/k7xk0gbBkN7kiRpucGh8--1--w8kcg.jpg"
                        alt="Share">
                    <div>
                        <div class="share-title">Love the Site?</div>
                        <div class="share-subtitle">Share it With your friends!</div>
                    </div>
                </div>
                <div class="share-socials">
                    <a href="https://discord.gg/RgbHAggsnT" target="_blank" class="social-btn"
                        aria-label="Join Discord">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                            <path
                                d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
                        </svg>
                    </a>
                </div>
            </div>

            <!-- Trending Now Section -->
            {% if suggestions and suggestions.data and suggestions.data.trendingAnimes %}
            <div class="home-section-header">
                <div class="home-section-left">
                    <h2 class="home-section-title">Trending Now</h2>
                    <span class="home-section-badge">Hot</span>
                </div>
                <a href="/category/trending" class="home-section-view-all">
                    View all
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <polyline points="9 18 15 12 9 6" />
                    </svg>
                </a>
            </div>
            <div class="home-row-scroll">
                {% for anime in suggestions.data.trendingAnimes %}
                <a href="/watch/{{ anime.id }}" class="home-row-card" {% if anime.isAdult %}data-is-adult="true"{% endif %}>
                    <div class="home-row-card-poster">
                        <img src="{{ anime.poster or anime.image }}" alt="{{ anime.name or anime.title }}" loading="lazy">
                        {% if anime.isAdult %}<span class="home-row-card-18">18+</span>{% endif %}
                        {% if anime.rating %}
                        <span class="home-row-card-rating">★ {{ (anime.rating / 10) | round(1) }}</span>
                        {% endif %}
                    </div>
                    <div class="home-row-card-info">
                        <div class="home-row-card-title">{{ anime.name or anime.title }}</div>
                        <div class="home-row-card-meta">
                            {% if anime.type %}<span class="type">{{ anime.type }}</span>{% endif %}
                            {% if anime.episodes and anime.episodes.sub %}
                            <span class="eps">· {{ anime.episodes.sub }} Eps</span>
                            {% endif %}
                        </div>
                    </div>
                </a>
                {% endfor %}
            </div>
            {% endif %}

            <!-- Popular This Season Section -->
            {% if suggestions and suggestions.data and suggestions.data.mostPopularAnimes %}
            <div class="home-section-header">
                <div class="home-section-left">
                    <h2 class="home-section-title">Popular This Season</h2>
                </div>
                <a href="/category/popular" class="home-section-view-all">
                    View all
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <polyline points="9 18 15 12 9 6" />
                    </svg>
                </a>
            </div>
            <div class="home-row-scroll">
                {% for anime in suggestions.data.mostPopularAnimes %}
                <a href="/watch/{{ anime.id }}" class="home-row-card" {% if anime.isAdult %}data-is-adult="true"{% endif %}>
                    <div class="home-row-card-poster">
                        <img src="{{ anime.poster or anime.image }}" alt="{{ anime.name or anime.title }}" loading="lazy">
                        {% if anime.isAdult %}<span class="home-row-card-18">18+</span>{% endif %}
                        {% if anime.rating %}
                        <span class="home-row-card-rating">★ {{ (anime.rating / 10) | round(1) }}</span>
                        {% endif %}
                    </div>
                    <div class="home-row-card-info">
                        <div class="home-row-card-title">{{ anime.name or anime.title }}</div>
                        <div class="home-row-card-meta">
                            {% if anime.type %}<span class="type">{{ anime.type }}</span>{% endif %}
                            {% if anime.episodes and anime.episodes.sub %}
                            <span class="eps">· {{ anime.episodes.sub }} Eps</span>
                            {% endif %}
                        </div>
                    </div>
                </a>
                {% endfor %}
            </div>
            {% endif %}

            <!-- Recent Updates Section -->
            {% if suggestions and suggestions.data and suggestions.data.latestEpisodeAnimes %}
            <div class="home-section-header">
                <div class="home-section-left">
                    <h2 class="home-section-title">Recent Updates</h2>
                    <span class="home-section-badge new-badge">New</span>
                </div>
                <a href="/category/recently-updated" class="home-section-view-all">
                    View all
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <polyline points="9 18 15 12 9 6" />
                    </svg>
                </a>
            </div>
            <div class="home-row-scroll">
                {% for anime in suggestions.data.latestEpisodeAnimes %}
                <a href="/watch/{{ anime.id }}" class="home-row-card" {% if anime.isAdult %}data-is-adult="true"{% endif %}>
                    <div class="home-row-card-poster">
                        <img src="{{ anime.poster or anime.image }}" alt="{{ anime.name or anime.title }}" loading="lazy">
                        {% if anime.isAdult %}<span class="home-row-card-18">18+</span>{% endif %}
                        {% if anime.rating %}
                        <span class="home-row-card-rating">★ {{ (anime.rating / 10) | round(1) }}</span>
                        {% endif %}
                    </div>
                    <div class="home-row-card-info">
                        <div class="home-row-card-title">{{ anime.name or anime.title }}</div>
                        <div class="home-row-card-meta">
                            {% if anime.type %}<span class="type">{{ anime.type }}</span>{% endif %}
                            {% if anime.episodes and anime.episodes.sub %}
                            <span class="eps">· {{ anime.episodes.sub }} Eps</span>
                            {% endif %}
                        </div>
                    </div>
                </a>
                {% endfor %}
            </div>
            {% endif %}



            <!-- Movies Section -->
            {% if movies %}
            <div class="home-section-header">
                <div class="home-section-left">
                    <h2 class="home-section-title">Popular Movies</h2>
                </div>
                <a href="/category/movie" class="home-section-view-all">
                    View all
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <polyline points="9 18 15 12 9 6" />
                    </svg>
                </a>
            </div>
            <div class="home-row-scroll">
                {% for anime in movies %}
                <a href="/watch/{{ anime.id }}" class="home-row-card" {% if anime.isAdult %}data-is-adult="true"{% endif %}>
                    <div class="home-row-card-poster">
                        <img src="{{ anime.poster or anime.image }}" alt="{{ anime.name or anime.title }}" loading="lazy">
                        {% if anime.isAdult %}<span class="home-row-card-18">18+</span>{% endif %}
                        {% if anime.rating %}
                        <span class="home-row-card-rating">★ {{ (anime.rating / 10) | round(1) }}</span>
                        {% endif %}
                    </div>
                    <div class="home-row-card-info">
                        <div class="home-row-card-title">{{ anime.name or anime.title }}</div>
                        <div class="home-row-card-meta">
                            {% if anime.type %}<span class="type">{{ anime.type }}</span>{% endif %}
                            {% if anime.episodes and anime.episodes.sub %}
                            <span class="eps">· {{ anime.episodes.sub }} Eps</span>
                            {% endif %}
                        </div>
                    </div>
                </a>
                {% endfor %}
            </div>
            {% endif %}

            <!-- Upcoming Releases Section -->
            {% if weekly_schedule %}
            <div class="home-section-header">
                <div class="home-section-left">
                    <h2 class="home-section-title">Upcoming Releases</h2>
                    <span class="home-section-badge">Anticipated</span>
                </div>
            </div>
            <div class="home-row-scroll">
                {% set seen = [] %}
                {% for day_bucket in weekly_schedule %}
                    {% for anime in day_bucket.animes %}
                        {% if anime.name not in seen %}
                            {% set _ = seen.append(anime.name) %}
                <a href="/watch/{{ anime.id }}" class="home-row-card" {% if anime.isAdult %}data-is-adult="true"{% endif %}>
                    <div class="home-row-card-poster">
                        <img src="{{ anime.poster or anime.image }}" alt="{{ anime.name or anime.title }}" loading="lazy">
                        {% if anime.isAdult %}<span class="home-row-card-18">18+</span>{% endif %}
                    </div>
                    <div class="home-row-card-info">
                        <div class="home-row-card-title">{{ anime.name or anime.title }}</div>
                        <div class="home-row-card-meta">
                            {% if anime.type %}<span class="type">{{ anime.type }}</span>{% endif %}
                            {% if anime.next_episode %}
                            <span class="eps">· Ep {{ anime.next_episode }}</span>
                            {% endif %}
                        </div>
                    </div>
                </a>
                        {% endif %}
                    {% endfor %}
                {% endfor %}
            </div>
            {% endif %}

        </div>

        <!-- Sidebar Content (Right) -->
        <div class="home-sidebar">
            <!-- Top 6 Anime sidebar widget -->
            {% if suggestions and suggestions.data and suggestions.data.trendingAnimes %}
            <div class="sidebar-section">
                <h2 class="sidebar-title">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
                    </svg>
                    Top Anime
                </h2>
                <div class="top-anime-tabs">
                    <button class="top-anime-tab active" onclick="switchTopAnimeTab(this, 'day')">Day</button>
                    <button class="top-anime-tab" onclick="switchTopAnimeTab(this, 'week')">Week</button>
                    <button class="top-anime-tab" onclick="switchTopAnimeTab(this, 'month')">Month</button>
                </div>
                <!-- Day: Trending Now -->
                <div class="top-anime-content" id="top-anime-day">
                    {% for anime in (suggestions.data.trendingAnimes or [])[:6] %}
                    <a href="/watch/{{ anime.id }}" class="top-anime-item" {% if anime.isAdult %}data-is-adult="true"{% endif %}>
                        <span class="top-anime-rank top-rank-{{ loop.index }}">{{ loop.index }}</span>
                        <div class="top-anime-poster">
                            <img src="{{ anime.poster or anime.image }}" alt="{{ anime.name or anime.title }}" loading="lazy">
                        </div>
                        <div class="top-anime-info">
                            <div class="top-anime-title">{{ anime.name or anime.title }}</div>
                            <div class="top-anime-meta">
                                {% if anime.type %}{{ anime.type }}{% endif %}
                                {% if anime.episodes and anime.episodes.sub %} · {{ anime.episodes.sub }} eps{% endif %}
                            </div>
                        </div>
                        {% if anime.rating %}
                        <span class="top-anime-rating">★ {{ (anime.rating / 10) | round(1) }}</span>
                        {% endif %}
                    </a>
                    {% endfor %}
                </div>
                <!-- Week: Next Trending batch -->
                <div class="top-anime-content" id="top-anime-week" style="display:none;">
                    {% set week_animes = (suggestions.data.trendingAnimes or [])[6:12] or (suggestions.data.trendingAnimes or [])[:6] %}
                    {% for anime in week_animes %}
                    <a href="/watch/{{ anime.id }}" class="top-anime-item" {% if anime.isAdult %}data-is-adult="true"{% endif %}>
                        <span class="top-anime-rank top-rank-{{ loop.index }}">{{ loop.index }}</span>
                        <div class="top-anime-poster">
                            <img src="{{ anime.poster or anime.image }}" alt="{{ anime.name or anime.title }}" loading="lazy">
                        </div>
                        <div class="top-anime-info">
                            <div class="top-anime-title">{{ anime.name or anime.title }}</div>
                            <div class="top-anime-meta">
                                {% if anime.type %}{{ anime.type }}{% endif %}
                                {% if anime.episodes and anime.episodes.sub %} · {{ anime.episodes.sub }} eps{% endif %}
                            </div>
                        </div>
                        {% if anime.rating %}
                        <span class="top-anime-rating">★ {{ (anime.rating / 10) | round(1) }}</span>
                        {% endif %}
                    </a>
                    {% endfor %}
                </div>
                <!-- Month: Most Popular -->
                <div class="top-anime-content" id="top-anime-month" style="display:none;">
                    {% for anime in (suggestions.data.mostPopularAnimes or [])[:6] %}
                    <a href="/watch/{{ anime.id }}" class="top-anime-item" {% if anime.isAdult %}data-is-adult="true"{% endif %}>
                        <span class="top-anime-rank top-rank-{{ loop.index }}">{{ loop.index }}</span>
                        <div class="top-anime-poster">
                            <img src="{{ anime.poster or anime.image }}" alt="{{ anime.name or anime.title }}" loading="lazy">
                        </div>
                        <div class="top-anime-info">
                            <div class="top-anime-title">{{ anime.name or anime.title }}</div>
                            <div class="top-anime-meta">
                                {% if anime.type %}{{ anime.type }}{% endif %}
                                {% if anime.episodes and anime.episodes.sub %} · {{ anime.episodes.sub }} eps{% endif %}
                            </div>
                        </div>
                        {% if anime.rating %}
                        <span class="top-anime-rating">★ {{ (anime.rating / 10) | round(1) }}</span>
                        {% endif %}
                    </a>
                    {% endfor %}
                </div>

                <!-- Release Schedule inside Top Anime -->
                {% if weekly_schedule %}
                <div style="border-top:1px solid rgba(255,255,255,0.06);margin-top:14px;padding-top:14px;">
                    <div style="display:flex;align-items:center;gap:6px;font-size:0.8rem;font-weight:600;color:#999;margin-bottom:10px;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                            <line x1="16" y1="2" x2="16" y2="6"></line>
                            <line x1="8" y1="2" x2="8" y2="6"></line>
                            <line x1="3" y1="10" x2="21" y2="10"></line>
                        </svg>
                        Release Schedule
                    </div>
                    <div class="schedule-tabs" style="display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap;">
                        {% for day_bucket in weekly_schedule[:7] %}
                        <button class="schedule-tab {% if loop.first %}active{% endif %}"
                                data-day="{{ day_bucket.day }}"
                                onclick="switchScheduleDay(this, '{{ day_bucket.day }}')">
                            <span class="schedule-tab-day">{{ day_bucket.day }}</span>
                            <span class="schedule-tab-count">{{ day_bucket.count }}</span>
                        </button>
                        {% endfor %}
                    </div>
                    {% for day_bucket in weekly_schedule[:7] %}
                    <div class="schedule-day-content" id="sidebar-schedule-day-{{ day_bucket.day }}" {% if not loop.first %}style="display:none;"{% endif %}>
                        {% for anime in day_bucket.animes[:5] %}
                        <a href="/watch/{{ anime.id }}" class="top-anime-item" {% if anime.isAdult %}data-is-adult="true"{% endif %}>
                            <div class="top-anime-poster" style="width:32px;height:44px;flex-shrink:0;">
                                <img src="{{ anime.poster or anime.image }}" alt="{{ anime.name or anime.title }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;border-radius:4px;">
                            </div>
                            <div class="top-anime-info">
                                <div class="top-anime-title" style="font-size:0.78rem;">{{ anime.name or anime.title }}</div>
                                <div class="top-anime-meta" style="font-size:0.62rem;">
                                    {% if anime.next_episode %}Ep {{ anime.next_episode }}{% endif %}
                                    {% if anime.airingAt %} · {{ anime.airingAt | format_airing_time }}{% endif %}
                                </div>
                            </div>
                            {% if anime.airingAt %}
                            <span style="font-size:0.6rem;color:#555;white-space:nowrap;flex-shrink:0;">
                                <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:2px;">
                                    <circle cx="12" cy="12" r="10" />
                                    <polyline points="12 6 12 12 16 14" />
                                </svg>
                                {{ anime.airingAt | format_airing_time }}
                            </span>
                            {% endif %}
                        </a>
                        {% endfor %}
                        {% if day_bucket.animes|length > 5 %}
                        <a href="/category/recently-updated" style="display:block;text-align:center;font-size:0.72rem;color:var(--accent);padding:6px 0;text-decoration:none;">
                            + {{ day_bucket.animes|length - 5 }} more
                        </a>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
            {% endif %}

        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
{% endblock %}