<%- include('partials/header') %>
<%- include('partials/sidebar') %>

<main class="content-wrapper">
    <section id="section-search" class="section">
        <div class="hero-header">
            <h2>Recherche Globale</h2>
        </div>
        
        <div class="search-hero">
            <div class="search-input-wrapper">
                <i data-lucide="search" class="search-icon-inside"></i>
                <input type="text" id="search-input" placeholder="Titre du film, série...">
                <button id="btn-search-trigger" class="btn-search-action">Go</button>
            </div>
            <p style="font-size: 0.8rem; color: var(--text-sec); margin-top: 8px; text-align: center;">
                ⚠️ <i>Recherche stricte (Seulement pour la LocalDB) : Saisissez exactement le titre du film/série recherché.</i>
            </p>
            <div class="filter-pills" style="margin-top: 15px;" id="search-filters-container">
                <label class="pill">
                    <input type="radio" name="search-type" value="film" checked>
                    <span>Films</span>
                </label>
                <label class="pill">
                    <input type="radio" name="search-type" value="serie">
                    <span>Séries</span>
                </label>
                <label class="pill localdb-filter hidden">
                    <input type="radio" name="search-type" value="game">
                    <span>Jeux</span>
                </label>
                <label class="pill localdb-filter hidden">
                    <input type="radio" name="search-type" value="software">
                    <span>Logiciels</span>
                </label>
                <label class="pill localdb-filter hidden">
                    <input type="radio" name="search-type" value="book">
                    <span>Livres/BD</span>
                </label>
                <label class="pill localdb-filter hidden">
                    <input type="radio" name="search-type" value="music">
                    <span>Musique</span>
                </label>
                <label class="pill localdb-filter hidden">
                    <input type="radio" name="search-type" value="other">
                    <span>Autres</span>
                </label>
            </div>
        </div>

        <div id="search-results" class="media-grid"></div>
    </section>
</main>

<%- include('partials/footer') %>
