{% extends "base" %}

{% block title %}{% if query %}Search: {{ query }}{% else %}All Packages{% endif %}{% endblock %}

{% block extra_head %}
<style>
    .home-header {
        margin-bottom: 28px;
    }
    .home-header h1 {
        font-size: 20px;
        font-weight: 500;
        margin: 0 0 4px;
    }
    .home-header p {
        color: var(--text-dim);
        margin: 0;
        font-size: 13px;
    }

    .repo-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

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

    .repo-item-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--surface2);
        background-image: url("/static/placeholder.jpg");
        background-size: cover;
        background-position: center;
        flex-shrink: 0;
        border: 1px solid var(--border);
    }

    .repo-item-main {
        flex: 1;
        min-width: 0;
    }
    .repo-item-name {
        font-family: var(--mono);
        font-size: 14px;
        color: var(--accent);
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .repo-item-desc {
        font-size: 12px;
        color: var(--text-dim);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .repo-item-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
        font-size: 12px;
        color: var(--text-dim);
    }
    .repo-item-lang {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .lang-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        background: var(--accent);
        flex-shrink: 0;
    }

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

    .result-count {
        font-size: 12px;
        color: var(--text-dim);
        margin-bottom: 16px;
        font-family: var(--mono);
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="home-header">
        {% if query %}
            <h1>Results for <span style="color:var(--accent)">"{{ query }}"</span></h1>
        {% else %}
            <h1>Packages</h1>
            <p>{{ packages | length }} package{% if packages | length != 1 %}s{% endif %} available</p>
        {% endif %}
    </div>

    {% if query %}
        <div class="result-count">{{ packages | length }} result{% if packages | length != 1 %}s{% endif %}</div>
    {% endif %}

    {% if packages | length > 0 %}
    <div class="repo-grid">
        {% for pkg in packages %}
        <a class="card repo-item" href="/packages/{{ pkg.name }}">
            <div class="repo-item-avatar" {% if pkg.avatar_url %}style="background-image:url('{{ pkg.avatar_url }}')"{% endif %}></div>
            <div class="repo-item-main">
                <span class="repo-item-name">{{ pkg.name }}</span>
                {% if pkg.description %}
                <div class="repo-item-desc">{{ pkg.description }}</div>
                {% endif %}
            </div>
            <div class="repo-item-meta">
                {% if pkg.language %}
                <span class="repo-item-lang">
                    <span class="lang-dot" style="{% if pkg.language_color %}background:{{ pkg.language_color }}{% endif %}"></span>
                    {{ pkg.language }}
                </span>
                {% endif %}
                {% if pkg.latest_build_status %}
                    {% if pkg.latest_build_status == "success" %}
                        <span class="badge badge-success"><span class="dot"></span>passing</span>
                    {% elif pkg.latest_build_status == "failure" %}
                        <span class="badge badge-failure"><span class="dot"></span>failing</span>
                    {% elif pkg.latest_build_status == "running" %}
                        <span class="badge badge-running"><span class="dot dot-pulse"></span>running</span>
                    {% elif pkg.latest_build_status == "pending" %}
                        <span class="badge badge-pending"><span class="dot"></span>pending</span>
                    {% else %}
                        <span class="badge badge-unknown"><span class="dot"></span>unknown</span>
                    {% endif %}
                {% endif %}
                <span class="dim small">{{ pkg.updated_at }}</span>
            </div>
        </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="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        {% if query %}
            <p>No packages match <strong>"{{ query }}"</strong></p>
        {% else %}
            <p>No packages yet.</p>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}