{% extends "base.html" %}

{% block title %}{{ pipeline.title }} - Piply{% endblock %}

{% block content %}
<div class="page-grid">
    <section class="compact-header">
        <div>
            <div class="eyebrow">Pipeline</div>
            <h1 class="panel-title" style="font-size:1.5rem; margin:0;">{{ pipeline.title }}</h1>
            <div class="muted mono" style="margin-top:3px;">{{ pipeline.pipeline_id }}</div>
            {% if pipeline.description %}
            <p class="page-header-copy" style="margin:6px 0 0;">{{ pipeline.description }}</p>
            {% endif %}
        </div>
        <div class="run-stats-row">
            <span class="status-badge {% if pipeline.last_run %}{{ pipeline.last_run.status }}{% else %}queued{% endif %}" data-last-run-status>
                {% if pipeline.last_run %}{{ pipeline.last_run.status }}{% else %}no runs yet{% endif %}
            </span>
            <button class="button primary" data-run-button="{{ pipeline.pipeline_id }}" onclick="triggerPipeline('{{ pipeline.pipeline_id }}', { scope: document.getElementById('command-override-panel') || document })">Run now</button>
            <button class="button secondary" onclick="openPreview()">Preview</button>
            <button class="button {% if pipeline.paused %}secondary{% else %}ghost{% endif %}" onclick="togglePipelinePause('{{ pipeline.pipeline_id }}', {{ 'false' if pipeline.paused else 'true' }})">
                {% if pipeline.paused %}Resume{% else %}Pause{% endif %}
            </button>
            <button class="button ghost" onclick="deletePipeline('{{ pipeline.pipeline_id }}')">Delete</button>
        </div>
    </section>

    <!-- One merged metadata strip, collapsible so the DAG can take the space. -->
    <section class="panel tight-panel collapsible" id="metadata-panel">
        <div class="collapsible-header">
            <button type="button" class="collapse-toggle" id="metadata-toggle"
                    aria-expanded="true" aria-controls="metadata-body"
                    onclick="toggleMetadataPanel()">
                <span class="collapse-caret" aria-hidden="true">&#9662;</span>
                <span class="small-kicker">Pipeline metadata</span>
            </button>
            <!-- Stays visible when collapsed, so the essentials are never hidden. -->
            <div class="collapsed-summary">
                <span class="meta-pill">next <span data-next-run-label>{{ pipeline.next_run_label }}</span></span>
                <span class="meta-pill">{{ pipeline.schedule_text }}</span>
                <span class="meta-pill">{{ pipeline.task_count }} tasks</span>
                <span class="meta-pill">{{ pipeline.execution_summary }}</span>
            </div>
        </div>
        <div class="collapsible-body" id="metadata-body">
        <div class="hero-meta">
            <span class="meta-pill">next <span data-next-run-label>{{ pipeline.next_run_label }}</span></span>
            <span class="meta-pill">{{ pipeline.schedule_text }}</span>
            <span class="meta-pill">{{ pipeline.task_count }} tasks</span>
            <span class="meta-pill">{{ pipeline.execution_summary }}</span>
            <span class="meta-pill">{{ pipeline.retry_summary }}</span>
            {% if pipeline_definition.timeout_seconds %}
            <span class="meta-pill">timeout {{ pipeline_definition.timeout_seconds }}s</span>
            {% endif %}
            <span class="meta-pill">max concurrent {{ pipeline.max_concurrent_runs }}</span>
            {% if pipeline.template_id %}
            <span class="meta-pill">template {{ pipeline.template_id }}</span>
            {% endif %}
            {% if pipeline.deployment_id %}
            <span class="meta-pill">deployment {{ pipeline.deployment_id }}</span>
            {% endif %}
            {% for source in pipeline.triggered_by %}
            <span class="tag">← {{ source }}</span>
            {% endfor %}
            {% for target in pipeline.trigger_targets %}
            <span class="tag">→ {{ target }}</span>
            {% endfor %}
            {% for tag in pipeline.tags %}
            <span class="meta-pill tiny">{{ tag }}</span>
            {% endfor %}
            <span class="meta-pill mono path-value" title="{{ pipeline.primary_entry }}">{{ pipeline.primary_entry }}</span>
        </div>
        {% if pipeline_definition.variables %}
        <div class="hero-meta" style="margin-top:8px;">
            <span class="small-kicker">Variables</span>
            {% for key, value in pipeline_definition.variables.items() %}
            <span class="meta-pill tiny mono">{{ key }}={{ value }}</span>
            {% endfor %}
        </div>
        {% endif %}
        </div>
    </section>

    <section class="panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">Task graph</h2>
                <p class="panel-copy">Select a node to inspect dependencies, see the latest status, and run just that task with its upstream prerequisites.</p>
            </div>
            <div class="legend-row">
                <span class="status-badge success">success</span>
                <span class="status-badge running">running</span>
                <span class="status-badge failed">failed</span>
                <span class="status-badge timed_out">timed out</span>
                <span class="status-badge interrupted">interrupted</span>
                <span class="status-badge skipped">skipped</span>
                <button class="toolbar-button" id="pipeline-focus-toggle" type="button" onclick="togglePipelineFocusPanel()">Hide task focus</button>
            </div>
        </div>
        <div class="dag-operator-grid" id="pipeline-dag-grid">
            <div class="dag-shell">
                <div class="dag-stage" id="dag-stage"></div>
            </div>
            <aside class="task-inspector" id="pipeline-task-inspector">
                <div class="detail-label">Task focus</div>
                <div class="empty-state">Select a task node to inspect it.</div>
            </aside>
        </div>
    </section>

    {% set cli_tasks = tasks | selectattr("task_type", "equalto", "cli") | list %}
    {% if cli_tasks %}
    <section class="panel" id="command-override-panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">Manual command overrides</h2>
                <p class="panel-copy">For manual runs you can replace the configured CLI command with any command directly from the UI. Batch files and shell chains are supported.</p>
            </div>
        </div>
        <div class="command-override-grid">
            {% for task in cli_tasks %}
            <div class="override-field">
                <div class="small-kicker">{{ task.task_id }}</div>
                <textarea data-command-override data-task-id="{{ task.task_id }}">{{ task.command_preview }}</textarea>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <section class="panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">Tasks</h2>
                <p class="panel-copy">Commands and scripts stay visible so operators can see exactly what will execute.</p>
            </div>
        </div>

        <div class="task-grid">
            {% for task in tasks %}
            {% set latest = task_run_map.get(task.task_id) %}
            <article class="task-card pipeline-focus-card {% if latest %}task-card-{{ latest.status }}{% endif %}" data-task-card="{{ task.task_id }}" onclick="focusPipelineTask('{{ task.task_id }}', true)">
                <div class="task-card-header">
                    <div>
                        <h3 class="card-title">{{ task.title }}</h3>
                        <div class="muted mono" style="margin-top:4px;">{{ task.task_id }}</div>
                    </div>
                    <div class="inline-actions">
                        <span class="task-type-badge">{{ task.operator_label }}</span>
                        {% if latest %}
                        <span class="status-badge {{ latest.status }}" data-task-status="{{ task.task_id }}">{{ latest.status }}</span>
                        {% endif %}
                    </div>
                </div>

                <p class="task-description">{{ task.description or "No task-specific description provided." }}</p>

                <div class="task-stats">
                    <span class="meta-pill">depends_on {{ task.depends_on|join(', ') if task.depends_on else 'none' }}</span>
                    {% if latest %}
                    <span class="meta-pill">logs {{ latest.log_count }}</span>
                    <span class="meta-pill">duration {% if latest.duration_seconds is not none %}{{ "%.1fs"|format(latest.duration_seconds) }}{% else %}-{% endif %}</span>
                    {% endif %}
                </div>

                <div style="margin-top:16px;">
                    <div class="small-kicker">Command or target</div>
                    <pre class="code-block" style="margin-top:10px;">{{ task.command_preview }}</pre>
                </div>
            </article>
            {% endfor %}
        </div>
    </section>

    <section class="panel">
        <div class="panel-header">
            <div>
                <h2 class="panel-title">Recent runs</h2>
                <p class="panel-copy">Each run keeps task-level status counts and raw log history.</p>
            </div>
        </div>

        {% if runs %}
        <div class="run-list">
            {% for run in runs %}
            <article class="run-card">
                <div class="run-card-header">
                    <div>
                        <a class="card-title" href="/runs/{{ run.run_id }}">{{ run.run_id }}</a>
                        <p>{{ run.started_at or run.created_at }}</p>
                    </div>
                    <div class="table-actions">
                        <span class="status-badge {{ run.status }}">{{ run.status }}</span>
                        {% if run.status not in ['queued', 'running'] %}
                        <button class="button ghost" onclick="deleteRun('{{ run.run_id }}', '/pipelines/{{ pipeline.pipeline_id }}')">Delete</button>
                        {% endif %}
                    </div>
                </div>
                <div class="meta-list">
                    <span class="meta-pill">trigger {{ run.trigger }}</span>
                    <span class="meta-pill">tasks {{ run.successful_tasks }}/{{ run.task_count }}</span>
                    <span class="meta-pill">logs {{ run.log_count }}</span>
                    <span class="meta-pill">duration {% if run.duration_seconds is not none %}{{ "%.1fs"|format(run.duration_seconds) }}{% else %}-{% endif %}</span>
                </div>
                {% if run.retry_of %}
                <p class="footer-note">retry of {{ run.retry_of }} using {{ run.retry_mode }}</p>
                {% endif %}
                {% if run.error %}
                <p class="footer-note">{{ run.error }}</p>
                {% endif %}
            </article>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">This pipeline has not been executed yet. Use the run button above to create its first run record.</div>
        {% endif %}
    </section>
