{% if pipelines %}
<figure>
<table class="sortable">
    <thead>
        <tr><th>Ref</th><th>Status</th><th>Created</th><th></th></tr>
    </thead>
    <tbody>
        {% for p in pipelines %}
        <tr>
            <td><code>{{ p.ref }}</code></td>
            <td><span class="dot dot-{{ p.status }}"></span> {{ p.status }}</td>
            <td>{{ p.created_at }}</td>
            <td>
                <button class="outline small"
                        hx-get="/fragment/pipeline-jobs/{{ repo_name }}/{{ p.id }}"
                        hx-target="next tr.jobs-row td"
                        hx-swap="innerHTML"
                        onclick="this.closest('tr').nextElementSibling.classList.toggle('hidden')">
                    Jobs
                </button>
            </td>
        </tr>
        <tr class="jobs-row hidden"><td colspan="4"></td></tr>
        {% endfor %}
    </tbody>
</table>
</figure>
{% else %}
<p class="text-center-muted">No pipelines.</p>
{% endif %}