{% extends "base.html" %}
{% block title %}Workflow: {{ workflow_type }} - Rustvello Monitor{% endblock %}
{% block content %}
<div class="container-fluid workflow-detail-page" data-workflow-comparison>
  <header class="workflow-heading">
    <div><a href="/workflows" class="small text-secondary">Workflows</a><h2 class="h4 text-primary">{{ workflow_type }}</h2></div>
    <a href="/tasks/{{ workflow_task_id }}" class="btn btn-sm btn-outline-secondary">Task details</a>
  </header>
  <section aria-label="Workflow Details" class="workflow-summary">
    <span><strong>{{ total_runs }}</strong> recorded runs</span>
    <span><strong>{{ workflow_histograms.len() }}</strong> selected</span>
    <span title="Shared occupancy and elapsed-time axes">Elapsed time &middot; shared task and worker scales</span>
  </section>
  <form method="get" id="workflow-selection-form">
    <input type="hidden" name="histogram_workflow" id="workflow-selection-input" value="{{ selected_workflow_ids }}">
    <input type="hidden" name="histogram_status" value="{{ histogram_status }}">
    <input type="hidden" name="limit" value="{{ limit }}">
    <div class="workflow-toolbar">
      <h3 id="workflow-runs-title" class="h6 mb-0">Workflow Runs</h3>
      <label class="small">Per page <select data-workflow-page-size aria-label="Runs per page">{% for size in [10, 25, 50, 100] %}<option value="{{ size }}"{% if limit == *size %} selected{% endif %}>{{ size }}</option>{% endfor %}</select></label>
      <button type="button" class="btn btn-sm btn-outline-secondary" data-workflow-clear>Clear selection</button>
      <button type="button" class="btn btn-sm btn-outline-secondary" data-workflow-refresh title="Refresh runs" aria-label="Refresh runs"><span class="material-icons">refresh</span></button>
      <span class="small text-danger" data-workflow-error role="status"></span>
    </div>
    <div class="table-responsive workflow-run-list">
      <table class="table table-hover pynmon-table mb-0" aria-labelledby="workflow-runs-title"><thead><tr><th>Run ID (Main Invocation ID)</th><th>Started</th><th>Root duration</th><th>Tasks</th><th>Actions</th></tr></thead><tbody>
      {% for run in runs %}
        <tr class="workflow-run-row{% if run.histogram_selected %} table-primary{% endif %}" tabindex="0" aria-selected="{{ run.histogram_selected }}" data-workflow-id="{{ run.workflow_id }}" data-selection-url="{{ run.selection_url }}">
          <td><a href="{{ run.root_invocation_url }}"><code>{{ run.workflow_id }}</code></a></td>
          <td class="text-nowrap">{{ run.started }}</td><td>{{ run.duration }}</td><td>{{ run.member_count }}</td>
          <td class="text-nowrap"><a href="{{ run.invocations_url }}" class="btn btn-sm btn-outline-secondary">Invocations</a> <a href="{{ run.timeline_url }}" class="btn btn-sm btn-outline-success" title="Workflow timeline" aria-label="Workflow timeline"><span class="material-icons">timeline</span></a></td>
        </tr>
      {% endfor %}
      </tbody></table>
      {% if runs.is_empty() %}<p class="text-muted p-3">No workflow runs recorded yet.</p>{% endif %}
    </div>
    {% include "components/pagination.html" %}
  </form>
  <section aria-labelledby="workflow-comparison-title">
    {% if histogram_selection_capped %}<p class="alert alert-warning small">Comparison is limited to 10 selected runs.</p>{% endif %}
    <div class="workflow-toolbar">
      <h3 id="workflow-comparison-title" class="h6 mb-0">Selected Run Comparison</h3>
      <div class="btn-group btn-group-sm" role="group" aria-label="Charts per row">
        <button type="button" class="btn btn-outline-secondary" data-workflow-columns="1" aria-pressed="false" title="One chart per row"><span class="material-icons">view_agenda</span></button>
        <button type="button" class="btn btn-outline-secondary active" data-workflow-columns="2" aria-pressed="true" title="Two charts per row"><span class="material-icons">view_column</span></button>
      </div>
      <label class="small"><input type="checkbox" data-workflow-legends checked> Task legends</label>
    </div>
    <div class="workflow-comparison-grid" data-columns="2">
    {% for workflow_histogram in &workflow_histograms %}
      <article class="workflow-comparison-run">
        <header class="workflow-chart-header">
          <a href="/invocations/{{ workflow_histogram.workflow_id }}"><code>{{ workflow_histogram.workflow_id }}</code></a>
          <span>{{ workflow_histogram.duration }} &middot; {{ workflow_histogram.member_count }} tasks</span>
          <a href="{{ workflow_histogram.timeline_url }}" class="btn btn-sm btn-outline-success" title="Workflow timeline" aria-label="Workflow timeline"><span class="material-icons">timeline</span></a>
          <button type="button" class="btn btn-sm btn-outline-secondary" data-workflow-remove="{{ workflow_histogram.workflow_id }}" title="Remove run" aria-label="Remove run"><span class="material-icons">close</span></button>
        </header>
        {% if workflow_histogram.truncated %}<p class="alert alert-warning small m-2">Partial comparison: member/history limit reached or data unavailable. Open workflow invocations to inspect all tasks.</p>{% endif %}
        {% let histogram = workflow_histogram.histogram %}{% include "partials/histogram.html" %}
      </article>
    {% endfor %}
    </div>
    {% if workflow_histograms.is_empty() %}<p class="text-muted py-3">No runs selected.</p>{% endif %}
  </section>
</div>
{% endblock %}