{% extends "base.html" %} {% block title %}Invocations — Rustvello Monitor{%
endblock %} {% block content %}
<div class="container-fluid">
  <div class="row">
    <div class="col-12 mb-2">
      <section class="list-filter-bar" aria-label="Invocation filters">
        <div class="monitor-filter-header">
          <button class="list-filter-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#invocation-filter-fields" aria-expanded="false" aria-controls="invocation-filter-fields">
            <span class="d-inline-flex align-items-center gap-2"><span class="material-icons" style="font-size:17px">tune</span><strong>Filters</strong></span>
            <span class="material-icons list-filter-chevron">expand_more</span>
          </button>
          {% include "components/filter_summary.html" %}
        </div>
        <div class="collapse" id="invocation-filter-fields">
          <form action="/invocations" method="get" class="list-filter-grid">
            <div class="mb-3">
              <label for="status-select" class="form-label">Status</label>
              <input type="hidden" name="status" id="status-hidden" value="" />
              <select id="status-select" class="form-select" multiple size="6">
                {% for s in all_statuses %}
                <option
                  value="{{ s }}"
                  {%
                  if
                  current_filters.statuses.contains(s)
                  %}
                  selected{%
                  endif
                  %}
                >
                  {{ s }}
                </option>
                {% endfor %}
              </select>
              <small class="text-muted">Hold Ctrl/Cmd to select multiple</small>
            </div>
            <div class="mb-3">
              <label for="status-mode" class="form-label">Status meaning</label>
              <select id="status-mode" name="status_mode" class="form-select">
                <option value="current" {% if current_filters.status_mode == "current" %}selected{% endif %}>Current status</option>
                <option value="history" {% if current_filters.status_mode == "history" %}selected{% endif %}>Any history status</option>
              </select>
            </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 tid in all_task_ids %}
                <option
                  value="{{ tid }}"
                  {% if *tid == current_filters.task_id %}
                  selected{%
                  endif
                  %}
                >
                  {{ tid }}
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="mb-3">
              <label for="workflow_type" class="form-label"
                >Workflow Type</label
              >
              <select
                name="workflow_type"
                id="workflow_type"
                class="form-select"
              >
                <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="mb-3">
              <label for="workflow_id" class="form-label">Workflow ID</label>
              <input
                type="text"
                class="form-control"
                id="workflow_id"
                name="workflow_id"
                value="{{ current_filters.workflow_id }}"
                placeholder="Partial or full ID"
              />
            </div>
            <div class="mb-3">
              <label for="limit" class="form-label">Limit</label>
              <select
                class="form-select"
                id="limit"
                name="limit"
              ><option value="25" {% if current_filters.limit == 25 %}selected{% endif %}>25</option><option value="50" {% if current_filters.limit == 50 %}selected{% endif %}>50</option><option value="100" {% if current_filters.limit == 100 %}selected{% endif %}>100</option><option value="200" {% if current_filters.limit == 200 %}selected{% endif %}>200</option></select>
            </div>
            <div class="mb-3">
              <label for="start_date" class="form-label">From (UTC)</label>
              <input type="text" class="form-control" id="start_date" name="start_date" value="{{ current_filters.start_date }}" placeholder="ISO timestamp" />
            </div>
            <div class="mb-3">
              <label for="end_date" class="form-label">To (UTC)</label>
              <input type="text" class="form-control" id="end_date" name="end_date" value="{{ current_filters.end_date }}" placeholder="ISO timestamp" />
              <input type="hidden" name="time_range" value="{% if !current_filters.start_date.is_empty() && !current_filters.end_date.is_empty() %}custom{% endif %}" />
              {% if !current_filters.inv_ids.is_empty() %}<input type="hidden" name="inv_ids" value="{{ current_filters.inv_ids }}" />{% endif %}
            </div>
            <button type="submit" class="btn btn-primary monitor-filter-submit">
              Apply Filters
            </button>
          </form>
        </div>
      </section>
    </div>

    <!-- Main Content -->
    <div class="col-12">
      <div class="card pynmon-card">
        <div
          class="card-header pynmon-card-header d-flex justify-content-between align-items-center"
        >
          <span class="compact-header">
            <span
              class="material-icons align-middle me-1"
              style="font-size: 20px"
              >list_alt</span
            >
            Invocations
          </span>
          <div class="d-flex gap-2 align-items-center">
            <a
              href="{{ timeline_url }}"
              class="btn btn-sm btn-outline-success invocation-list-timeline-link"
            >
              <span class="material-icons align-middle" style="font-size: 16px"
                >timeline</span
              >
              Timeline
            </a>
          </div>
        </div>
        <div class="card-body pynmon-card-body p-0">
          {% if !invocations.is_empty() %}
          {% include "components/invocation_table.html" %}

          {% include "components/pagination.html" %}
          {% else %}
          <div class="alert alert-info m-3 mb-0">
            No invocations found matching the filters.
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Sync multi-select with hidden input on form submit
    var statusSelect = document.getElementById("status-select");
    var statusHidden = document.getElementById("status-hidden");
    if (statusSelect && statusHidden) {
      statusSelect.closest("form").addEventListener("submit", function () {
        var selected = Array.from(statusSelect.selectedOptions).map(
          function (o) {
            return o.value;
          },
        );
        statusHidden.value = selected.join(",");
      });
    }

  });
</script>
{% endblock %}