</div>

<div class="drawer-backdrop" id="preview-backdrop" hidden onclick="closePreview()"></div>
<aside class="side-drawer" id="preview-drawer" aria-hidden="true" aria-labelledby="preview-title">
    <div class="drawer-header">
        <div>
            <div class="detail-label">Execution preview</div>
            <h2 class="panel-title" id="preview-title">Dry run</h2>
            <p class="panel-copy" id="preview-summary">Nothing is executed. This is what a run would do right now.</p>
        </div>
        <div class="inline-actions">
            <button class="button primary tiny-button" type="button" onclick="runFromPreview()">Run it</button>
            <button class="button ghost tiny-button" type="button" onclick="closePreview()">Close</button>
        </div>
    </div>
    <div id="preview-body"><div class="empty-state">Loading preview...</div></div>
</aside>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/@dagrejs/graphlib@2.1.13/dist/graphlib.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@dagrejs/dagre@1.1.2/dist/dagre.min.js" defer></script>
<script>
const pipelineId = "{{ pipeline.pipeline_id }}";
const dagTasks = {{ dag_tasks|tojson }};
const latestTaskRunPayloads = {{ latest_task_run_payloads|tojson }};
let taskStateMap = {{ task_state_map|tojson }};
let pipelinePageActive = {{ 'true' if pipeline.active_runs > 0 or (pipeline.last_run and pipeline.last_run.status in ['queued', 'running']) else 'false' }};
let pipelineDagTasks = dagTasks.map((task) => ({ ...task }));
let currentLatestTaskRuns = latestTaskRunPayloads.slice();
let selectedPipelineTaskId = dagTasks.find((task) => task.task_type !== "pipeline")?.task_id || dagTasks[0]?.task_id || null;

