{% load i18n %}
{% load static %}

<div class="bg-white shadow overflow-hidden sm:rounded-md">
    <ul class="divide-y divide-gray-200">
        {% for page in pages %}
        <li class="p-4">
            <div class="flex space-x-4">
                <!-- Thumbnail Container -->
                <div class="hidden sm:block flex-shrink-0 w-48 h-48 rounded-lg overflow-hidden bg-gray-100 border border-gray-200">
                    <div class="w-full h-full flex items-center justify-center">
                        {% with latest_screenshot=page.screenshots.first %}
                            {% if latest_screenshot and latest_screenshot.path %}
                                <img src="{{ latest_screenshot.get_url }}"
                                     alt="Page thumbnail"
                                     class="w-full h-full object-cover"
                                     loading="lazy"
                                     onerror="this.onerror=null; this.src='{% static 'images/default-screenshot.png' %}'; this.classList.add('object-contain', 'p-4');">
                            {% else %}
                                <img src="{% static 'images/default-screenshot.png' %}"
                                     alt="Default thumbnail"
                                     class="w-3/4 h-3/4 object-contain">
                            {% endif %}
                        {% endwith %}
                    </div>
                </div>

                <!-- Content Container -->
                <div class="flex-1 min-w-0">
                    <div class="flex justify-between items-start">
                        <div class="flex-1 min-w-0 pr-4">
                            <a href="{{ page.get_absolute_url }}" class="text-lg font-medium text-blue-600 hover:text-blue-800">
                                {{ page.title|default:"Untitled" }}
                            </a>
                            <a href="{{ page.url }}" target="_blank" rel="noopener noreferrer"
                               class="block mt-1 text-sm text-gray-600 hover:text-gray-900 break-all">
                                {{ page.url }}
                            </a>
                        </div>
                        <div class="flex flex-col items-end space-y-2">
                            <!-- Status Badge -->
                            {% if page.process_status == 'completed' %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                    {% trans "Completed" %}
                                </span>
                            {% elif page.process_status == 'processing' %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                    {% trans "Processing" %}
                                </span>
                            {% elif page.process_status == 'failed' %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                    {% trans "Failed" %}
                                    {% if page.retry_count > 0 %}
                                        ({{ page.retry_count }}/3)
                                    {% endif %}
                                </span>
                            {% else %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                    {% trans "Pending" %}
                                </span>
                            {% endif %}

                            <!-- Action Buttons -->
                            <div class="flex space-x-2">
                                <a href="{% url 'page-update' page.pk %}"
                                   class="p-1 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded">
                                    <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 'page-delete' page.pk %}"
                                   class="p-1 text-red-600 hover:text-red-800 hover:bg-red-50 rounded">
                                    <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>

                    <!-- Summary -->
                    <div class="mt-2 flex-1">
                        <p class="text-gray-600 line-clamp-3">{{ page.summary }}</p>
                    </div>

                    <!-- Footer -->
                    <div class="mt-2 text-sm text-gray-500">
                        {% trans "Updated" %}: {{ page.updated_at|date:"Y-m-d H:i" }}
                    </div>
                </div>
            </div>
        </li>
        {% empty %}
        <li class="px-4 py-2 text-center text-gray-500">
            {% trans "No pages found." %}
        </li>
        {% endfor %}
    </ul>
</div>

{% if is_paginated %}
<div class="mt-4 flex justify-center">
    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}"
               hx-get="?page={{ page_obj.previous_page_number }}"
               hx-target="#paginated-content"
               hx-swap="innerHTML"
               hx-push-url="true"
               class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                {% trans "Previous" %}
            </a>
        {% endif %}

        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
            {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}"
               hx-get="?page={{ page_obj.next_page_number }}"
               hx-target="#paginated-content"
               hx-swap="innerHTML"
               hx-push-url="true"
               class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                {% trans "Next" %}
            </a>
        {% endif %}
    </nav>
</div>
{% endif %}