{% extends "base.html" %}

{% block title %}Runs - Piply{% endblock %}

{% block content %}
<div class="page-grid">
    <section class="hero">
        <div class="eyebrow">Run history</div>
        <h1 class="hero-headline">Every execution keeps its <span>task results and raw logs</span>.</h1>
        <p class="hero-copy">
            Runs are persisted with task counts, downstream triggers, and operator output so you can debug the flow instead of guessing what happened.
        </p>
        <div class="hero-meta">
            <span class="meta-pill">database {{ scheduler.database_path }}</span>
            <span class="meta-pill">heartbeat {{ scheduler.heartbeat or "waiting" }}</span>
        </div>
    </section>

    <section class="panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">Execution timeline</h2>
                <p class="panel-copy">Manual launches, scheduled runs, and downstream pipeline triggers all land in the same history stream.</p>
            </div>
        </div>

        {% if runs %}
        <div class="table-wrap">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Run ID</th>
                        <th>Pipeline</th>
                        <th>Status</th>
                        <th>Trigger</th>
                        <th>Tasks</th>
                        <th>Started</th>
                        <th>Finished</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for run in runs %}
                    <tr>
                        <td><a class="mono" href="/runs/{{ run.run_id }}">{{ run.run_id }}</a></td>
                        <td><a href="/pipelines/{{ run.pipeline_id }}">{{ run.pipeline_title }}</a></td>
                        <td><span class="status-badge {{ run.status }}">{{ run.status }}</span></td>
                        <td class="mono">{{ run.trigger }}</td>
                        <td>{{ run.successful_tasks }}/{{ run.task_count }}</td>
                        <td>{{ run.started_at or run.created_at }}</td>
                        <td>{{ run.finished_at or "-" }}</td>
                        <td>
                            <div class="table-actions">
                                <a class="button ghost" href="/runs/{{ run.run_id }}">Open</a>
                                {% if run.status in ['queued', 'running'] %}
                                <button class="button warn" onclick="cancelRun('{{ run.run_id }}')">Cancel</button>
                                {% else %}
                                <button class="button ghost" onclick="deleteRun('{{ run.run_id }}')">Delete</button>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="empty-state">No runs recorded yet. Start one from the pipelines page to begin building history.</div>
        {% endif %}
    </section>
</div>
{% endblock %}