function taskRunMap(taskRuns) {
    return Object.fromEntries(taskRuns.map((task) => [task.task_id, task]));
}

function syncPipelineDagTasks(latestTaskRuns) {
    currentLatestTaskRuns = latestTaskRuns.slice();
    const latestTaskMap = taskRunMap(latestTaskRuns);
    pipelineDagTasks = dagTasks.map((task) => ({
        ...task,
        duration_seconds: latestTaskMap[task.task_id]?.duration_seconds ?? null,
        status: latestTaskMap[task.task_id]?.status ?? taskStateMap[task.task_id] ?? "queued",
    }));
}

function renderPipelineInspector(taskId) {
    const inspector = document.getElementById("pipeline-task-inspector");
    const task = pipelineDagTasks.find((item) => item.task_id === taskId);
    if (!task) {
        inspector.innerHTML = '<div class="detail-label">Task focus</div><div class="empty-state">Select a task node to inspect it.</div>';
        return;
    }
    const latest = taskRunMap(currentLatestTaskRuns)[task.task_id];
    const isTriggerNode = task.task_type === "pipeline";
    const dependencyText = task.depends_on && task.depends_on.length ? task.depends_on.join(", ") : "none";
    const statusText = latest?.status || task.status || "queued";
    const logCount = latest?.log_count ?? 0;
    const durationText = formatDurationSeconds(latest?.duration_seconds ?? task.duration_seconds);
    const outputBlock = latest?.output_preview
        ? `<div class="inspector-section"><div class="small-kicker">Output preview</div><pre class="code-block inspector-code">${escapeHtml(latest.output_preview)}</pre></div>`
        : "";
    const errorBlock = latest?.error ? `<p class="footer-note">${escapeHtml(latest.error)}</p>` : "";
        const actionButton = isTriggerNode
        ? `<a class="button secondary" href="/pipelines/${task.task_id.replace("trigger_", "")}">Open downstream pipeline</a>`
        : `<button class="button primary" onclick="triggerTask('${pipelineId}', '${task.task_id}', { scope: document.getElementById('command-override-panel') || document })">Run this task</button>`;
    inspector.innerHTML = `
        <div class="detail-label">Task focus</div>
        <h3 class="panel-title" style="margin-top:10px;">${escapeHtml(task.title)}</h3>
        <div class="task-stats" style="margin-top:12px;">
            <span class="task-type-badge">${escapeHtml(task.task_type)}</span>
            <span class="status-badge ${escapeHtml(statusText)}">${escapeHtml(statusText)}</span>
            <span class="meta-pill">duration ${escapeHtml(durationText)}</span>
            <span class="meta-pill">logs ${logCount}</span>
        </div>
        <div class="inspector-section">
            <div class="small-kicker">Task id</div>
            <div class="detail-value mono">${escapeHtml(task.task_id)}</div>
        </div>
        <div class="inspector-section">
            <div class="small-kicker">Dependencies</div>
            <div class="detail-value">${escapeHtml(dependencyText)}</div>
        </div>
        <div class="inspector-section">
            <div class="small-kicker">Command or target</div>
            <pre class="code-block inspector-code">${escapeHtml(task.command_preview || "No command preview available.")}</pre>
        </div>
        ${outputBlock}
        ${errorBlock}
        <div class="card-actions" style="margin-top:16px;">
            ${actionButton}
            <button class="button ghost" onclick="copySelectedPipelineTaskCommand()">Copy command</button>
        </div>
    `;
}

