{% extends "base.html" %}
{% block title_suffix %} - Pipelines{% endblock %}
{% block content %}
<h2>Pipelines</h2>
<div class="filter-toggle vulns-filters">
    <div class="filter-checkboxes">
        <label class="filter-chip">
            <input type="checkbox" id="pipelines-failed-only" onchange="applyPipelineFilters()">
            Failed only
        </label>
        <label class="filter-chip">
            <input type="checkbox" id="pipelines-current-branches" onchange="onBranchFilterChange('current-branches')">
            Current branches only
        </label>
        <label class="filter-chip">
            <input type="checkbox" id="pipelines-existing-branches" onchange="onBranchFilterChange('existing-branches')">
            Existing branches only
        </label>
    </div>
</div>
<div id="pipelines-content"
     hx-get="/fragment/pipelines"
     hx-trigger="load, do-refresh, every 10s"
     hx-swap="innerHTML"
>
<p class="htmx-indicator-inline" aria-busy="true">Loading from cache…</p>
</div>
<script>
function getPipelineFilter() {
    var parts = [];
    var failedOnly = document.getElementById("pipelines-failed-only");
    if (failedOnly && failedOnly.checked) parts.push("failed");
    var currentBranches = document.getElementById("pipelines-current-branches");
    if (currentBranches && currentBranches.checked) parts.push("current-branches");
    var existingBranches = document.getElementById("pipelines-existing-branches");
    if (existingBranches && existingBranches.checked) parts.push("existing-branches");
    return parts.length ? parts.join(",") : "all";
}
window.getPipelineFilter = getPipelineFilter;

function onBranchFilterChange(clicked) {
    var current = document.getElementById("pipelines-current-branches");
    var existing = document.getElementById("pipelines-existing-branches");
    if (clicked === "current-branches" && current.checked) existing.checked = false;
    if (clicked === "existing-branches" && existing.checked) current.checked = false;
    applyPipelineFilters();
}

function applyPipelineFilters() {
    window.tableSorted = false;
    var filter = getPipelineFilter();
    localStorage.setItem("pipelines_filter", filter);
    htmx.ajax("GET", "/fragment/pipelines?filter=" + encodeURIComponent(filter), {target: "#pipelines-content", swap: "innerHTML"});
}

// Restore from localStorage
(function() {
    var saved = localStorage.getItem("pipelines_filter");
    if (!saved) return;
    var parts = saved.split(",");
    var failedOnly = document.getElementById("pipelines-failed-only");
    if (failedOnly) failedOnly.checked = parts.indexOf("failed") !== -1;
    var currentBranches = document.getElementById("pipelines-current-branches");
    if (currentBranches) currentBranches.checked = parts.indexOf("current-branches") !== -1;
    var existingBranches = document.getElementById("pipelines-existing-branches");
    if (existingBranches) existingBranches.checked = parts.indexOf("existing-branches") !== -1;
})();
</script>
{% endblock %}