{% 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>

    <div id="paginated-content">
    {% include "links/includes/post_list_items.html" %}
    </div>
</div>
{% endblock %}
