{% 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>

    <div id="paginated-content">
    {% include "links/includes/collection_list_items.html" %}
    </div>
</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 %}