{% extends "base.html" %}

{% block content %}
{% include "components/header.html" %}

<!-- Main content - Managed by Alpine state -->
<div id="main-content">

{% include "components/home_section.html" %}

<!-- Nouveaux onglets -->
<div id="tab-anime" class="tab-content" x-show="activeTab === 'anime'">
    <!-- Anime Search Section -->
    <div class="section-header">
        <h2>🎬 Rechercher un Anime</h2>
    </div>
    <div class="url-form">
        <form hx-get="/api/anime/search" 
              hx-target="#animeSearchResults" 
              hx-indicator="#search-loading"
              hx-trigger="submit, keyup changed delay:500ms from:#animeSearchInput"
              class="input-group">
            <input type="hidden" name="html" value="1">
            <input
                type="text"
                name="q"
                id="animeSearchInput"
                placeholder="Rechercher un anime (ex: Frieren, One Piece, Naruto...)"
                required
            >
            <button type="submit" class="btn-primary">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
                Rechercher
            </button>
        </form>
        <div id="search-loading" class="htmx-indicator">
            <div class="spinner"></div> Recherche en cours...
        </div>
        <div style="margin-top: 10px; padding: 10px; background: rgba(0, 217, 255, 0.1); border-radius: 8px; font-size: 12px; color: #aaa;">
            💡 <strong>Info:</strong> La recherche utilise MyAnimeList pour afficher la fiche complète (synopsis, saisons, etc.)
        </div>
    </div>

    <!-- Anime search results -->
    <div id="animeSearchResults" style="margin-bottom: 40px;"></div>
    
    <!-- Player container for HTMX injections -->
    <div id="player-container"></div>

    <hr style="border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 40px 0;">

    <!-- Latest Releases Section -->
    <div class="section-header">
        <h2>🔥 Dernières sorties Anime</h2>
        <button class="btn-small btn-secondary" 
                hx-get="/api/releases/latest" 
                hx-target="#animeReleasesList">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
            </svg>
            Dernières sorties
        </button>
    </div>
    <div id="animeReleasesList" class="recommendations-carousel" hx-get="/api/releases/latest" hx-trigger="load delay:500ms"></div>
</div>

<div id="tab-series" class="tab-content" x-show="activeTab === 'series'">
    <!-- Series Search Section -->
    <div class="section-header">
        <h2>📺 Rechercher une Série TV</h2>
    </div>
    <div class="url-form">
        <form hx-get="/api/series/search" 
              hx-target="#seriesSearchResults" 
              hx-indicator="#series-search-loading"
              hx-trigger="submit, keyup changed delay:500ms from:#seriesSearchInput"
              class="input-group">
            <input type="hidden" name="html" value="1">
            <input
                type="text"
                name="q"
                id="seriesSearchInput"
                placeholder="Rechercher une série (ex: Breaking Bad, Game of Thrones...)"
                required
            >
            <button type="submit" class="btn-primary">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
                Rechercher
            </button>
        </form>
        <div id="series-search-loading" class="htmx-indicator">
            <div class="spinner"></div> Recherche en cours...
        </div>
        <div style="margin-top: 10px; padding: 10px; background: rgba(255, 107, 107, 0.1); border-radius: 8px; font-size: 12px; color: #aaa;">
            💡 <strong>Info:</strong> La recherche utilise FS7 pour trouver des séries TV américaines et européennes
        </div>
    </div>

    <!-- Series search results -->
    <div id="seriesSearchResults" style="margin-bottom: 40px;"></div>

    <hr style="border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 40px 0;">

    <!-- Recommendations Section -->
    <div class="section-header">
        <h2>🎯 Recommandé pour vous</h2>
        <button class="btn-small btn-secondary" 
                hx-get="/api/recommendations" 
                hx-target="#seriesRecommendationsList">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
            </svg>
            Actualiser
        </button>
    </div>
    <div id="seriesRecommendationsList" class="recommendations-carousel" style="margin-bottom: 40px;" hx-get="/api/recommendations" hx-trigger="load delay:600ms"></div>

    <!-- Latest Releases Section -->
    <div class="section-header" style="margin-top: 40px;">
        <h2>🔥 Dernières sorties Séries TV</h2>
        <button class="btn-small btn-secondary" 
                hx-get="/api/releases/latest" 
                hx-target="#seriesReleasesList">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
            </svg>
            Dernières sorties
        </button>
    </div>
    <div id="seriesReleasesList" class="releases-carousel" hx-get="/api/releases/latest" hx-trigger="load delay:700ms"></div>
</div>

<div id="tab-providers" class="tab-content" x-show="activeTab === 'providers'">
    <div class="section-header">
        <h2>📦 Fournisseurs de Streaming</h2>
        <button class="btn btn-sm btn-secondary" hx-get="/api/providers/health" hx-target="#providersGrid">Actualiser</button>
    </div>
    <div id="providersGrid" class="search-results"></div>
</div>

<div id="tab-watchlist" class="tab-content" x-show="activeTab === 'watchlist'">
{% include "components/watchlist_section.html" %}
</div>

<div id="tab-downloads" class="tab-content" x-show="activeTab === 'downloads'">
{% include "components/downloads_section.html" %}
</div>

</div>
<!-- End of main-content -->

{% endblock %}