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

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

    <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">
            {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}" 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 }}" 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 %}
</div>
{% endblock %}