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

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="bg-white shadow rounded-lg p-6">
        <div class="flex justify-between items-start mb-6">
            <div>
                <h1 class="text-2xl font-bold mb-2">{{ tag.name }}</h1>
                {% if tag.description %}
                <p class="text-gray-600">{{ tag.description }}</p>
                {% endif %}
            </div>
            <div class="flex space-x-2">
                <a href="{% url 'tag-update' tag.slug %}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    {% trans "Edit" %}
                </a>
                <a href="{% url 'tag-delete' tag.slug %}" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
                    {% trans "Delete" %}
                </a>
            </div>
        </div>

        <div class="mt-8">
            <h2 class="text-xl font-semibold mb-4">{% trans "Links with this tag" %}</h2>
            {% if links %}
            <div class="space-y-4">
                {% for link in links %}
                <div class="border rounded-lg p-4">
                    <h3 class="font-medium">
                        <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">{{ link.description }}</p>
                    {% endif %}
                    <div class="mt-2 text-sm text-gray-500">
                        {% trans "Created" %}: {{ link.created_at|date:"Y-m-d" }}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-gray-500 text-center py-4">{% trans "No links found with this tag." %}</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}