{% extends "base" %}

{% block title %}#{{ artifact.id }} · {{ package.name }}{% endblock %}

{% block extra_head %}
<style>
    /* ── Artifact layout ────────────────────────── */
    .artifact-layout {
        display: grid;
        grid-template-columns: 1fr 220px;
        gap: 24px;
        align-items: start;
    }
    @media (max-width: 768px) {
        .artifact-layout { grid-template-columns: 1fr; }
        .artifact-sidebar { order: -1; }
    }

    /* ── Artifact header ────────────────────────── */
    .artifact-header {
        margin-bottom: 20px;
    }
    .artifact-header h1 {
        font-family: var(--mono);
        font-size: 20px;
        font-weight: 500;
        margin: 0 0 6px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .artifact-trigger-line {
        font-size: 13px;
        color: var(--text-dim);
    }

    /* ── Steps list ─────────────────────────────── */
    .steps-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .step-card { overflow: hidden; }

    .step-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        cursor: pointer;
        background: var(--surface);
        border-radius: var(--radius);
        transition: background .1s;
        user-select: none;
    }
    .step-card.open .step-header {
        border-radius: var(--radius) var(--radius) 0 0;
        background: var(--surface2);
        border-bottom: 1px solid var(--border);
    }
    .step-header:hover { background: var(--surface2); }

    .step-name {
        flex: 1;
        font-family: var(--mono);
        font-size: 13px;
    }
    .step-duration {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
    }
    .step-chevron {
        color: var(--muted);
        transition: transform .2s;
        flex-shrink: 0;
    }
    .step-card.open .step-chevron { transform: rotate(90deg); }

    /* ── Log output ─────────────────────────────── */
    .step-log {
        display: none;
        background: #080808;
        border: 1px solid var(--border);
        border-top: none;
        border-radius: 0 0 var(--radius) var(--radius);
        overflow: hidden;
    }
    .step-card.open .step-log { display: block; }

    .log-line {
        display: flex;
        gap: 0;
        font-family: var(--mono);
        font-size: 12px;
        line-height: 1.7;
    }
    .log-line:hover { background: rgba(255,255,255,.03); }
    .log-num {
        min-width: 48px;
        padding: 0 12px;
        text-align: right;
        color: var(--muted);
        user-select: none;
        border-right: 1px solid #1a1a1a;
        flex-shrink: 0;
    }
    .log-text {
        padding: 0 16px;
        white-space: pre-wrap;
        word-break: break-all;
        flex: 1;
    }
    .log-text.err { color: var(--red); }
    .log-text.warn { color: var(--yellow); }

    /* ── Sidebar ────────────────────────────────── */
    .sidebar-card { overflow: hidden; margin-bottom: 12px; }
    .sidebar-card-title {
        font-size: 11px;
        font-family: var(--mono);
        text-transform: uppercase;
        letter-spacing: .8px;
        color: var(--muted);
        padding: 10px 14px 8px;
        border-bottom: 1px solid var(--border);
        background: var(--surface2);
    }
    .sidebar-card-body { padding: 12px 14px; }
    .sidebar-stat {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        font-size: 13px;
    }
    .sidebar-stat-label { color: var(--text-dim); }
    .sidebar-stat-value { font-family: var(--mono); font-size: 12px; }

    /* ── Navigation between artifacts ──────────── */
    .artifact-nav {
        display: flex;
        gap: 8px;
        margin-top: 20px;
    }
    .artifact-nav a {
        font-family: var(--mono);
        font-size: 12px;
        padding: 5px 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        color: var(--text-dim);
        transition: border-color .15s, color .15s;
    }
    .artifact-nav a:hover { color: var(--text); border-color: #3a3a3a; text-decoration: none; }
</style>
{% endblock %}

{% block content %}
<div class="container">

    <div class="breadcrumb">
        <a href="/packages/">packages</a>
        <span class="breadcrumb-sep">/</span>
        <a href="/packages/{{ package.name }}">{{ package.name }}</a>
        <span class="breadcrumb-sep">/</span>
        <a href="/packages/{{ package.name }}/~artifact/">artifacts</a>
        <span class="breadcrumb-sep">/</span>
        <span>#{{ artifact.id }}</span>
    </div>

    <div class="artifact-header">
        <h1>
            #{{ artifact.id }}
            {% if artifact.status == "success" %}
                <span class="badge badge-success"><span class="dot"></span>passed</span>
            {% elif artifact.status == "failure" %}
                <span class="badge badge-failure"><span class="dot"></span>failed</span>
            {% elif artifact.status == "running" %}
                <span class="badge badge-running"><span class="dot dot-pulse"></span>running</span>
            {% elif artifact.status == "pending" %}
                <span class="badge badge-pending"><span class="dot"></span>queued</span>
            {% else %}
                <span class="badge badge-unknown"><span class="dot"></span>{{ artifact.status }}</span>
            {% endif %}
        </h1>
        <p class="artifact-trigger-line">
            {{ artifact.trigger | default(value="Triggered manually") }}
            {% if artifact.commit_sha %} · <span class="mono" style="font-size:12px">{{ artifact.commit_sha }}</span>{% endif %}
            {% if artifact.branch %} on <strong>{{ artifact.branch }}</strong>{% endif %}
        </p>
    </div>

    <div class="artifact-layout">

        <!-- Steps + logs -->
        <div>
            {% if artifact.steps and artifact.steps | length > 0 %}
            <p class="section-title">Steps</p>
            <div class="steps-list">
                {% for step in artifact.steps %}
                <div class="card step-card {% if step.status == 'failure' or loop.first %}open{% endif %}" id="step-{{ loop.index }}">
                    <div class="step-header" onclick="toggleStep(this)">
                        <span class="step-status">
                            {% if step.status == "success" %}
                                <span style="color:var(--green)">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                </span>
                            {% elif step.status == "failure" %}
                                <span style="color:var(--red)">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                                </span>
                            {% elif step.status == "running" %}
                                <span style="color:var(--accent)" class="dot-pulse">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                </span>
                            {% elif step.status == "skipped" %}
                                <span style="color:var(--muted)">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
                                </span>
                            {% else %}
                                <span style="color:var(--muted)">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
                                </span>
                            {% endif %}
                        </span>
                        <span class="step-name">{{ step.name }}</span>
                        {% if step.duration %}<span class="step-duration">{{ step.duration }}</span>{% endif %}
                        <svg class="step-chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
                    </div>
                    <div class="step-log">
                        {% if step.log_lines and step.log_lines | length > 0 %}
                            {% for line in step.log_lines %}
                            <div class="log-line">
                                <span class="log-num">{{ loop.index }}</span>
                                <span class="log-text {% if line.level == 'error' %}err{% elif line.level == 'warn' %}warn{% endif %}">{{ line.text | default(value=line) | escape }}</span>
                            </div>
                            {% endfor %}
                        {% elif step.log %}
                            {% for raw_line in step.log | split(pat="\n") %}
                            <div class="log-line">
                                <span class="log-num">{{ loop.index }}</span>
                                <span class="log-text">{{ raw_line | escape }}</span>
                            </div>
                            {% endfor %}
                        {% else %}
                            <div class="log-line">
                                <span class="log-num">1</span>
                                <span class="log-text dim">No output.</span>
                            </div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="card" style="padding:32px;text-align:center;color:var(--text-dim);font-size:13px">
                No steps recorded for this artifact.
            </div>
            {% endif %}

            <div class="artifact-nav">
                {% if artifact.prev_id %}
                <a href="/packages/{{ package.name }}/~artifact/{{ artifact.prev_id }}">← #{{ artifact.prev_id }}</a>
                {% endif %}
                {% if artifact.next_id %}
                <a href="/packages/{{ package.name }}/~artifact/{{ artifact.next_id }}">#{{ artifact.next_id }} →</a>
                {% endif %}
            </div>
        </div>

        <!-- Sidebar -->
        <aside class="artifact-sidebar">

            <div class="card sidebar-card">
                <div class="sidebar-card-title">Summary</div>
                <div class="sidebar-card-body">
                    <div class="sidebar-stat">
                        <span class="sidebar-stat-label">Status</span>
                        <span>
                            {% if artifact.status == "success" %}
                                <span class="badge badge-success"><span class="dot"></span>passed</span>
                            {% elif artifact.status == "failure" %}
                                <span class="badge badge-failure"><span class="dot"></span>failed</span>
                            {% elif artifact.status == "running" %}
                                <span class="badge badge-running"><span class="dot dot-pulse"></span>running</span>
                            {% else %}
                                <span class="badge badge-unknown">{{ artifact.status }}</span>
                            {% endif %}
                        </span>
                    </div>
                    {% if artifact.duration %}
                    <div class="sidebar-stat">
                        <span class="sidebar-stat-label">Duration</span>
                        <span class="sidebar-stat-value">{{ artifact.duration }}</span>
                    </div>
                    {% endif %}
                    {% if artifact.created_at %}
                    <div class="sidebar-stat">
                        <span class="sidebar-stat-label">Started</span>
                        <span class="sidebar-stat-value">{{ artifact.created_at }}</span>
                    </div>
                    {% endif %}
                    {% if artifact.finished_at %}
                    <div class="sidebar-stat">
                        <span class="sidebar-stat-label">Finished</span>
                        <span class="sidebar-stat-value">{{ artifact.finished_at }}</span>
                    </div>
                    {% endif %}
                    {% if artifact.steps %}
                    <div class="sidebar-stat">
                        <span class="sidebar-stat-label">Steps</span>
                        <span class="sidebar-stat-value">{{ artifact.steps | length }}</span>
                    </div>
                    {% endif %}
                </div>
            </div>

            {% if artifact.commit_sha or artifact.branch %}
            <div class="card sidebar-card">
                <div class="sidebar-card-title">Commit</div>
                <div class="sidebar-card-body">
                    {% if artifact.branch %}
                    <div class="sidebar-stat">
                        <span class="sidebar-stat-label">Branch</span>
                        <span class="sidebar-stat-value">{{ artifact.branch }}</span>
                    </div>
                    {% endif %}
                    {% if artifact.commit_sha %}
                    <div class="sidebar-stat">
                        <span class="sidebar-stat-label">SHA</span>
                        <span class="sidebar-stat-value">{{ artifact.commit_sha | truncate(length=8, end="") }}</span>
                    </div>
                    {% endif %}
                    {% if artifact.commit_message %}
                    <div style="font-size:12px;color:var(--text-dim);margin-top:8px;line-height:1.5">{{ artifact.commit_message }}</div>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <div style="margin-top:4px">
                <a href="/packages/{{ package.name }}/~artifact/" style="font-size:12px;font-family:var(--mono)">← all artifacts</a>
            </div>

        </aside>
    </div>

</div>

<script>
function toggleStep(header) {
    const card = header.closest('.step-card');
    card.classList.toggle('open');
}
</script>
{% endblock %}