{% extends 'base.html' %}
{% load i18n %}
{% load static %}

{% block content %}
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-2 sm:py-8">
    <div class="flex justify-between items-center mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{% trans "Image Collections" %}</h1>
        <a href="{% url 'collection-create' %}"
           class="inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
            <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-1.5 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            {% trans "New Collection" %}
        </a>
    </div>

    <!-- 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" %}
</div>

{% block extra_js %}
<script>
// Add getCookie function
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

function deleteCollection(collectionId) {
    if (confirm('{% trans "Are you sure you want to delete this collection? All images in this collection will be deleted." %}')) {
        fetch(`/api/collections/${collectionId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            location.reload();
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Failed to delete collection');
        });
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const colors = [
        'bg-blue-50 hover:bg-blue-100 text-blue-700',
        'bg-green-50 hover:bg-green-100 text-green-700',
        'bg-yellow-50 hover:bg-yellow-100 text-yellow-700',
        'bg-red-50 hover:bg-red-100 text-red-700',
        'bg-indigo-50 hover:bg-indigo-100 text-indigo-700',
        'bg-purple-50 hover:bg-purple-100 text-purple-700',
        'bg-pink-50 hover:bg-pink-100 text-pink-700',
        'bg-cyan-50 hover:bg-cyan-100 text-cyan-700',
        'bg-orange-50 hover:bg-orange-100 text-orange-700',
        'bg-teal-50 hover:bg-teal-100 text-teal-700',
        'bg-lime-50 hover:bg-lime-100 text-lime-700',
        'bg-emerald-50 hover:bg-emerald-100 text-emerald-700',
        'bg-sky-50 hover:bg-sky-100 text-sky-700',
        'bg-violet-50 hover:bg-violet-100 text-violet-700',
        'bg-rose-50 hover:bg-rose-100 text-rose-700',
        'bg-amber-50 hover:bg-amber-100 text-amber-700'
    ];

    document.querySelectorAll('.tag-card').forEach(tag => {
        const randomColor = colors[Math.floor(Math.random() * colors.length)];
        tag.classList.add(...randomColor.split(' '));
    });
});
</script>
{% endblock %}
{% endblock %}