{% set pinned = state.pinned | default([]) %}
{% set order = state.repo_order | default([]) %}

{% macro repo_card(repo, is_pinned) %}
<article class="{% if is_pinned %}pinned{% endif %}" data-repo="{{ repo.name }}"
         onclick="if(!window.justDragged&&!event.target.closest('.pin-btn'))window.location='/repo/{{ repo.name }}'">
    <header>
        <a href="/repo/{{ repo.name }}" onclick="event.stopPropagation()"><strong>{{ repo.name }}</strong></a>
        <button class="outline small pin-btn"
                hx-post="/action/{% if is_pinned %}unpin{% else %}pin{% endif %}/{{ repo.name }}"
                hx-swap="none"
                hx-on::before-request="this.closest('article').classList.toggle('pinned')"
                hx-on::after-request="htmx.ajax('GET', '/fragment/dashboard', {target:'#dashboard-content', swap:'innerHTML'})"
                title="{% if is_pinned %}Unpin{% else %}Pin{% endif %}">
            {% if is_pinned %}<svg class="nav-icon" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M16 2l-4 4-4-2-5 5 3 3L2 16l4 4 4-4 3 3 5-5-2-4 4-4z"/></svg>{% else %}<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 2l-4 4-4-2-5 5 3 3L2 16l4 4 4-4 3 3 5-5-2-4 4-4z"/></svg>{% endif %}
        </button>
    </header>

    <div class="card-branch">
        <code>{{ repo.branch or "detached" }}</code>
        {% if repo.ahead or repo.behind %}
        <span class="card-sync">
            {% if repo.ahead %}<span class="pull-clean">&uarr;{{ repo.ahead }}</span>{% endif %}
            {% if repo.behind %}<span>&darr;{{ repo.behind }}</span>{% endif %}
        </span>
        {% endif %}
    </div>

    {% if repo.pull_status == "clean" %}
        <div class="card-pull-status pull-clean">&darr; pull available</div>
    {% elif repo.pull_status == "conflict" %}
        <div class="card-pull-status pull-conflict">&#x26A0; conflict detected</div>
    {% endif %}

    {% if repo.has_forge %}
    <div class="card-stats">
        <div class="card-stat" title="Pipeline: {{ repo.pipeline_status or 'unknown' }}">
            <span class="dot dot-{{ repo.pipeline_status or 'pending' }}"></span>
            <span class="card-stat-label">{{ repo.pipeline_status or "no pipeline" }}</span>
        </div>
        {% if repo.mr_count %}
        <div class="card-stat">
            <span class="card-stat-value">{{ repo.mr_count }}</span>
            <span class="card-stat-label">MR{{ "s" if repo.mr_count > 1 }}</span>
        </div>
        {% endif %}
        {% if repo.vuln_critical or repo.vuln_high %}
        <div class="card-stat">
            {% if repo.vuln_critical %}<span class="badge-critical">{{ repo.vuln_critical }} crit</span>{% endif %}
            {% if repo.vuln_high %}<span class="badge-high">{{ repo.vuln_high }} high</span>{% endif %}
        </div>
        {% endif %}
    </div>
    {% endif %}
</article>
{% endmacro %}

{% if state and state.repos %}
{% set pinned_repos = state.repos | selectattr("name", "in", pinned) | list %}
{% if pinned_repos %}
<h5>Pinned</h5>
<div class="card-grid" id="pinned-grid">
    {% for repo in pinned_repos %}
        {{ repo_card(repo, true) }}
    {% endfor %}
</div>
{% endif %}

<div class="card-grid" id="repos-grid">
    {% for repo in state.repos if repo.name not in pinned %}
        {{ repo_card(repo, false) }}
    {% endfor %}
</div>

<button class="outline secondary small" onclick="resetOrder()">Reset order</button>
{% else %}
<p>No repos discovered. Run <code>project-hub init</code> to get started.</p>
{% endif %}