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

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-900">{% trans "Newsletters" %}</h1>
        <a href="{% url 'newsletter-create' %}" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
            {% trans "Add Newsletter" %}
        </a>
    </div>

    <!-- Filter Section -->
    <div class="bg-white shadow rounded-lg mb-6 p-4">
        <form method="get" class="space-y-4 sm:space-y-0 sm:flex sm:items-center sm:space-x-4">
            <div class="flex-1">
                <label for="type" class="block text-sm font-medium text-gray-700 mb-1">{% trans "Type" %}</label>
                <select name="type" id="type"
                        class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
                    <option value="">{% trans "All Types" %}</option>
                    {% for value, label in newsletter_types %}
                        <option value="{{ value }}" {% if selected_type == value %}selected{% endif %}>
                            {{ label }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <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="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
            </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="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
            </div>
            <!-- Filter Buttons -->
            <div class="flex justify-end items-end space-x-2">
                <button type="submit"
                        class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 h-10 inline-flex items-center">
                    {% trans "Filter" %}
                </button>
                {% if is_filtered %}
                    <a href="{% url 'newsletter-list' %}"
                       class="text-gray-600 hover:text-gray-800 px-4 py-2 rounded-md border border-gray-300 h-10 inline-flex items-center">
                        {% trans "Clear" %}
                    </a>
                {% endif %}
            </div>
        </form>
    </div>

    <!-- Newsletter List -->
    <div class="bg-white shadow overflow-hidden sm:rounded-md">
        <ul class="divide-y divide-gray-200">
            {% for newsletter in newsletters %}
            <li class="hover:bg-gray-50">
                <div class="px-4 py-4 sm:px-6">
                    <div class="flex items-center justify-between">
                        <div class="flex-1 min-w-0">
                            <a href="{% url 'newsletter-detail' newsletter.pk %}" class="text-lg font-medium text-blue-600 hover:text-blue-800">
                                {{ newsletter.title }}
                            </a>
                            <p class="mt-1 text-sm text-gray-500">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                    {% if newsletter.type == 'technology' %}bg-purple-100 text-purple-800
                                    {% elif newsletter.type == 'world_news' %}bg-green-100 text-green-800
                                    {% else %}bg-blue-100 text-blue-800{% endif %}">
                                    {{ newsletter.get_type_display }}
                                </span>
                            </p>
                        </div>
                        <div class="flex space-x-2">
                            <a href="{% url 'newsletter-detail' newsletter.pk %}"
                               class="p-1 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded"
                               title="{% trans 'View Details' %}">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                            </a>
                            <a href="{% url 'newsletter-update' newsletter.pk %}"
                               class="p-1 text-green-600 hover:text-green-800 hover:bg-green-50 rounded"
                               title="{% trans 'Edit' %}">
                                <svg class="w-5 h-5" 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>
                            </a>
                            <a href="{% url 'newsletter-delete' newsletter.pk %}"
                               class="p-1 text-red-600 hover:text-red-800 hover:bg-red-50 rounded"
                               title="{% trans 'Delete' %}">
                                <svg class="w-5 h-5" 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>
                            </a>
                        </div>
                    </div>
                    <div class="mt-2 text-sm text-gray-500">
                        {% trans "Updated" %}: {{ newsletter.updated_at|date:"Y-m-d H:i" }}
                    </div>
                </div>
            </li>
            {% empty %}
            <li class="px-4 py-4 text-center text-gray-500">
                {% trans "No newsletters found." %}
            </li>
            {% endfor %}
        </ul>
    </div>

    {% include "links/includes/pagination.html" %}
</div>
{% endblock %}