{% extends "base" %}
{% import 'components/file' as files %}

{% block title %}{{ package.config.name }}{% endblock %}

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

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

    /* ── Toolbar above file tree ────────────────── */
    .file-toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--border);
        background: var(--surface2);
        border-radius: var(--radius) var(--radius) 0 0;
    }
    .file-toolbar-search {
        position: relative;
        flex: 1;
        max-width: 260px;
    }
    .file-toolbar-search input {
        width: 100%;
        padding: 5px 10px 5px 28px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 4px;
        color: var(--text);
        font-size: 12px;
        font-family: var(--sans);
        outline: none;
    }
    .file-toolbar-search input:focus { border-color: var(--accent); }
    .file-toolbar-search input::placeholder { color: var(--muted); }
    .file-toolbar-search-icon {
        position: absolute;
        left: 8px; top: 50%;
        transform: translateY(-50%);
        color: var(--muted);
        pointer-events: none;
    }

    /* ── File tree ──────────────────────────────── */
    .file-tree { border-radius: var(--radius); overflow: hidden; }
    .file-tree-body { border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); }

    .file-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 7px 14px;
        border-bottom: 1px solid var(--border);
        font-family: var(--mono);
        font-size: 13px;
        transition: background .1s;
        text-decoration: none;
        color: var(--text);
    }
    .file-row:last-child { border-bottom: none; }
    .file-row:hover { background: var(--surface2); text-decoration: none; }

    .file-icon { color: var(--muted); flex-shrink: 0; }
    .file-name { flex: 1; }
    .file-name a { color: var(--text); }
    .file-name a:hover { color: var(--accent); text-decoration: none; }
    .file-commit { font-size: 11px; color: var(--text-dim); flex: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .file-age    { font-size: 11px; color: var(--muted); flex-shrink: 0; }

    /* ── Sidebar ────────────────────────────────── */
    .pkg-sidebar {}
    .sidebar-card {
        margin-bottom: 12px;
        overflow: hidden;
    }
    .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); }

    .build-status-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        margin-bottom: 10px;
    }
    .build-link {
        font-size: 11px;
        font-family: var(--mono);
        margin-top: 6px;
        display: inline-block;
    }
    .lang-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
    }
    .lang-color-dot {
        width: 10px; height: 10px;
        border-radius: 50%;
        background: var(--accent);
    }

    /* ── Empty file state ───────────────────────── */
    .file-tree-empty {
        padding: 32px;
        text-align: center;
        color: var(--text-dim);
        font-size: 13px;
        border: 1px solid var(--border);
        border-top: none;
        border-radius: 0 0 var(--radius) var(--radius);
    }
</style>
{% endblock %}

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

    <div class="breadcrumb">
        <a href="/packages/">packages</a>
        <span class="breadcrumb-sep">/</span>
        <span>{{ package.config.name }}</span>
    </div>

    <div class="pkg-header">
        <h1>
            {{ package.config.name }}
            {% if package.meta.latest_build_status == "success" %}
                <span class="badge badge-success"><span class="dot"></span>passing</span>
            {% elif package.meta.latest_build_status == "failure" %}
                <span class="badge badge-failure"><span class="dot"></span>failing</span>
            {% elif package.meta.latest_build_status == "running" %}
                <span class="badge badge-running"><span class="dot dot-pulse"></span>running</span>
            {% elif package.meta.latest_build_status == "pending" %}
                <span class="badge badge-pending"><span class="dot"></span>pending</span>
            {% endif %}
        </h1>
        {% if package.config.description %}
        <p class="pkg-desc">{{ package.config.description }}</p>
        {% endif %}
    </div>

    <div class="pkg-layout">

        <!-- File tree -->
        {% include 'components/file_tree' %}

        <!-- Sidebar (Package info incl build status and releases) -->
        {% include 'components/sidebar' %}
    </div>
</div>
{% endblock %}