{% extends "base.html" %}
{% block title %}Plans - PlanExe{% endblock %}
{% block head %}
<style>
    .plan-list-title {
        margin: 0 0 8px;
        font-size: 1.2rem;
        font-weight: 700;
    }
    .plan-list-subtitle {
        margin: 0 0 12px;
        font-size: 0.82rem;
        color: var(--color-text-secondary);
    }
    .plan-list-wrap {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-card-bg);
        overflow: hidden;
    }
    .plan-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }
    .plan-table th {
        text-align: left;
        padding: 8px 10px;
        font-size: 0.66rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-secondary);
        background: var(--color-bg-soft);
        border-bottom: 1px solid var(--color-border);
        white-space: nowrap;
    }
    .plan-table td {
        padding: 8px 10px;
        border-bottom: 1px solid var(--color-border);
        font-size: 0.8rem;
        color: var(--color-text);
        vertical-align: middle;
    }
    .plan-table tr:last-child td {
        border-bottom: none;
    }
    .plan-row {
        cursor: pointer;
    }
    .plan-row:hover {
        background: var(--color-bg-soft);
    }

    .plan-cell-id,
    .plan-cell-time,
    .plan-cell-created {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.73rem;
    }
    .plan-no-telephone,
    .plan-no-telephone a,
    .plan-table a[x-apple-data-detectors] {
        color: inherit !important;
        text-decoration: none !important;
        pointer-events: none !important;
    }
    .plan-cell-status {
        text-transform: capitalize;
        white-space: nowrap;
    }
    .status-chip {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        border: 1px solid var(--color-border);
        padding: 1px 7px;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-text-secondary);
        background: var(--color-bg-soft);
    }
    .status-chip.status-completed {
        border-color: #2e7d32;
        color: #2e7d32;
        background: #e8f5e9;
    }
    .status-chip.status-processing,
    .status-chip.status-pending {
        border-color: #1565c0;
        color: #1565c0;
        background: #e3f2fd;
    }
    .status-chip.status-failed {
        border-color: #c62828;
        color: #c62828;
        background: #ffebee;
    }
    .status-chip.status-stopped {
        border-color: #e65100;
        color: #e65100;
        background: #fff3e0;
    }

    .plan-cell-prompt {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .plan-empty {
        padding: 20px 14px;
        color: var(--color-text-secondary);
        font-size: 0.9rem;
    }

    @media (max-width: 1040px) {
        .plan-table th:nth-child(5),
        .plan-table td:nth-child(5) {
            display: none;
        }
    }
    @media (max-width: 840px) {
        .plan-table th:nth-child(2),
        .plan-table td:nth-child(2) {
            display: none;
        }
    }
</style>
{% endblock %}

{% block content %}
<div style="display:flex; justify-content:space-between; align-items:center;">
    <h1 class="plan-list-title">Plans</h1>
    <a href="/plan/resume-from-zip" style="padding:6px 14px; font-size:0.8rem; font-weight:600; color:var(--color-text); background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:var(--radius-lg); text-decoration:none; white-space:nowrap;">Resume from Zip</a>
</div>
<p class="plan-list-subtitle">Technical queue view · newest first · click row to inspect</p>
<div class="plan-list-wrap">
    {% if plan_rows %}
    <table class="plan-table">
        <thead>
            <tr>
                <th title="Task state for triage">status</th>
                <th title="Task UUID">id</th>
                <th title="Absolute creation timestamp (YYMMDD-HHMM)">created</th>
                <th title="Human-friendly age">age</th>
                <th title="Prompt preview">prompt</th>
            </tr>
        </thead>
        <tbody>
            {% for row in plan_rows %}
            {% set status = (row.status | lower) %}
            <tr class="plan-row" data-href="{{ url_for('plan_routes.plan') }}?id={{ row.id }}" title="Inspect plan {{ row.id }}">
                <td class="plan-cell-status"><span class="status-chip status-{{ status }}">{{ status }}</span></td>
                <td class="plan-cell-id"><span class="plan-no-telephone">{{ row.id }}</span></td>
                <td class="plan-cell-created"><span class="plan-no-telephone">{{ row.created_compact }}</span></td>
                <td class="plan-cell-time">{{ row.created_relative }}</td>
                <td class="plan-cell-prompt" title="{{ row.prompt }}">{{ row.prompt }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="plan-empty">No plans yet.</div>
    {% endif %}
</div>

{% if not plan_rows %}
<div style="margin-top:24px; padding:20px 24px; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg-soft); max-width:500px;">
    <p style="margin:0 0 8px; font-size:0.9rem; font-weight:600; color:var(--color-text);">New here?</p>
    <p style="margin:0 0 12px; font-size:0.82rem; line-height:1.5; color:var(--color-text-secondary);">
        See these example reports for inspiration.
    </p>
    <a href="https://planexe.org/examples/" target="_blank" style="font-size:0.82rem; font-weight:600; color:var(--color-primary, #0066cc); text-decoration:none;">Browse example plans &rarr;</a>
</div>
{% endif %}

<script>
    document.querySelectorAll(".plan-row").forEach(function (row) {
        row.addEventListener("click", function () {
            var href = this.getAttribute("data-href");
            if (href) {
                window.location.href = href;
            }
        });
    });
</script>
{% endblock %}