{% load i18n %}
{% if jobs %}
  <div class="list-group list-group-flush">
    {% for job in jobs %}
      <a href="{{ job.get_absolute_url }}" class="list-group-item list-group-item-action px-1 py-2">
        <div class="d-flex w-100 justify-content-between align-items-center">
          <span class="text-truncate me-2">{{ job.workflow.name }}</span>
          <span class="badge text-bg-{{ job.status_color }}">{{ job.get_status_display }}</span>
        </div>
        <div class="d-flex w-100 justify-content-between align-items-center">
          <small class="text-muted">#{{ job.pk }}</small>
          <small class="text-muted">{{ job.created|timesince }} {% trans "ago" %}</small>
        </div>
      </a>
    {% endfor %}
  </div>
  <div class="text-end mt-2 pt-1 border-top">
    <a href="{{ list_url }}" class="small">{% trans "View all runs" %} <i class="mdi mdi-arrow-right"></i></a>
  </div>
{% else %}
  <p class="text-muted text-center my-3 small">{% trans "No workflow runs yet." %}</p>
{% endif %}