{% load i18n %}

<!-- Collections Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 md:gap-8">
    {% for collection in collections %}
        <div class="group relative w-full">
            <!-- Fixed size container -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-all duration-200 h-[280px] sm:h-[320px]">
                <a href="{% url 'collection-detail' collection.pk %}" class="block h-full">
                    <div class="flex flex-col h-full">
                        <!-- Image Preview Container - Fixed Height -->
                        <div class="h-[160px] sm:h-[200px] bg-gradient-to-br from-gray-50 to-gray-100 p-2 sm:p-3">
                            <div class="grid grid-cols-2 gap-1.5 sm:gap-2 h-full">
                                {% with images=collection.images.all|slice:":4" %}
                                    {% for image in images %}
                                        <div class="aspect-w-1 aspect-h-1 overflow-hidden rounded-lg bg-gray-200 shadow-sm
                                                    {% if forloop.counter > 2 %}hidden sm:block{% endif %}">
                                            <img src="{{ image.get_thumbnail_url }}"
                                                 alt="{{ image.title }}"
                                                 class="object-cover w-full h-full">
                                        </div>
                                    {% empty %}
                                        <div class="col-span-2 flex flex-col items-center justify-center h-full bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg border-2 border-dashed border-gray-200">
                                            <svg class="w-8 h-8 sm:w-12 sm:h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                            </svg>
                                            <p class="mt-1 sm:mt-2 text-xs sm:text-sm text-gray-500">{% trans "No images yet" %}</p>
                                        </div>
                                    {% endfor %}
                                {% endwith %}
                            </div>
                        </div>

                        <!-- Collection Info - Flex Grow to Fill Remaining Space -->
                        <div class="flex-1 p-3 sm:p-4 flex flex-col">
                            <div class="flex-1">
                                <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ collection.name }}</h3>
                                {% if collection.description %}
                                    <p class="text-sm text-gray-600 mb-4">{{ collection.description }}</p>
                                {% endif %}

                                <!-- Image Count -->
                                <p class="mt-0.5 text-xs sm:text-sm text-gray-500">
                                    {{ collection.images.count }} {% trans "images" %}
                                </p>
                            </div>
                        </div>
                    </div>
                </a>

                <!-- Action Buttons -->
                <div class="absolute top-1.5 sm:top-2 right-1.5 sm:right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                    <a href="{% url 'collection-update' collection.pk %}"
                       class="p-1 sm:p-1.5 bg-white text-gray-600 hover:text-blue-600 rounded-full hover:bg-blue-50 shadow-sm transition-colors duration-200"
                       title="{% trans 'Edit Collection' %}">
                        <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                        </svg>
                    </a>
                    <button onclick="deleteCollection('{{ collection.pk }}'); event.preventDefault();"
                            class="p-1 sm:p-1.5 bg-white text-gray-600 hover:text-red-600 rounded-full hover:bg-red-50 shadow-sm transition-colors duration-200"
                            title="{% trans 'Delete Collection' %}">
                        <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    {% empty %}
        <div class="col-span-full flex flex-col items-center justify-center py-12 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg border-2 border-dashed border-gray-300">
            <svg class="w-16 h-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
            <h3 class="mt-4 text-lg font-medium text-gray-900">{% trans "No collections" %}</h3>
            <p class="mt-2 text-base text-gray-500">{% trans "Get started by creating a new collection." %}</p>
            <a href="{% url 'collection-create' %}"
               class="mt-6 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
                {% trans "Create Collection" %}
            </a>
        </div>
    {% endfor %}
</div>

{% include "links/includes/pagination.html" %}