function renderPipelineDag() {
    window.renderDagInto(
        "dag-stage",
        pipelineDagTasks,
        taskStateMap,
        {
            selectedNodeId: selectedPipelineTaskId,
            clickableStatuses: ["queued", "running", "success", "failed", "interrupted", "skipped", "cancelled"],
            onNodeClick: (node) => {
                focusPipelineTask(node.task_id, false, false);
            },
            defaultLayout: "flow",
        },
    );
}

function focusPipelineTask(taskId, shouldScroll = false, rerender = true) {
    selectedPipelineTaskId = taskId;
    document.querySelectorAll("[data-task-card]").forEach((card) => {
        card.classList.toggle("task-card-focused", card.dataset.taskCard === taskId);
    });
    renderPipelineInspector(taskId);
    if (rerender) {
        renderPipelineDag();
    }
    if (shouldScroll) {
        const card = document.querySelector(`[data-task-card="${taskId}"]`);
        if (card) {
            card.scrollIntoView({ behavior: "smooth", block: "center" });
        }
    }
}

function copySelectedPipelineTaskCommand() {
    const task = pipelineDagTasks.find((item) => item.task_id === selectedPipelineTaskId);
    if (task) {
        copyText(task.command_preview || "");
    }
}

function refreshTaskStatuses(latestTaskRuns) {
    latestTaskRuns.forEach((task) => {
        const badge = document.querySelector(`[data-task-status="${task.task_id}"]`);
        const card = document.querySelector(`[data-task-card="${task.task_id}"]`);
        if (badge) {
            badge.className = `status-badge ${task.status}`;
            badge.textContent = task.status;
        }
        if (card) {
            card.classList.remove("task-card-success", "task-card-failed", "task-card-interrupted", "task-card-cancelled");
            if (task.status === "success") {
                card.classList.add("task-card-success");
            }
            if (task.status === "failed") {
                card.classList.add("task-card-failed");
            }
            if (task.status === "interrupted") {
                card.classList.add("task-card-interrupted");
            }
            if (task.status === "cancelled") {
                card.classList.add("task-card-cancelled");
            }
        }
        taskStateMap[task.task_id] = task.status;
    });
    syncPipelineDagTasks(latestTaskRuns);
    focusPipelineTask(selectedPipelineTaskId || pipelineDagTasks[0]?.task_id || null, false);
}

