{% load i18n %}

<!-- Post List -->
<div class="bg-white shadow rounded-lg overflow-hidden">
    <ul class="divide-y divide-gray-200">
        {% for post in posts %}
        <li class="hover:bg-gray-50 transition duration-150">
            <div class="p-4">
                <div class="space-y-3">
                    <!-- Post Title and Summary -->
                    <div>
                        <h2 class="text-lg font-medium text-gray-900">
                            <a href="{% url 'post-detail' post.id %}" class="hover:text-blue-600 hover:underline">
                                {{ post.title }}
                            </a>
                        </h2>
                        {% if post.summary %}
                        <p class="mt-1 text-sm text-gray-600 line-clamp-2">
                            {{ post.summary }}
                        </p>
                        {% endif %}
                    </div>

                    <!-- Tags -->
                    {% if post.tags.exists %}
                    <div class="flex flex-wrap gap-2 mt-2">
                        {% for tag in post.tags.all %}
                        {% with number=forloop.counter %}
                        <a href="{% url 'tag-detail' tag.slug %}"
                           class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium transition duration-150 {% if number|divisibleby:10 %}tag-10{% elif number|divisibleby:9 %}tag-9{% elif number|divisibleby:8 %}tag-8{% elif number|divisibleby:7 %}tag-7{% elif number|divisibleby:6 %}tag-6{% elif number|divisibleby:5 %}tag-5{% elif number|divisibleby:4 %}tag-4{% elif number|divisibleby:3 %}tag-3{% elif number|divisibleby:2 %}tag-2{% else %}tag-1{% endif %}">
                            {{ tag.name }}
                        </a>
                        {% endwith %}
                        {% endfor %}
                    </div>
                    {% endif %}

                    <!-- Timestamps and Actions -->
                    <div class="mt-4 flex flex-col sm:flex-row sm:items-center sm:justify-between border-t border-gray-100 pt-3">
                        <div class="flex items-center gap-4 text-xs text-gray-500">
                            <div class="flex items-center">
                                <svg class="w-3.5 h-3.5 mr-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <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>
                                {% trans "Created" %}: {{ post.created_at|date:"Y-m-d H:i" }}
                            </div>
                            <div class="flex items-center">
                                <svg class="w-3.5 h-3.5 mr-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                </svg>
                                {% trans "Updated" %}: {{ post.updated_at|date:"Y-m-d H:i" }}
                            </div>
                        </div>
                        <div class="flex items-center gap-2 mt-3 sm:mt-0">
                            <a href="{% url 'post-update' post.pk %}" class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium text-green-700 bg-green-50 rounded-md hover:bg-green-100 transition duration-150">
                                <svg class="w-4 h-4 mr-1" 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>
                                {% trans "Edit" %}
                            </a>
                            <a href="{% url 'post-delete' post.pk %}" class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium text-red-700 bg-red-50 rounded-md hover:bg-red-100 transition duration-150">
                                <svg class="w-4 h-4 mr-1" 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>
                                {% trans "Delete" %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        {% empty %}
        <li class="px-4 py-8 text-center text-gray-500">
            {% trans "No post found." %}
        </li>
        {% endfor %}
    </ul>
</div>

{% include "links/includes/pagination.html" %}