{% extends "base.html" %}

{% block content %}
<div class="pynmon-container">
    <div class="card pynmon-card pynmon-filter-bar mb-3">
        <div class="pynmon-filter-summary">
            {% if current_filters.status %}<span class="chip"><strong>status:</strong>{{ current_filters.status|join(', ') }}</span>{% endif %}
            {% if current_filters.task_id %}<span class="chip"><strong>task:</strong>{{ current_filters.task_id }}</span>{% endif %}
            {% if current_filters.workflow_type %}<span class="chip"><strong>workflow:</strong>{{ current_filters.workflow_type }}</span>{% endif %}
            {% if current_filters.workflow_id %}<span class="chip"><strong>workflow id:</strong>{{ current_filters.workflow_id }}</span>{% endif %}
            <span class="chip"><strong>page size:</strong>{{ pagination.limit }}</span>
            <span class="chip"><strong>{{ pagination.total_count }}</strong> invocations &middot; page {{ pagination.page }} / {{ pagination.total_pages }}</span>
            <button class="expand-btn" type="button">Edit filters</button>
        </div>
        <div class="card-header pynmon-card-header compact-header pynmon-filter-heading">
            Filters
        </div>
        <div class="card-body pynmon-card-body pynmon-filter-controls">
            <form action="/invocations" method="get" class="row g-2 align-items-end">
                <div class="col-lg-2 col-md-4">
                    <label for="status" class="form-label small mb-1">Status</label>
                    <select name="status" id="status" class="form-select form-select-sm status-select" multiple size="2">
                        {% for status in all_statuses %}
                        <option value="{{ status }}" {% if status in current_filters.status %}selected{% endif %}>
                            {{ status|upper }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-lg-3 col-md-4">
                    <label for="task_id" class="form-label small mb-1">Task ID</label>
                    <select name="task_id" id="task_id" class="form-select form-select-sm">
                        <option value="">All Tasks</option>
                        {% for task_id in all_task_ids %}
                        <option value="{{ task_id }}" {% if task_id == current_filters.task_id %}selected{% endif %}>
                            {{ task_id }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-lg-2 col-md-4">
                    <label for="workflow_type" class="form-label small mb-1">Workflow Type</label>
                    <select name="workflow_type" id="workflow_type" class="form-select form-select-sm">
                        <option value="">All Workflow Types</option>
                        {% for wt in all_workflow_types %}
                        <option value="{{ wt }}" {% if wt == current_filters.workflow_type %}selected{% endif %}>
                            {{ wt }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-lg-2 col-md-4">
                    <label for="workflow_id" class="form-label small mb-1">Workflow ID</label>
                    <input type="text" class="form-control form-control-sm" id="workflow_id" name="workflow_id"
                        value="{{ current_filters.workflow_id }}" placeholder="Partial or full ID">
                </div>
                <div class="col-lg-1 col-md-2">
                    <label for="limit" class="form-label small mb-1">Page size</label>
                    <input type="number" class="form-control form-control-sm" id="limit" name="limit"
                        min="1" max="1000" value="{{ current_filters.limit }}">
                </div>
                <div class="col-lg-1 col-md-2">
                    <button type="submit" class="btn btn-sm btn-primary w-100">Filter</button>
                </div>
            </form>
        </div>
    </div>

            <div class="card pynmon-card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>Invocations</span>
                    <button class="btn btn-sm btn-outline-primary"
                            hx-get="/invocations/table?{{ request.query_string.decode() }}"
                            hx-target="#invocations-table"
                            hx-swap="innerHTML"
                            hx-indicator="#invocations-table">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
                        </svg>
                        Refresh
                    </button>
                </div>
                <div class="card-body p-0">
                    <div id="invocations-table">
                        <!-- HTMX loading indicator -->
                        <div class="pynmon-inline-spinner htmx-indicator">
                          <div class="spinner-border" role="status"><span class="visually-hidden">Loading…</span></div>
                          <span>Loading invocations…</span>
                        </div>
                        {% include "invocations/partials/table.html" %}

                        <!-- Pagination Controls -->
                        {% if pagination and pagination.total_pages > 1 %}
                        <nav aria-label="Invocations pagination" class="d-flex justify-content-between align-items-center p-3 border-top">
                            <div class="text-muted small">
                                Showing {{ invocations|length }} of {{ pagination.total_count }} invocations
                                (Page {{ pagination.page }} of {{ pagination.total_pages }})
                            </div>
                            <ul class="pagination pagination-sm mb-0">
                                <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
                                    <a class="page-link" href="?status={{ current_filters.status[0] if current_filters.status else '' }}&task_id={{ current_filters.task_id }}&workflow_id={{ current_filters.workflow_id }}&workflow_type={{ current_filters.workflow_type }}&limit={{ pagination.limit }}&page=1">First</a>
                                </li>
                                <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
                                    <a class="page-link" href="?status={{ current_filters.status[0] if current_filters.status else '' }}&task_id={{ current_filters.task_id }}&workflow_id={{ current_filters.workflow_id }}&workflow_type={{ current_filters.workflow_type }}&limit={{ pagination.limit }}&page={{ pagination.page - 1 }}">Previous</a>
                                </li>
                                <li class="page-item active">
                                    <span class="page-link">{{ pagination.page }}</span>
                                </li>
                                <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
                                    <a class="page-link" href="?status={{ current_filters.status[0] if current_filters.status else '' }}&task_id={{ current_filters.task_id }}&workflow_id={{ current_filters.workflow_id }}&workflow_type={{ current_filters.workflow_type }}&limit={{ pagination.limit }}&page={{ pagination.page + 1 }}">Next</a>
                                </li>
                                <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
                                    <a class="page-link" href="?status={{ current_filters.status[0] if current_filters.status else '' }}&task_id={{ current_filters.task_id }}&workflow_id={{ current_filters.workflow_id }}&workflow_type={{ current_filters.workflow_type }}&limit={{ pagination.limit }}&page={{ pagination.total_pages }}">Last</a>
                                </li>
                            </ul>
                        </nav>
                        {% endif %}
                    </div>
                </div>
            </div>
</div>
{% endblock %}

{% block extra_js %}
{% include "invocations/partials/timeline_zoom_scripts.html" %}
{% endblock %}