{% 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="applyPipelineFilters()">
            Current branches only
        </label>
    </div>
</div>
<div id="pipelines-content"
     hx-get="/fragment/pipelines"
     hx-trigger="load, do-refresh, every 10s[document.visibilityState === 'visible' && !window.tableSorted]"
     hx-swap="innerHTML"
     hx-vals='js:{"filter": window.getPipelineFilter()}'>
</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");
    return parts.length ? parts.join(",") : "all";
}
window.getPipelineFilter = getPipelineFilter;

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;
})();
</script>
{% endblock %}