{% 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"
                onclick="this.closest('article').classList.toggle('pinned')"
                data-after="refresh-dashboard"
                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-body">
        <div class="card-branch">
            <code>{{ repo.branch or "detached" }}</code>
            {% if repo.stale %}<span class="badge-stale">stale</span>
            {% elif 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>
            {% else %}<span class="card-muted">up to date</span>
            {% endif %}
        </div>
        {% set has_pull = repo.pull_status in ("clean", "conflict", "dirty") %}
        <div class="card-middle{% if not has_pull %} card-middle-center{% endif %}">
            <div class="card-default-branch">
            {% if repo.branch == repo.default_branch %}
                <span class="card-muted">on default branch</span>
            {% elif repo.default_ahead or repo.default_behind %}
                {% if repo.default_ahead and repo.default_behind and not repo.stale %}<span class="badge-diverged">diverged</span>{% endif %}
                {% if repo.default_ahead %}<span class="pull-clean">&uarr;{{ repo.default_ahead }}</span>{% endif %}
                {% if repo.default_behind %}<span>&darr;{{ repo.default_behind }}</span>{% endif %}
                from <code>{{ repo.default_branch }}</code>
            {% elif repo.default_branch %}
                <span class="card-muted">synced with {{ repo.default_branch }}</span>
            {% else %}
                <span class="card-muted">&nbsp;</span>
            {% endif %}
            </div>
            {% if has_pull %}
            <div class="card-pull-status">
                {% if repo.pull_status == "clean" %}<span class="pull-clean">&darr; pull available</span>
                {% elif repo.pull_status == "dirty" %}<span class="card-muted">&darr; behind (uncommitted changes)</span>
                {% else %}<span class="pull-conflict">&#x26A0; conflict detected</span>{% endif %}
            </div>
            {% endif %}
        </div>
    </div>

    {% 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 or repo.issue_count %}
        <div class="card-stat">
            {% if repo.mr_count %}
            <span class="card-stat-value">{{ repo.mr_count }}</span>
            <span class="card-stat-label">MR{{ "s" if repo.mr_count > 1 }}</span>
            {% endif %}
        </div>
        <div class="card-stat">
            {% if repo.issue_count %}
            <span class="card-stat-value">{{ repo.issue_count }}</span>
            <span class="card-stat-label">issue{{ "s" if repo.issue_count > 1 }}</span>
            {% endif %}
        </div>
        {% else %}
        <div class="card-stat"><span class="card-stat-label card-muted">no MRs or issues</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 has_pullable = state.repos | selectattr("pull_status", "equalto", "clean") | list | length > 0 %}
{% set has_stale = state.repos | selectattr("stale", "equalto", true) | list | length > 0 %}

<div class="dashboard-actions">
    <button class="outline secondary dashboard-action-btn" hx-post="/action/pull-all" hx-swap="none"
            data-after="refresh-dashboard"
            {% if not has_pullable %}disabled{% endif %}>
        &darr; Pull all
    </button>
    <button class="outline secondary dashboard-action-btn" hx-post="/action/checkout-default" hx-swap="none"
            data-after="refresh-dashboard"
            {% if not has_stale %}disabled{% endif %}>
        &times; Unstale all
    </button>
</div>

{% 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 %}