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

{% block content %}
<div class="w-full px-2 py-2 sm:py-8 sm:px-6 lg:px-8 max-w-7xl mx-auto">
    <!-- Header Section -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{% trans "Posts" %}</h1>
        <a href="{% url 'post-create' %}"
           class="w-full sm:w-auto text-center bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-150">
            {% trans "Add Post" %}
        </a>
    </div>

    <!-- Filter Section -->
    <div class="bg-white shadow rounded-lg mb-6 p-2">
        <form method="get" class="flex flex-col gap-4 sm:flex-row sm:items-end">
            <div class="flex-1">
                <label for="date_from" class="block text-sm font-medium text-gray-700 mb-1">{% trans "From Date" %}</label>
                <input type="date" name="date_from" id="date_from"
                       value="{{ date_from|date:'Y-m-d' }}"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            </div>
            <div class="flex-1">
                <label for="date_to" class="block text-sm font-medium text-gray-700 mb-1">{% trans "To Date" %}</label>
                <input type="date" name="date_to" id="date_to"
                       value="{{ date_to|date:'Y-m-d' }}"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            </div>
            <div class="flex gap-2">
                <button type="submit"
                        class="flex-1 sm:flex-none bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-150">
                    {% trans "Filter" %}
                </button>
                {% if is_filtered %}
                    <a href="{% url 'post-list' %}"
                       class="flex-1 sm:flex-none text-center text-gray-600 hover:text-gray-800 px-4 py-2 rounded-md border border-gray-300 hover:bg-gray-50 transition duration-150">
                        {% trans "Clear" %}
                    </a>
                {% endif %}
            </div>
        </form>
    </div>

    <!-- 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" %}
</div>
{% endblock %}