{% extends "base.html" %}
{% load i18n %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">{% trans "Tags" %}</h1>
        <a href="{% url 'tag-create' %}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            {% trans "New Tag" %}
        </a>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
        {% for tag in tags %}
        <a href="{% url 'tag-detail' tag.slug %}" class="block group">
            <div class="bg-white shadow rounded-lg p-6 tag-card h-full transition-shadow duration-200 hover:shadow-lg">
                <h2 class="text-xl font-semibold mb-2 text-gray-900 group-hover:text-gray-700">
                    {{ tag.name }}
                </h2>
                {% if tag.description %}
                <p class="text-gray-600 mb-4 line-clamp-2">{{ tag.description }}</p>
                {% endif %}
                <div class="text-sm text-gray-500">
                    {% with link_count=tag.links.count %}
                    {{ link_count }} {% if link_count == 1 %}{% trans "link" %}{% else %}{% trans "links" %}{% endif %}
                    {% endwith %}
                </div>
            </div>
        </a>
        {% empty %}
        <div class="col-span-full text-center py-8 text-gray-500">
            {% trans "No tags found." %}
        </div>
        {% endfor %}
    </div>

    {% if is_paginated %}
    <div class="mt-8 flex justify-center">
        <nav class="inline-flex rounded-md shadow">
            {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                {% trans "Previous" %}
            </a>
            {% endif %}
            
            {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                {% trans "Next" %}
            </a>
            {% endif %}
        </nav>
    </div>
    {% endif %}
</div>

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

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