{% extends "base.html" %}

{% block content %}
<!-- Main content - Managed by Alpine state -->
<div id="main-content">

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

<!-- Anime Tab -->
<div id="tab-anime" x-show="activeTab === 'anime'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
    <!-- Anime Search Section -->
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold">
            <i class="fa-solid fa-film text-primary"></i> Rechercher un Anime
        </h2>
    </div>
    <form hx-get="/api/anime/search"
          hx-target="#animeSearchResults"
          hx-indicator="#search-loading"
          hx-trigger="submit, keyup changed delay:500ms from:#animeSearchInput"
          class="join w-full mb-4">
        <input type="hidden" name="html" value="1">
        <input
            type="text"
            name="q"
            id="animeSearchInput"
            placeholder="Rechercher un anime (ex: Frieren, One Piece, Naruto...)"
            required
            class="input input-bordered join-item flex-1"
        >
        <button type="submit" class="btn btn-primary join-item">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-[18px] h-[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 flex items-center gap-2 text-primary py-2">
        <span class="loading loading-spinner loading-sm"></span> Recherche en cours...
    </div>

    <!-- Anime search results -->
    <div id="animeSearchResults" class="mb-10"></div>

    <!-- Player container for HTMX injections -->
    <div id="player-container"></div>

    <div class="divider"></div>

    <!-- Latest Releases Section - Anime only -->
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold">
            <i class="fa-solid fa-fire text-error"></i> Dernières sorties Anime
        </h2>
        <button class="btn btn-sm btn-ghost gap-1.5"
                hx-get="/api/releases/latest?content_type=anime&html=1"
                hx-target="#animeReleasesList">
            <i class="fa-solid fa-arrows-rotate text-xs"></i> Actualiser
        </button>
    </div>
    <div id="animeReleasesList" hx-get="/api/releases/latest?content_type=anime&html=1" hx-trigger="load delay:500ms"></div>
</div>

<!-- Series Tab -->
<div id="tab-series" x-show="activeTab === 'series'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
    <!-- Series Search Section -->
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold">
            <i class="fa-solid fa-tv text-secondary"></i> Rechercher une Série TV
        </h2>
    </div>
    <form hx-get="/api/series/search"
          hx-target="#seriesSearchResults"
          hx-indicator="#series-search-loading"
          hx-trigger="submit, keyup changed delay:500ms from:#seriesSearchInput"
          class="join w-full mb-4">
        <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
            class="input input-bordered join-item flex-1"
        >
        <button type="submit" class="btn btn-primary join-item">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-[18px] h-[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 flex items-center gap-2 text-secondary py-2">
        <span class="loading loading-spinner loading-sm"></span> Recherche en cours...
    </div>

    <!-- Series search results -->
    <div id="seriesSearchResults" class="mb-10"></div>

    <div class="divider"></div>

    <!-- Latest Releases Section - Series only -->
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold">
            <i class="fa-solid fa-fire text-error"></i> Dernières sorties Séries TV
        </h2>
        <button class="btn btn-sm btn-ghost gap-1.5"
                hx-get="/api/series/latest?html=1"
                hx-target="#seriesReleasesList">
            <i class="fa-solid fa-arrows-rotate text-xs"></i> Actualiser
        </button>
    </div>
    <div id="seriesReleasesList" hx-get="/api/series/latest?html=1" hx-trigger="load delay:700ms"></div>
</div>

<!-- Watchlist Tab -->
<div id="tab-watchlist" x-show="activeTab === 'watchlist'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
{% include "components/watchlist_section.html" %}
</div>

<!-- Downloads Tab -->
<div id="tab-downloads" x-show="activeTab === 'downloads'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
{% include "components/downloads_section.html" %}
</div>

<!-- Settings Tab -->
<div id="tab-settings" x-show="activeTab === 'settings'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
    <div hx-get="/api/settings/ui" hx-trigger="set-tab[detail.tab === 'settings'] from:window, refresh-settings" hx-swap="innerHTML">
        <div class="flex items-center justify-center py-16">
            <span class="loading loading-spinner loading-lg text-primary"></span>
            <span class="ml-3 text-base-content/50">Chargement des paramètres...</span>
        </div>
    </div>
</div>

<!-- Admin Tab -->
<div id="tab-admin" x-show="activeTab === 'admin'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
    <div id="admin-panel-content" hx-get="/api/admin/ui" hx-trigger="set-tab[detail.tab === 'admin'] from:window" hx-swap="innerHTML">
        <div class="flex items-center justify-center py-16">
            <span class="loading loading-spinner loading-lg text-primary"></span>
            <span class="ml-3 text-base-content/50">Chargement du panel admin...</span>
        </div>
    </div>
</div>

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

{% endblock %}