{% extends "base.html" %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <!-- Filters Sidebar -->
        <div class="col-md-3">
            <div class="card filter-form">
                <div class="card-header">Filters</div>
                <div class="card-body">
                    <form action="/invocations" method="get">
                        <div class="mb-3">
                            <label for="status" class="form-label">Status</label>
                            <select name="status" id="status" class="form-select status-select" multiple>
                                {% for status in all_statuses %}
                                <option value="{{ status }}" {% if status in current_filters.status %}selected{% endif %}>
                                    {{ status|upper }}
                                </option>
                                {% endfor %}
                            </select>
                            <div class="form-text">Hold Ctrl to select multiple</div>
                        </div>
                        <div class="mb-3">
                            <label for="task_id" class="form-label">Task ID</label>
                            <select name="task_id" id="task_id" class="form-select">
                                <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="mb-3">
                            <label for="limit" class="form-label">Limit</label>
                            <input type="number" class="form-control" id="limit" name="limit"
                                value="{{ current_filters.limit }}">
                        </div>
                        <button type="submit" class="btn btn-primary w-100">Apply Filters</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-md-9">
            <div class="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="outerHTML">
                        <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">
                        {% if invocations %}
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th style="width: 25%">Invocation ID</th>
                                        <th style="width: 20%">Task</th>
                                        <th style="width: 25%">Call ID</th>
                                        <th style="width: 10%">Status</th>
                                        <th style="width: 8%">Retries</th>
                                        <th style="width: 12%">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for invocation in invocations %}
                                    <tr>
                                        <td>
                                            <a href="/invocations/{{ invocation.invocation_id }}" class="text-decoration-none">
                                                <code class="text-primary">{{ invocation.invocation_id }}</code>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="/tasks/{{ invocation.task.task_id }}" class="text-decoration-none">
                                                {{ invocation.task.task_id.split('.')[-1] }}
                                            </a>
                                        </td>
                                        <td>
                                            <a href="/calls/?call_id={{ invocation.call_id|urlencode }}" class="text-decoration-none">
                                                <code class="text-secondary">{{ invocation.call_id }}</code>
                                            </a>
                                        </td>
                                        <td>
                                            <span class="badge
                                                {% if invocation.status.name == 'SUCCESS' %}bg-success
                                                {% elif invocation.status.name == 'FAILED' %}bg-danger
                                                {% elif invocation.status.name == 'RUNNING' %}bg-primary
                                                {% elif invocation.status.name == 'PENDING' %}bg-warning
                                                {% elif invocation.status.name == 'PAUSED' %}bg-info
                                                {% elif invocation.status.name == 'RETRY' %}bg-secondary
                                                {% elif invocation.status.name == 'REGISTERED' %}bg-secondary
                                                {% elif invocation.status.name == 'REROUTED' %}bg-info
                                                {% elif invocation.status.name == 'SCHEDULED' %}bg-warning text-dark
                                                {% else %}bg-dark{% endif %}">
                                                {{ invocation.status.name }}
                                            </span>
                                        </td>
                                        <td>{{ invocation.num_retries }}</td>
                                        <td>
                                            <a href="/invocations/{{ invocation.invocation_id }}"
                                               class="btn btn-sm btn-outline-primary">Details</a>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        {% else %}
                        <div class="alert alert-info m-3">No invocations found matching the filters.</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}