{% extends "base" %}

{% block title %}Artifacts · {{ package.name }}{% endblock %}

{% block extra_head %}
<style>
    .artifacts-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .artifacts-header h1 {
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        font-family: var(--mono);
    }

    .artifact-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .artifact-row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 16px;
        text-decoration: none;
        color: var(--text);
        transition: border-color .15s, background .15s;
    }
    .artifact-row:hover {
        background: var(--surface2);
        border-color: #3a3a3a;
        text-decoration: none;
    }

    .artifact-id {
        font-family: var(--mono);
        font-size: 13px;
        color: var(--accent);
        flex-shrink: 0;
        min-width: 48px;
    }

    .artifact-info { flex: 1; min-width: 0; }
    .artifact-trigger {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .artifact-meta {
        font-size: 11px;
        color: var(--text-dim);
        font-family: var(--mono);
        margin-top: 2px;
    }

    .artifact-status { flex-shrink: 0; }
    .artifact-duration {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        flex-shrink: 0;
        min-width: 48px;
        text-align: right;
    }
    .artifact-date {
        font-size: 11px;
        color: var(--muted);
        font-family: var(--mono);
        flex-shrink: 0;
        min-width: 90px;
        text-align: right;
    }

    .empty-state {
        text-align: center;
        padding: 64px 0;
        color: var(--text-dim);
        font-size: 13px;
    }

    /* Stats strip at top */
    .stats-strip {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }
    .stat-chip {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 8px 14px;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .stat-chip-val {
        font-family: var(--mono);
        font-size: 18px;
        font-weight: 500;
    }
    .stat-chip-label { color: var(--text-dim); }
</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>
        <span>artifacts</span>
    </div>

    <div class="artifacts-header">
        <h1>{{ package.name }} / artifacts</h1>
    </div>

    {% if stats is defined %}
    <div class="stats-strip">
        <div class="stat-chip">
            <span class="stat-chip-val">{{ stats.total | default(value=0) }}</span>
            <span class="stat-chip-label">Total</span>
        </div>
        <div class="stat-chip">
            <span class="stat-chip-val" style="color:var(--green)">{{ stats.success | default(value=0) }}</span>
            <span class="stat-chip-label">Passed</span>
        </div>
        <div class="stat-chip">
            <span class="stat-chip-val" style="color:var(--red)">{{ stats.failure | default(value=0) }}</span>
            <span class="stat-chip-label">Failed</span>
        </div>
        {% if stats.avg_duration is defined %}
        <div class="stat-chip">
            <span class="stat-chip-val">{{ stats.avg_duration }}</span>
            <span class="stat-chip-label">Avg duration</span>
        </div>
        {% endif %}
    </div>
    {% endif %}

    {% if artifacts and artifacts | length > 0 %}
    <div class="artifact-list">
        {% for artifact in artifacts %}
        <a class="card artifact-row" href="/packages/{{ package.name }}/~artifact/{{ artifact.id }}">
            <span class="artifact-id">#{{ artifact.id }}</span>
            <div class="artifact-info">
                <div class="artifact-trigger">{{ artifact.trigger | default(value="manual") }}</div>
                <div class="artifact-meta">{{ artifact.commit_sha | default(value="") }}{% if artifact.branch %} on {{ artifact.branch }}{% endif %}</div>
            </div>
            <span class="artifact-status">
                {% 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 %}
            </span>
            {% if artifact.duration %}<span class="artifact-duration">{{ artifact.duration }}</span>{% endif %}
            <span class="artifact-date">{{ artifact.created_at | default(value="") }}</span>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--border)"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        <p style="margin-top:10px">No artifacts yet.</p>
    </div>
    {% endif %}

</div>
{% endblock %}