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

{% if recommendations %}
<div class="flex gap-4 overflow-x-auto pb-4">
    {% for item in recommendations %}
        {% if item.get('content_type') == 'series' %}
            {{ series_card(item) }}
        {% else %}
            {{ anime_card(item) }}
        {% endif %}
    {% endfor %}
</div>
{% else %}
<div class="flex flex-col items-center justify-center py-12 text-base-content/40">
    <i class="fa-regular fa-face-meh text-3xl mb-2"></i>
    <p class="text-sm">Aucune recommandation pour le moment.</p>
</div>
{% endif %}