async function refreshPipelineDetail() {
    if (!pipelinePageActive) {
        return;
    }
    try {
        const payload = await piplyRequest(`/api/pipelines/${pipelineId}`);
        refreshTaskStatuses(payload.latest_task_runs || []);
        const latestRunStatus = payload.pipeline.last_run ? payload.pipeline.last_run.status : "queued";
        document.querySelectorAll("[data-last-run-status]").forEach((element) => {
            element.className = `status-badge ${latestRunStatus}`;
            element.textContent = payload.pipeline.last_run ? latestRunStatus : "no runs yet";
        });
        document.querySelectorAll("[data-next-run-label]").forEach((element) => {
            element.textContent = payload.pipeline.next_run_label;
        });
        pipelinePageActive = payload.pipeline.active_runs > 0 || ["queued", "running"].includes(latestRunStatus);
    } catch (error) {
        pipelinePageActive = false;
    }
}

// Collapsing metadata and the task focus panel hands the space to the DAG,
// which is the reason to be on this page. Both choices persist per browser.
const METADATA_KEY = "piply.pipelineMetadataOpen";
const FOCUS_KEY = "piply.pipelineFocusOpen";

function applyMetadataState(open, { persist = true } = {}) {
    const panel = document.getElementById("metadata-panel");
    const toggle = document.getElementById("metadata-toggle");
    if (!panel || !toggle) return;
    panel.classList.toggle("collapsed", !open);
    toggle.setAttribute("aria-expanded", String(open));
    if (persist) window.localStorage.setItem(METADATA_KEY, open ? "true" : "false");
}

function toggleMetadataPanel() {
    const panel = document.getElementById("metadata-panel");
    applyMetadataState(panel.classList.contains("collapsed"));
}

function applyPipelineFocusState(open, { persist = true, rerender = true } = {}) {
    const grid = document.getElementById("pipeline-dag-grid");
    const button = document.getElementById("pipeline-focus-toggle");
    if (!grid || !button) return;
    grid.classList.toggle("inspector-collapsed", !open);
    button.textContent = open ? "Hide task focus" : "Show task focus";
    button.classList.toggle("active", !open);
    if (persist) window.localStorage.setItem(FOCUS_KEY, open ? "true" : "false");
    // The SVG is laid out to its container, so it has to be redrawn.
    if (rerender) renderPipelineDag();
}

function togglePipelineFocusPanel() {
    const grid = document.getElementById("pipeline-dag-grid");
    applyPipelineFocusState(grid.classList.contains("inspector-collapsed"));
}

