{% from "components/anime_card.html" import anime_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 anime in items %}
                        {{ anime_card(anime) }}
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="no-results">
            <i class="fas fa-search"></i>
            <p>Aucun résultat trouvé pour votre recherche.</p>
        </div>
    {% endif %}
</div>

<style>
.provider-section { margin-bottom: 30px; }
.provider-title { 
    border-bottom: 2px solid #00d9ff; 
    padding-bottom: 5px; 
    margin-bottom: 15px;
    font-size: 1.2rem;
}
.anime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}
.no-results {
    text-align: center;
    padding: 50px;
    color: #aaa;
}
.no-results i { font-size: 3rem; margin-bottom: 10px; display: block; }
</style>