{% from "components/series_card.html" import series_card %}

<div class="search-results-container">
    {% if results %}
        {% for provider_id, items in results.items() %}
            <div class="provider-section">
                <h3 class="provider-title">{{ provider_id | upper }}</h3>
                <div class="anime-grid">
                    {% for series in items %}
                        {{ series_card(series) }}
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="no-results">
            <i class="fas fa-search"></i>
            <p>Aucune série TV trouvée pour votre recherche.</p>
        </div>
    {% endif %}
</div>

<style>
.provider-section { margin-bottom: 40px; }
.provider-title { 
    color: var(--secondary);
    margin-bottom: 20px;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.no-results {
    text-align: center;
    padding: 100px 20px;
    color: var(--text-dim);
}
.no-results i { font-size: 4rem; margin-bottom: 20px; display: block; opacity: 0.2; }
</style>