{% extends "base/base.html" %}
{% from "base/ui/state.html" import state_badge %}

{% block content %}
  <div>
    <h1 class="h3 mb-3">Workflows</h1>
    <div
      id="content"
      hx-get="/workflows"
      hx-trigger="load delay:5s"
      hx-target="#content"
      hx-select="#content"
    >
      <table class="table table-bordered table-striped">
        <thead>
        <tr>
          <th>ID</th>
          <th>Workflow</th>
          <th class="text-center">State</th>
          <th>Created</th>
          <th class="text-end">Pending Jobs</th>
          <th class="text-end">Total Jobs</th>
        </tr>
        </thead>
        <tbody>
        {% for workflow in workflows %}
          <tr>
            <td>
              <a href="{{ url_for('workflow', id=workflow.id) }}">
                {{ workflow.id }}
              </a>
            </td>
            <td>{{ workflow.name }}</td>
            <td class="text-center">
              {{ state_badge(workflow.state.value) }}
            </td>
            <td>
              {{ workflow.created_at|relative_time }}
            </td>
            <td class="text-end">{{ workflow.pending_steps|length }}</td>
            <td class="text-end">{{ workflow.steps|length }}</td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
{% endblock %}
