{% for manga in data %}
<div class="w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 text-gray-500 p-1 sm:p-2 mb-4 hover:text-white flex flex-col">
    <a href="{% url "detail:manga" manga.id %}">
        <div class="relative pt-[140%]">
            <img loading="lazy" src="{{ manga.coverImage.large }}" alt="{{ manga.title.english }}" class="absolute top-0 left-0 w-full h-full rounded-lg object-cover"/>
        </div>
        <div class="mt-2 flex flex-col gap-1">
            <span class="text-xs sm:text-sm font-bold flex gap-1 flex-row items-start">
                {% if manga.status == "Ongoing" %}
                    <span class="text-green-500 pt-1">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
                        <circle cx="12" cy="12" r="12" />
                    </svg>                
                    </span>
                {% elif manga.status == "Not yet aired" %}
                    <span class="text-yellow-500 pt-1">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
                        <circle cx="12" cy="12" r="12" />
                    </svg>
                    </span>
                {% else %}
                    <span class="text-blue-500 pt-1">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
                        <circle cx="12" cy="12" r="12" />
                    </svg>
                    </span>
                {% endif %}
                <span class="truncate max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
                    {% if user.preferences.title_language == "english" and manga.title.english %}
                    {{ manga.title.english }}
                    {% elif user.preferences.title_language == "native" and manga.title.native %}
                    {{ manga.title.native }}
                    {% else %}
                    {{ manga.title.romaji }}
                    {% endif %}
                </span>
            </span>
            <div class="inline-flex gap-1 sm:gap-2 flex-wrap">
                <span class="text-[10px] sm:text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
                    <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="size-3 sm:size-4">
                    <path d="M3.604 7.197l7.138 -3.109a.96 .96 0 0 1 1.27 .527l4.924 11.902a1 1 0 0 1 -.514 1.304l-7.137 3.109a.96 .96 0 0 1 -1.271 -.527l-4.924 -11.903a1 1 0 0 1 .514 -1.304z"></path>
                    <path d="M15 4h1a1 1 0 0 1 1 1v3.5"></path>
                    <path d="M20 6c.264 .112 .52 .217 .768 .315a1 1 0 0 1 .53 1.311l-2.298 5.374"></path>
                    </svg>
                    {% if manga.chapters %}
                    {{ manga.chapters }}
                    {% elif manga.volumes %}
                    {{ manga.volumes }}
                    {% else %}
                    {{ manga.format }}
                    {% endif %}
                </span>
                <span class="text-[10px] sm:text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3 sm:size-4">
                    <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z" clip-rule="evenodd" />
                    </svg>              
                    {{ manga.startDate.year }}
                </span>
                <span class="text-[10px] sm:text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3 sm:size-4">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>
                    </svg>
                    {{ manga.averageScore }}
                </span>
            </div>
        </div>
    </a>
</div>
{% endfor %}