{% 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 btn-primary btn-search">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:18px;height:18px;">
                    <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" style="margin-top: 15px; color: var(--primary);">
            <div class="spinner"></div> Recherche en cours...
        </div>
        <div style="margin-top: 15px; padding: 12px; background: rgba(0, 217, 255, 0.05); border: 1px solid rgba(0, 217, 255, 0.1); border-radius: var(--input-radius); font-size: 13px; color: var(--text-dim);">
            💡 <strong>Astuce :</strong> La recherche unifiée explore plusieurs sources pour trouver vos animes préférés.
        </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.05); margin: 40px 0;">

    <!-- Latest Releases Section -->
    <div class="section-header">
        <h2>🔥 Dernières sorties Anime</h2>
        <button class="btn btn-secondary btn-small" 
                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>
            Actualiser
        </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 btn-primary btn-search">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:18px;height:18px;">
                    <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" style="margin-top: 15px; color: var(--secondary);">
            <div class="spinner"></div> Recherche en cours...
        </div>
        <div style="margin-top: 15px; padding: 12px; background: rgba(255, 107, 107, 0.05); border: 1px solid rgba(255, 107, 107, 0.1); border-radius: var(--input-radius); font-size: 13px; color: var(--text-dim);">
            💡 <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.05); margin: 40px 0;">

    <!-- Recommendations Section -->
    <div class="section-header">
        <h2>🎯 Recommandé pour vous</h2>
        <button class="btn btn-secondary btn-small" 
                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 btn-secondary btn-small" 
                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>
            Actualiser
        </button>
    </div>
    <div id="seriesReleasesList" class="releases-carousel" hx-get="/api/releases/latest" hx-trigger="load delay:700ms"></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 id="tab-settings" class="tab-content" x-show="activeTab === 'settings'">
    <div hx-get="/api/settings/ui" hx-trigger="set-tab[detail.tab === 'settings'] from:window, refresh-settings" hx-swap="innerHTML">
        <div class="loading-placeholder">
            <div class="spinner"></div> Chargement des paramètres...
        </div>
    </div>
</div>

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

{% endblock %}