function renderPreview(preview) {
    const summary = [
        `${preview.runnable_task_count}/${preview.task_count} tasks would run`,
        `${preview.execution_mode} execution`,
        preview.schedule_text,
    ];
    document.getElementById("preview-summary").textContent = summary.join(" · ");

    const variableRows = Object.entries(preview.variables || {})
        .map(([key, value]) => `<span class="meta-pill tiny mono">${escapeHtml(key)}=${escapeHtml(String(value))}</span>`)
        .join("");
    const entityRows = Object.entries(preview.entities || {})
        .map(([key, values]) => `<span class="meta-pill tiny mono">${escapeHtml(key)}: ${escapeHtml(values.join(", "))}</span>`)
        .join("");

    const stages = (preview.stages || []).map((stage, index) => {
        const tasks = stage.map((taskId) => {
            const task = preview.tasks.find((item) => item.task_id === taskId);
            if (!task) return "";
            const badges = [
                `<span class="meta-pill tiny">${escapeHtml(task.task_type)}</span>`,
                task.priority ? `<span class="meta-pill tiny">priority ${task.priority}</span>` : "",
                task.timeout_seconds ? `<span class="meta-pill tiny">timeout ${task.timeout_seconds}s</span>` : "",
                task.run_if ? `<span class="meta-pill tiny mono">run_if ${escapeHtml(task.run_if)}</span>` : "",
                (task.artifact_paths || []).length ? `<span class="meta-pill tiny">${task.artifact_paths.length} artifact glob(s)</span>` : "",
            ].filter(Boolean).join("");
            return `
                <div class="preview-task ${task.will_run ? "" : "skipped"}">
                    <div><span class="status-badge ${task.will_run ? "success" : "skipped"}">${task.will_run ? "run" : "skip"}</span></div>
                    <div>
                        <div><strong>${escapeHtml(task.title)}</strong> <span class="muted mono">${escapeHtml(task.task_id)}</span></div>
                        <div class="pipeline-row-tags">${badges}</div>
                        <pre class="code-block inspector-code" style="margin-top:6px;">${escapeHtml(task.command)}</pre>
                        ${task.skip_reason ? `<p class="footer-note">${escapeHtml(task.skip_reason)}</p>` : ""}
                    </div>
                </div>`;
        }).join("");
        return `<div class="preview-stage"><div class="small-kicker">Stage ${index + 1}</div>${tasks}</div>`;
    }).join("");

    const warnings = (preview.warnings || []).length
        ? `<div class="inspector-section"><div class="small-kicker">Warnings</div>${preview.warnings.map((item) => `<p class="footer-note">${escapeHtml(item)}</p>`).join("")}</div>`
        : "";

    document.getElementById("preview-body").innerHTML = `
        ${variableRows ? `<div class="inspector-section"><div class="small-kicker">Resolved variables</div><div class="pipeline-row-tags">${variableRows}</div></div>` : ""}
        ${entityRows ? `<div class="inspector-section"><div class="small-kicker">Expanded entities</div><div class="pipeline-row-tags">${entityRows}</div></div>` : ""}
        <div class="inspector-section">
            <div class="small-kicker">Execution order</div>
            ${stages || '<div class="empty-state">No tasks to preview.</div>'}
        </div>
        ${preview.triggers_on_success.length ? `<div class="inspector-section"><div class="small-kicker">Downstream on success</div><div class="pipeline-row-tags">${preview.triggers_on_success.map((item) => `<span class="meta-pill tiny">${escapeHtml(item)}</span>`).join("")}</div></div>` : ""}
        ${warnings}
    `;
}

async function openPreview() {
    document.getElementById("preview-backdrop").hidden = false;
    document.getElementById("preview-drawer").classList.add("open");
    document.getElementById("preview-drawer").setAttribute("aria-hidden", "false");
    document.body.classList.add("drawer-open");
    document.getElementById("preview-body").innerHTML = '<div class="empty-state">Loading preview...</div>';
    try {
        const overrides = collectCommandOverrides(document.getElementById("command-override-panel") || document);
        renderPreview(await piplyRequest(`/api/pipelines/${pipelineId}/preview`, {
            method: "POST",
            body: JSON.stringify({ command_overrides: overrides }),
        }));
    } catch (error) {
        document.getElementById("preview-body").innerHTML = `<div class="empty-state">${escapeHtml(error.message)}</div>`;
    }
}

function closePreview() {
    document.getElementById("preview-backdrop").hidden = true;
    document.getElementById("preview-drawer").classList.remove("open");
    document.getElementById("preview-drawer").setAttribute("aria-hidden", "true");
    document.body.classList.remove("drawer-open");
}

function runFromPreview() {
    closePreview();
    triggerPipeline(pipelineId, { scope: document.getElementById("command-override-panel") || document });
}

document.addEventListener("DOMContentLoaded", () => {
    // Metadata starts collapsed so the graph leads; the focus panel starts open.
    applyMetadataState(window.localStorage.getItem(METADATA_KEY) === "true", { persist: false });
    applyPipelineFocusState(window.localStorage.getItem(FOCUS_KEY) !== "false", { persist: false, rerender: false });
    syncPipelineDagTasks(latestTaskRunPayloads);
    focusPipelineTask(selectedPipelineTaskId, false);
    if (pipelinePageActive) {
        setInterval(refreshPipelineDetail, 4000);
    }
    // /pipelines/<id>?preview=1 opens the drawer straight from the listing page.
    if (new URLSearchParams(window.location.search).get("preview") === "1") {
        openPreview();
    }
});

document.addEventListener("keydown", (event) => {
    if (event.key === "Escape") {
        closePreview();
    }
});
</script>
{% endblock %}