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

{% block content %}
<div class="container mx-auto px-2 py-8">
    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
        <!-- Tag Header -->
        <div class="bg-gradient-to-r from-blue-500 to-indigo-600 p-6 text-white">
            <div class="flex justify-between items-start">
                <div>
                    <h1 class="text-3xl font-bold mb-2">{{ tag.name }}</h1>
                    {% if tag.description %}
                    <p class="text-white text-opacity-90 mb-2">{{ tag.description }}</p>
                    {% endif %}
                    <div class="inline-flex items-center bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">
                        <span class="font-medium">{% trans "Used" %}: {{ total_usage_count }} {% trans "times" %}</span>
                    </div>
                </div>
                <div class="flex space-x-2">
                    <a href="{% url 'tag-update' tag.slug %}" class="bg-white text-blue-600 hover:bg-blue-50 font-medium py-2 px-2 rounded-lg transition duration-150 ease-in-out">
                        {% trans "Edit" %}
                    </a>
                    <a href="{% url 'tag-delete' tag.slug %}" class="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-2 rounded-lg transition duration-150 ease-in-out">
                        {% trans "Delete" %}
                    </a>
                </div>
            </div>
        </div>

        <!-- Resource Tabs -->
        <div class="border-b border-gray-200">
            <nav class="flex -mb-px overflow-x-auto" aria-label="Tabs">
                <button class="resource-tab text-blue-600 border-blue-500 whitespace-nowrap py-2 px-6 border-b-2 font-medium text-sm" data-target="links-section">
                    {% trans "Links" %} ({{ links|length }})
                </button>
                <button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-6 border-b-2 border-transparent font-medium text-sm" data-target="posts-section">
                    {% trans "Posts" %} ({{ posts|length }})
                </button>
                <button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-6 border-b-2 border-transparent font-medium text-sm" data-target="pages-section">
                    {% trans "Pages" %} ({{ pages|length }})
                </button>
                <button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-6 border-b-2 border-transparent font-medium text-sm" data-target="collections-section">
                    {% trans "Image Collections" %} ({{ image_collections|length }})
                </button>
            </nav>
        </div>

        <!-- Resource Sections -->
        <div class="p-6">
            <!-- Links Section -->
            <div id="links-section" class="resource-section">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    {% trans "Links with this tag" %}
                    <span class="ml-2 bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">{{ links|length }}</span>
                </h2>
                {% if links %}
                <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    {% for link in links %}
                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition duration-150 ease-in-out">
                        <h3 class="font-medium text-lg">
                            <a href="{% url 'link_detail' pk=link.pk %}" class="text-blue-600 hover:text-blue-800">
                                {{ link.alias }}
                            </a>
                        </h3>
                        {% if link.description %}
                        <p class="text-gray-600 mt-1 line-clamp-2">{{ link.description }}</p>
                        {% endif %}
                        <div class="mt-2 text-sm text-gray-500 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                            {{ link.created_at|date:"Y-m-d" }}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="bg-gray-50 rounded-lg p-6 text-center">
                    <p class="text-gray-500">{% trans "No links found with this tag." %}</p>
                </div>
                {% endif %}
            </div>

            <!-- Posts Section -->
            <div id="posts-section" class="resource-section hidden">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    {% trans "Posts with this tag" %}
                    <span class="ml-2 bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">{{ posts|length }}</span>
                </h2>
                {% if posts %}
                <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    {% for post in posts %}
                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition duration-150 ease-in-out">
                        <h3 class="font-medium text-lg">
                            <a href="{% url 'post-detail' pk=post.pk %}" class="text-blue-600 hover:text-blue-800">
                                {{ post.title }}
                            </a>
                        </h3>
                        {% if post.summary %}
                        <p class="text-gray-600 mt-1 line-clamp-2">{{ post.summary }}</p>
                        {% endif %}
                        <div class="mt-2 text-sm text-gray-500 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                            {{ post.created_at|date:"Y-m-d" }}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="bg-gray-50 rounded-lg p-6 text-center">
                    <p class="text-gray-500">{% trans "No posts found with this tag." %}</p>
                </div>
                {% endif %}
            </div>

            <!-- Pages Section -->
            <div id="pages-section" class="resource-section hidden">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    {% trans "Pages with this tag" %}
                    <span class="ml-2 bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded-full">{{ pages|length }}</span>
                </h2>
                {% if pages %}
                <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    {% for page in pages %}
                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition duration-150 ease-in-out">
                        <h3 class="font-medium text-lg">
                            <a href="{% url 'page-detail' pk=page.pk %}" class="text-blue-600 hover:text-blue-800">
                                {{ page.title|default:page.url }}
                            </a>
                        </h3>
                        {% if page.summary %}
                        <p class="text-gray-600 mt-1 line-clamp-2">{{ page.summary }}</p>
                        {% endif %}
                        <div class="mt-2 text-sm text-gray-500 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                            {{ page.created_at|date:"Y-m-d" }}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="bg-gray-50 rounded-lg p-6 text-center">
                    <p class="text-gray-500">{% trans "No pages found with this tag." %}</p>
                </div>
                {% endif %}
            </div>

            <!-- Image Collections Section -->
            <div id="collections-section" class="resource-section hidden">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    {% trans "Image Collections with this tag" %}
                    <span class="ml-2 bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded-full">{{ image_collections|length }}</span>
                </h2>
                {% if image_collections %}
                <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    {% for collection in image_collections %}
                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition duration-150 ease-in-out">
                        <h3 class="font-medium text-lg">
                            <a href="{% url 'collection-detail' pk=collection.pk %}" class="text-blue-600 hover:text-blue-800">
                                {{ collection.name }}
                            </a>
                        </h3>
                        {% if collection.description %}
                        <p class="text-gray-600 mt-1 line-clamp-2">{{ collection.description }}</p>
                        {% endif %}
                        <div class="mt-2 text-sm text-gray-500 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                            {{ collection.created_at|date:"Y-m-d" }}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="bg-gray-50 rounded-lg p-6 text-center">
                    <p class="text-gray-500">{% trans "No image collections found with this tag." %}</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- JavaScript for tab functionality -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const tabs = document.querySelectorAll('.resource-tab');
        const sections = document.querySelectorAll('.resource-section');

        tabs.forEach(tab => {
            tab.addEventListener('click', function() {
                // Hide all sections
                sections.forEach(section => {
                    section.classList.add('hidden');
                });

                // Show the selected section
                const targetId = this.getAttribute('data-target');
                document.getElementById(targetId).classList.remove('hidden');

                // Update tab styles
                tabs.forEach(t => {
                    t.classList.remove('text-blue-600', 'border-blue-500');
                    t.classList.add('text-gray-500', 'border-transparent');
                });

                this.classList.remove('text-gray-500', 'border-transparent');
                this.classList.add('text-blue-600', 'border-blue-500');
            });
        });
    });
</script>
{% endblock %}