{% extends "base.html" %}

{% block title %}{{ page_title }} · {{ app_title }}{% endblock %}

{% block content %}
{% include "components/page_header.html" %}

<div class="page-body">
  <div class="{{ layout.container_class }}">
    {% include "components/product_console_state.html" %}

    {% if has_layout %}
    <div class="row row-deck row-cards g-3">
      {% for block in layout_blocks %}
      <div class="{{ block.width_class }}">
        {% include "components/layout_block.html" %}
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="card">
      <div class="card-header"><h3 class="card-title">{{ pc_labels.run_list }}</h3></div>
      <div class="card-body p-0">
        {% if runs %}
        <table class="table table-hover table-vcenter card-table">
          <thead>
            <tr>
              <th>{{ pc_labels.run_id }}</th>
              <th>{{ pc_labels.status }}</th>
              <th>{{ pc_labels.started }}</th>
              <th>{{ pc_labels.completed }}</th>
              <th class="w-1"></th>
            </tr>
          </thead>
          <tbody>
            {% for run in runs %}
            <tr>
              <td>{{ run.id }}</td>
              <td>{{ run.status }}</td>
              <td>{{ run.started_at if run.started_at is defined else '-' }}</td>
              <td>{{ run.completed_at if run.completed_at is defined else '-' }}</td>
              <td><a class="btn btn-sm btn-outline-primary" href="{{ url_prefix }}/runs/{{ run.id }}">{{ pc_labels.open }}</a></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
        <div class="p-3 text-secondary">No runs available.</div>
        {% endif %}
      </div>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}