{% extends "console_page.html" %}

{% block console_content %}
<div class="pb-8">
<div class="gobii-card-base">
    <!-- Header -->
    <div class="px-6 py-4 border-b border-gray-200/70 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-semibold text-gray-800">Tasks</h1>
            <p class="text-sm text-gray-500 mt-1">View and manage your Gobii tasks.</p>
        </div>

        <div class="flex items-center gap-3">
            <!-- Search box -->
            <form method="get" class="relative">
                <input
                    type="text"
                    name="search"
                    placeholder="Search tasks..."
                    value="{{ request.GET.search|default:'' }}"
                    class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm w-full sm:w-64">
                <i aria-hidden="true" data-lucide="search" class="absolute left-3 top-2.5 h-5 w-5 text-gray-400"></i>
                <button type="submit" class="hidden">Search</button>
            </form>

            <!-- Status filter -->
            <div class="relative">
                <select
                    name="status"
                    id="status-filter"
                    onchange="this.form.submit()"
                    form="filter-form"
                    class="appearance-none pl-3 pr-10 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white">
                    <option value="">All Statuses</option>
                    <option value="pending" {% if request.GET.status == 'pending' %}selected{% endif %}>Pending</option>
                    <option value="in_progress" {% if request.GET.status == 'in_progress' %}selected{% endif %}>In Progress</option>
                    <option value="completed" {% if request.GET.status == 'completed' %}selected{% endif %}>Completed</option>
                    <option value="failed" {% if request.GET.status == 'failed' %}selected{% endif %}>Failed</option>
                    <option value="cancelled" {% if request.GET.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
                </select>
                <i aria-hidden="true" data-lucide="chevron-down" class="absolute right-3 top-3 h-4 w-4 text-gray-500 pointer-events-none"></i>
            </div>
            <form id="filter-form" method="get" class="hidden"></form>
        </div>
    </div>

    <!-- Table -->
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200/70">
            <thead class="bg-gray-50/50">
                <tr>
                    <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Task ID</th>
                    <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
                    <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prompt</th>
                    <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200/70">
                {% for task in tasks %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-3 md:px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">{{ task.id|truncatechars:8 }}</td>
                    <td class="px-3 md:px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ task.created_at|date:"M d, Y" }} <span class="text-xs text-gray-400">{{ task.created_at|time:"H:i" }}</span></td>
                    <td class="px-3 md:px-6 py-4 whitespace-nowrap">
                        {% if task.status == 'pending' %}
                        <span class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                            Pending
                        </span>
                        {% elif task.status == 'in_progress' %}
                        <span class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                            In Progress
                        </span>
                        {% elif task.status == 'completed' %}
                        <span class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            Completed
                        </span>
                        {% elif task.status == 'failed' %}
                        <span class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                            Failed
                        </span>
                        {% elif task.status == 'cancelled' %}
                        <span class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                            Cancelled
                        </span>
                        {% endif %}
                    </td>
                    <td class="px-3 md:px-6 py-4 text-sm text-gray-500 max-w-xs truncate">{{ task.prompt|truncatechars:100 }}</td>
                    <td class="px-3 md:px-6 py-4 whitespace-nowrap text-sm text-right">
                        <a href="{% url 'task_detail' task.id %}" class="text-blue-600 hover:text-blue-900 font-medium">
                            View Details
                        </a>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="5" class="px-6 py-10 text-center text-gray-500">
                        <i aria-hidden="true" data-lucide="clipboard-list" class="mx-auto h-12 w-12 text-gray-300"></i>
                        <p class="mt-2 text-sm">No tasks found</p>
                        <p class="mt-1 text-sm text-gray-400">Tasks you create will appear here</p>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    {% if tasks.has_other_pages %}
    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex items-center justify-between">
        <div class="flex-1 flex justify-between sm:hidden">
            {% if tasks.has_previous %}
            <a href="?page={{ tasks.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}"
               class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                Previous
            </a>
            {% endif %}
            {% if tasks.has_next %}
            <a href="?page={{ tasks.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}"
               class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                Next
            </a>
            {% endif %}
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div>
                <p class="text-sm text-gray-700">
                    Showing <span class="font-medium">{{ tasks.start_index }}</span> to <span class="font-medium">{{ tasks.end_index }}</span> of <span class="font-medium">{{ tasks.paginator.count }}</span> tasks
                </p>
            </div>
            <div>
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                    {% if tasks.has_previous %}
                    <a href="?page={{ tasks.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}"
                       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">
                        <span class="sr-only">Previous</span>
                        <i aria-hidden="true" data-lucide="chevron-left" class="h-5 w-5"></i>
                    </a>
                    {% endif %}

                    {% for i in tasks.paginator.page_range %}
                        {% if tasks.number == i %}
                        <span class="relative inline-flex items-center px-4 py-2 border border-blue-500 bg-blue-50 text-sm font-medium text-blue-600">
                            {{ i }}
                        </span>
                        {% elif i > tasks.number|add:'-3' and i < tasks.number|add:'3' %}
                        <a href="?page={{ i }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}"
                           class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            {{ i }}
                        </a>
                        {% endif %}
                    {% endfor %}

                    {% if tasks.has_next %}
                    <a href="?page={{ tasks.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}"
                       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">
                        <span class="sr-only">Next</span>
                        <i aria-hidden="true" data-lucide="chevron-right" class="h-5 w-5"></i>
                    </a>
                    {% endif %}
                </nav>
            </div>
        </div>
    </div>
    {% endif %}
</div>
</div>
{% endblock %}