{% extends "base.html" %}

{% block extra_head %}
<style>
.ai-hint-btn {
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    color: white !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 3px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ai-hint-btn:hover {
    background: rgba(0, 0, 0, 0.5) !important;
    border-color: white !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.ai-hint-btn:active {
    background: rgba(0, 0, 0, 0.6) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
}

/* Architecture header styling for scminfo status */
.arch-header code.text-success {
    color: #28a745 !important; /* green - up to date */
    font-weight: bold;
}

.arch-header code.text-danger {
    color: #dc3545 !important; /* red - outdated */
    font-weight: bold;
}

/* Ensure tooltips show newlines properly */
.arch-header {
    white-space: pre-line;
}

/* Build log syntax highlighting */
#buildLogContent {
    line-height: 1.4;
}

#buildLogContent .log-error {
    background-color: #fee;
    color: #c00;
    display: block;
    padding: 1px 0;
}

#buildLogContent .log-error-current {
    background-color: #fcc;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.4);
}

#buildLogContent .log-warning {
    background-color: #fff3cd;
    color: #856404;
    display: block;
    padding: 1px 0;
}

#buildLogContent .log-info {
    color: #0066cc;
    display: block;
}

#buildLogContent .log-success {
    color: #28a745;
    display: block;
}

#buildLogContent .log-debug {
    color: #6c757d;
    display: block;
}
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/" class="project-link">Home</a></li>
                <li class="breadcrumb-item"><a href="/projects" class="project-link">Projects</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ project_name }}</li>
            </ol>
        </nav>

        <!-- Project Details -->
        <div class="card border-0 shadow mb-4">
            <div class="card-header bg-gradient border-0 d-flex justify-content-between align-items-center">
                <h2 class="mb-0">
                    <i class="fas fa-industry text-primary"></i>
                    {% if project_url %}
                        <a href="{{ project_url }}" target="_blank" rel="noopener noreferrer" class="text-decoration-none text-dark">{{ title }}</a>
                    {% else %}
                        {{ title }}
                    {% endif %}
                </h2>
                <div>
                    <div class="btn-group me-2">
                        <a href="/status/{{ project_name }}/_table" class="btn btn-outline-info" target="_blank" title="Open build matrix SVG badge">
                            <i class="fas fa-image"></i> Matrix Badge
                        </a>
                        <button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="visually-hidden">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/status/{{ project_name }}/_table" target="_blank"><i class="fas fa-table"></i> Full Matrix Badge</a></li>
                            <li><a class="dropdown-item" href="/status/{{ project_name }}/_table?compact=true" target="_blank"><i class="fas fa-list"></i> Compact Summary Badge</a></li>
                        </ul>
                    </div>
                    <button class="btn btn-outline-warning" id="markProjectBtn" data-project="{{ project_name }}">
                        <i class="far fa-star"></i> <span id="markBtnText">Mark</span>
                    </button>
                </div>
            </div>

            <!-- Tabs Navigation -->
            <ul class="nav nav-tabs nav-tabs-dark px-3 pt-3" id="projectTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">
                        <i class="fas fa-info-circle"></i> Overview
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="monitor-tab" data-bs-toggle="tab" data-bs-target="#monitor" type="button" role="tab">
                        <i class="fas fa-chart-line"></i> Monitor
                    </button>
                </li>
            </ul>

            <!-- Tab Content -->
            <div class="tab-content card-body">
                <!-- Overview Tab -->
                <div class="tab-pane fade show active" id="overview" role="tabpanel">
                    {% if description == "Project not found" %}
                    <div class="alert alert-danger mb-4" role="alert">
                        <i class="fas fa-exclamation-circle"></i>
                        <strong>Project not found</strong>
                    </div>
                    {% elif is_legacy %}
                    <div class="alert alert-warning mb-4" role="alert">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Legacy Project</strong> - This project does not have SCM synchronization configured, functionality in this UI is limited.
                    </div>
                    {% endif %}

                    <!-- Two-column layout for top section -->
                    <div class="row">
                        <!-- Left Column: Description and Source Repository -->
                        <div class="col-lg-5">
                            {% if description and description != "Project not found" %}
                            <div class="mb-4">
                                <h5 class="text-muted mb-2">Description</h5>
                                <p>{{ description }}</p>
                            </div>
                            {% endif %}

                            {% if scmsync_url %}
                            <div class="mb-4">
                                <h5 class="text-muted mb-2">Source Repository</h5>
                                <div class="d-flex gap-2 flex-wrap mb-2">
                                    <a href="{{ scmsync_url }}" target="_blank" class="btn btn-sm btn-outline-primary" title="View in Gitea">
                                        <i class="fab fa-git-alt"></i>
                                    </a>
                                    {% if open_issues is not none %}
                                    <a href="{{ scmsync_url }}/issues" target="_blank" class="btn btn-outline-warning">
                                        <i class="fas fa-exclamation-circle"></i> Issues
                                        <span class="badge bg-warning text-dark">{{ open_issues }}</span>
                                    </a>
                                    {% endif %}
                                    {% if open_prs is not none %}
                                    <a href="{{ scmsync_url }}/pulls" target="_blank" class="btn btn-outline-success">
                                        <i class="fas fa-code-branch"></i> Pull Requests
                                        <span class="badge bg-success">{{ open_prs }}</span>
                                    </a>
                                    {% endif %}
                                </div>
                                {% if branch_name %}
                                <div class="mt-2">
                                    <span class="text-muted"><i class="fas fa-code-branch"></i> Tracking branch:</span>
                                    <code class="ms-2">{{ branch_name }}</code>
                                </div>
                                {% endif %}
                            </div>
                            {% endif %}
                        </div>

                        <!-- Right Column: Build Results -->
                        <div class="col-lg-7">
                            <div class="mb-4" id="buildOverview">
                                <h5 class="text-muted mb-2">
                                    <i class="fas fa-chart-bar"></i> Build Results
                                </h5>
                                <div class="text-center py-3" id="buildOverviewLoader">
                                    <div class="spinner-border text-info" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <p class="text-muted mt-2">Loading build results...</p>
                                </div>
                                <div id="buildOverviewContent" style="display: none;">
                                    <!-- Overview content will be inserted here -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Full-width Build Area table -->
                    {% if scmsync_packages %}
                    <div class="mb-4">
                        <h5 class="text-muted mb-2">
                            <i class="fas fa-cubes"></i> Build Area
                            <span class="badge bg-primary" id="buildAreaCount">{{ scmsync_packages|length }}</span>
                        </h5>

                        <!-- Search box and pagination controls -->
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="flex-grow-1 me-3">
                                <input type="text"
                                       id="buildAreaSearch"
                                       class="form-control search-box"
                                       placeholder="🔍 Search packages..."
                                       onkeyup="filterBuildArea()">
                                <small class="text-muted" id="buildAreaSearchResults"></small>
                            </div>
                            <div class="d-flex align-items-center">
                                <label class="me-2 mb-0 text-muted">Per page:</label>
                                <select id="packagesPerPage" class="form-select form-select-sm" style="width: 80px;" onchange="changePackagesPerPage()">
                                    <option value="50">50</option>
                                    <option value="100" selected>100</option>
                                    <option value="200">200</option>
                                    <option value="500">500</option>
                                    <option value="all">All</option>
                                </select>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th>Package Name</th>
                                        <th style="width: 150px;">Git Repository</th>
                                    </tr>
                                </thead>
                                <tbody id="buildAreaTableBody">
                                    {% for package in scmsync_packages %}
                                    {% set pkg_org = package_orgs.get(package, gitea_org) %}
                                    <tr class="build-area-row" data-package="{{ package }}">
                                        <td>
                                            <a href="/packages/{{ package }}?org={{ pkg_org }}&project={{ project_name }}" class="project-link">
                                                <code>{{ package }}</code>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="{{ gitea_url }}/{{ pkg_org }}/{{ package }}" target="_blank" class="btn btn-sm btn-outline-info" title="View in Gitea">
                                                <i class="fab fa-git-alt"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination controls -->
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div class="text-muted" id="packagesPaginationInfo"></div>
                            <nav>
                                <ul class="pagination pagination-sm mb-0" id="packagesPagination"></ul>
                            </nav>
                        </div>
                    </div>
                    {% endif %}

                    <!-- README section -->
                    {% if readme_content %}
                    <div class="mb-4">
                        <h5 class="text-muted mb-2"><i class="fas fa-book"></i> README</h5>
                        <div class="readme-content card bg-dark border-secondary p-4">
                            {{ readme_content }}
                        </div>
                    </div>
                    {% endif %}
                </div>

                <!-- Monitor Tab -->
                <div class="tab-pane fade" id="monitor" role="tabpanel">
                    <!-- Filter Buttons -->
                    <div class="mb-3 p-3 bg-dark rounded" id="monitorFilters" style="display: none;">
                        <!-- First row: Repositories, Architectures, Last Result, Auto-refresh -->
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <div class="dropdown d-inline-block me-2">
                                    <button class="btn btn-sm btn-outline-info dropdown-toggle" type="button" id="repoDropdown" data-bs-toggle="dropdown">
                                        <span id="repoFilterCount">Repositories</span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-dark" id="repositoryFilters" style="max-height: 300px; overflow-y: auto;">
                                        <!-- Dynamically populated -->
                                    </ul>
                                </div>
                                <div class="dropdown d-inline-block me-2">
                                    <button class="btn btn-sm btn-outline-warning dropdown-toggle" type="button" id="archDropdown" data-bs-toggle="dropdown">
                                        <span id="archFilterCount">Architectures</span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-dark" id="architectureFilters">
                                        <!-- Dynamically populated -->
                                    </ul>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-secondary me-2" id="lastResultBtn" onclick="toggleLastResult()">
                                    <i class="fas fa-history"></i> Last Result: <span id="lastResultStatus">OFF</span>
                                </button>
                                <button type="button" class="btn btn-sm btn-info" id="autoRefreshBtn" onclick="toggleAutoRefresh()">
                                    <i class="fas fa-sync"></i> Auto-refresh: <span id="autoRefreshStatus">ON</span>
                                </button>
                            </div>
                            <div>
                                <small class="text-muted" id="lastUpdateTime"></small>
                            </div>
                        </div>
                        <!-- Second row: Status filter buttons -->
                        <div>
                            <strong class="text-muted me-2">Status:</strong>
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-success" id="filterSuccess" onclick="toggleFilter('success')">
                                    <i class="fas fa-check-circle"></i> Success
                                </button>
                                <button type="button" class="btn btn-sm btn-danger" id="filterFail" onclick="toggleFilter('fail')">
                                    <i class="fas fa-times-circle"></i> Failure
                                </button>
                                <button type="button" class="btn btn-sm btn-warning" id="filterBlocked" onclick="toggleFilter('blocked')">
                                    <i class="fas fa-pause-circle"></i> Blocked
                                </button>
                                <button type="button" class="btn btn-sm btn-info" id="filterWip" onclick="toggleFilter('wip')">
                                    <i class="fas fa-spinner"></i> Active
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="filterInactive" onclick="toggleFilter('inactive')" style="opacity: 0.5;">
                                    <i class="fas fa-ban"></i> Inactive
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status" id="monitorLoader">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                    <div id="monitorContent" style="display: none;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Build Log Modal -->
<div class="modal fade" id="buildLogModal" tabindex="-1" aria-labelledby="buildLogModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" style="max-height: 95vh; margin: 2.5vh auto;">
        <div class="modal-content" style="max-height: 95vh; display: flex; flex-direction: column;">
            <div class="modal-header" style="flex-shrink: 0;">
                <h5 class="modal-title" id="buildLogModalLabel">
                    <i class="fas fa-file-alt"></i> <span id="logTitle"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0" style="overflow: hidden; flex: 1; min-height: 0; display: flex; flex-direction: column;">
                <div id="buildLogLoader" class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="text-muted mt-2">Loading build log...</p>
                </div>
                <div id="buildLogError" class="alert alert-danger m-3" style="display: none;">
                    <i class="fas fa-exclamation-triangle"></i> <span id="buildLogErrorMsg"></span>
                </div>
                <!-- Error details for broken/unresolvable builds -->
                <div id="buildErrorDetails" class="alert alert-danger m-3" style="display: none; flex-shrink: 0; max-height: 30vh; overflow-y: auto;">
                    <h6 class="alert-heading"><i class="fas fa-exclamation-triangle"></i> Build Error Details</h6>
                    <hr>
                    <pre id="buildErrorDetailsContent" class="mb-0" style="white-space: pre-wrap; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; font-size: 0.85rem; background: transparent; border: none; padding: 0; color: inherit;"></pre>
                    <hr class="my-2">
                    <small class="text-muted"><i class="fas fa-info-circle"></i> Note: The build log below (if present) is from a previous build attempt.</small>
                </div>
                <pre id="buildLogContent" class="bg-light border m-0 p-3" style="flex: 1; min-height: 0; overflow-y: auto; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; font-size: 0.85rem; display: none; color: #2c3e50;"></pre>
            </div>
            <div class="modal-footer" style="flex-shrink: 0; flex-direction: column; align-items: stretch;">
                <div class="d-flex w-100 mb-2">
                    <div class="me-auto">
                        <button type="button" class="btn btn-outline-danger me-2" id="logJumpToError" title="Jump to next error">
                            <i class="fas fa-exclamation-triangle"></i> Next Error
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="logJumpToBottom" title="Jump to end of log" style="display: none;">
                            <i class="fas fa-arrow-down"></i> Jump to End
                        </button>
                    </div>
                    <button type="button" class="btn btn-primary me-3" id="logAIHintBtn" style="display: none;">
                        <i class="fas fa-robot"></i> Copy AI Prompt
                    </button>
                    <button type="button" class="btn btn-outline-info me-2" id="logRefreshBtn" title="Refresh log" style="display: none;">
                        <i class="fas fa-sync-alt"></i> Refresh
                    </button>
                    <button type="button" class="btn btn-outline-warning me-2" id="logLoadFullBtn" title="Load full log file" style="display: none;">
                        <i class="fas fa-file-download"></i> Load Full Log
                    </button>
                    <a id="logDownloadLink" class="btn btn-outline-secondary me-2" href="#" download title="Download raw build log">
                        <i class="fas fa-download"></i> Raw Download
                    </a>
                    <button type="button" class="btn btn-outline-primary" id="logShareLink" title="Copy link to this log">
                        <i class="fas fa-share-alt"></i> Share Log
                    </button>
                </div>
                <div class="d-flex w-100 align-items-center">
                    <div class="form-check me-3">
                        <input class="form-check-input" type="checkbox" id="logSearchBackward" checked>
                        <label class="form-check-label" for="logSearchBackward">
                            Backward search
                        </label>
                    </div>
                    <div class="input-group flex-grow-1 me-3">
                        <input type="text" class="form-control search-box" id="logSearchInput" placeholder="Search in log...">
                        <button class="btn btn-outline-primary" type="button" id="logSearchPrev" title="Previous match">
                            <i class="fas fa-chevron-up"></i>
                        </button>
                        <button class="btn btn-outline-primary" type="button" id="logSearchNext" title="Next match">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <button class="btn btn-outline-secondary" type="button" id="logSearchClear" title="Clear search">
                            <i class="fas fa-times"></i>
                        </button>
                        <span class="input-group-text" id="logSearchCount">0/0</span>
                    </div>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
console.log('=== PROJECT DETAIL JAVASCRIPT LOADED ===');
console.log('Project name: {{ project_name }}');

// Backend identifier for cookie namespacing
const BACKEND_ID = '{{ backend_id }}';
const PROJECT_NAME = '{{ project_name }}';

// AI hints configuration
const SHOW_AI_HINTS = {{ 'true' if show_ai_hints else 'false' }};
const AI_HINTS = {{ ai_hints | tojson | safe }};
const GITEA_SERVER = '{{ gitea_url if gitea_url else "https://src.opensuse.org" }}';
const GITEA_ORGANISATION = '{{ gitea_org if gitea_org else "pool" }}';
// MY_INSTANCE_URL should be this Flask application's URL, not the OBS backend
const MY_INSTANCE_URL = window.location.origin; // e.g., http://localhost:5000
console.log('AI hints enabled:', SHOW_AI_HINTS, 'Data:', AI_HINTS);

{% if backend_config and backend_config.download_url %}
const DOWNLOAD_URL = '{{ backend_config.download_url }}';
{% else %}
const DOWNLOAD_URL = '';
{% endif %}

// Escape project name: replace : with :/
function escapeProjectName(project) {
    return project.replace(/:/g, ':/');
}

// Declare variables at the top
let monitorLoaded = false;

// Track if filters were explicitly set (by user click or URL)
let filtersExplicitlySet = false;

// Monitor filter state
let activeFilters = {
    success: true,
    fail: true,
    blocked: true,
    wip: true,
    inactive: false
};

// Monitor sort mode: 'priority' (default) or 'alphabetical'
let monitorSortMode = 'priority';

// Auto-refresh state
let monitorChecksum = null;
let monitorRefreshInterval = null;
let monitorAbortController = null;
let autoRefreshEnabled = true; // Enable by default
let lastResultEnabled = false;
const MONITOR_TIMEOUT_MS = 20000; // 20 seconds timeout for oldstate requests (reduced to prevent UI hangs)

// Repository and Architecture filters
let activeRepositories = new Set();
let activeArchitectures = new Set();

// Store the full list of available repos/archs (preserved from initial unfiltered load)
// These are scoped per-project
if (typeof window.projectRepoArchCache === 'undefined') {
    window.projectRepoArchCache = {};
}

const currentProjectName = '{{ project_name }}';

// Initialize or retrieve cache for this project
if (!window.projectRepoArchCache[currentProjectName]) {
    window.projectRepoArchCache[currentProjectName] = {
        repositories: new Set(),
        architectures: new Set(),
        hasLoaded: false
    };
    console.log('[Cache] Initialized new cache for project:', currentProjectName);

    // Cleanup: Keep only last 10 projects in cache to prevent memory leaks
    const cacheKeys = Object.keys(window.projectRepoArchCache);
    if (cacheKeys.length > 10) {
        // Remove oldest entries (simple cleanup - could be improved with LRU)
        const toRemove = cacheKeys.slice(0, cacheKeys.length - 10);
        toRemove.forEach(key => {
            delete window.projectRepoArchCache[key];
            console.log('[Cache] Removed old cache for project:', key);
        });
    }
}

// Get reference to this project's cache
const projectCache = window.projectRepoArchCache[currentProjectName];

// Categorize build status
function categorizeStatus(status) {
    const successStates = ['succeeded'];
    const failStates = ['failed', 'unresolvable', 'broken'];
    const wipStates = ['scheduled', 'building', 'dispatching', 'signing'];
    const inactiveStates = ['disabled', 'excluded'];

    if (successStates.includes(status)) return 'success';
    if (failStates.includes(status)) return 'fail';
    if (wipStates.includes(status)) return 'wip';
    if (inactiveStates.includes(status)) return 'inactive';
    return null;
}

// Update filter button visual states
function updateFilterButtons() {
    const buttonConfig = {
        success: { id: 'filterSuccess', color: 'success' },
        fail: { id: 'filterFail', color: 'danger' },
        blocked: { id: 'filterBlocked', color: 'warning' },
        wip: { id: 'filterWip', color: 'info' },
        inactive: { id: 'filterInactive', color: 'secondary' }
    };

    for (const [filterName, isActive] of Object.entries(activeFilters)) {
        const config = buttonConfig[filterName];
        if (!config) continue;

        const btn = document.getElementById(config.id);
        if (btn) {
            // Remove all button classes
            btn.className = 'btn btn-sm';

            if (isActive) {
                // Active: solid color button
                btn.classList.add(`btn-${config.color}`);
                btn.style.opacity = '1';
            } else {
                // Inactive: outline button with reduced opacity
                btn.classList.add(`btn-outline-${config.color}`);
                btn.style.opacity = '0.5';
            }
        }
    }
}

// Toggle filter
function toggleFilter(filterName) {
    filtersExplicitlySet = true;  // Mark as explicitly set by user
    activeFilters[filterName] = !activeFilters[filterName];
    updateFilterButtons();
    updateURLWithFilters();

    // Re-render monitor content to apply pre-filtering with new filter settings
    // This ensures we show the first 1000 packages that match the current filters
    if (monitorLoaded) {
        console.log('Filter toggled, re-rendering monitor with new filters');
        loadMonitorTab(true);  // force=true to reload
    } else {
        applyFilters();
    }
}

function toggleSortMode() {
    // Toggle between priority and alphabetical
    monitorSortMode = (monitorSortMode === 'priority') ? 'alphabetical' : 'priority';

    // Re-render monitor to apply new sort (button will update automatically)
    if (monitorLoaded) {
        console.log('Sort mode toggled to:', monitorSortMode);
        loadMonitorTab(true);  // force=true to reload with new sort
    }
}

// Update URL with current filter state
function updateURLWithFilters(hash = null) {
    const url = new URL(window.location);

    // Add status filters
    const activeStatuses = [];
    for (const [status, isActive] of Object.entries(activeFilters)) {
        if (isActive) activeStatuses.push(status);
    }
    if (activeStatuses.length > 0) {
        url.searchParams.set('status', activeStatuses.join(','));
    } else {
        url.searchParams.delete('status');
    }

    // Add repository filter
    if (activeRepositories.size > 0) {
        url.searchParams.set('repos', Array.from(activeRepositories).join(','));
    } else {
        url.searchParams.delete('repos');
    }

    // Add architecture filter
    if (activeArchitectures.size > 0) {
        url.searchParams.set('archs', Array.from(activeArchitectures).join(','));
    } else {
        url.searchParams.delete('archs');
    }

    // Set hash if provided
    if (hash !== null) {
        url.hash = hash;
    }

    console.log('updateURLWithFilters: setting URL to', url.toString());

    // Update URL without reloading page
    window.history.replaceState({}, '', url);
}

// Load filters from URL parameters
function loadFiltersFromURL() {
    const url = new URL(window.location);

    // Load status filters
    const statusParam = url.searchParams.get('status');
    if (statusParam) {
        const statuses = statusParam.split(',').map(s => s.trim());
        activeFilters.success = statuses.includes('success');
        activeFilters.fail = statuses.includes('fail');
        activeFilters.blocked = statuses.includes('blocked');
        activeFilters.wip = statuses.includes('wip');
        activeFilters.inactive = statuses.includes('inactive');
        console.log('Loaded status filters from URL:', statuses, activeFilters);
    }

    // Load repository filters
    const reposParam = url.searchParams.get('repos');
    if (reposParam) {
        activeRepositories = new Set(reposParam.split(',').map(r => r.trim()));
        console.log('Loaded repository filters from URL:', Array.from(activeRepositories));
    }

    // Load architecture filters
    const archsParam = url.searchParams.get('archs');
    if (archsParam) {
        activeArchitectures = new Set(archsParam.split(',').map(a => a.trim()));
        console.log('Loaded architecture filters from URL:', Array.from(activeArchitectures));
    }

    // Mark filters as explicitly set if any were loaded from URL
    const hasFilters = statusParam || reposParam || archsParam;
    if (hasFilters) {
        filtersExplicitlySet = true;
    }

    return hasFilters;
}

// Filter monitor tab by clicking on Build Results badges
async function filterMonitor(repo, arch, statusFilter) {
    console.log(`filterMonitor called: repo=${repo}, arch=${arch}, status=${statusFilter}`);

    // Mark filters as explicitly set to prevent large project defaults from overriding
    filtersExplicitlySet = true;

    // Fetch build results to check if there's only 1 result
    try {
        const redisEnabled = {{ 'true' if redis_enabled else 'false' }};
        let fetchUrl;

        if (redisEnabled) {
            // Use Redis-backed API endpoint (use OBS API style for server-side filtering)
            fetchUrl = '/api/projects/{{ project_name }}/_result';
        } else {
            // Use OBS proxy endpoint (use OBS API style for server-side filtering)
            fetchUrl = '/obs/build/{{ project_name }}/_result';
        }

        fetchUrl += `?repository=${encodeURIComponent(repo)}&arch=${encodeURIComponent(arch)}`;

        const response = await fetch(fetchUrl);
        const xml = await response.text();
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(xml, 'text/xml');

        // Find matching packages
        const matchingPackages = [];
        const results = xmlDoc.querySelectorAll('result');

        results.forEach(result => {
            const resultRepo = result.getAttribute('repository');
            const resultArch = result.getAttribute('arch');

            if (resultRepo === repo && resultArch === arch) {
                const statuses = result.querySelectorAll('status');
                statuses.forEach(status => {
                    const packageName = status.getAttribute('package');
                    const code = status.getAttribute('code');
                    const category = categorizeStatus(code);

                    // Check if status matches the filter
                    if ((statusFilter === 'success' && category === 'success') ||
                        (statusFilter === 'fail' && category === 'fail') ||
                        (statusFilter === 'blocked' && category === 'blocked') ||
                        (statusFilter === 'wip' && category === 'wip') ||
                        (statusFilter === 'inactive' && category === 'inactive')) {

                        const detailsElement = status.querySelector('details');
                        const details = detailsElement ? detailsElement.textContent.trim() : '';

                        matchingPackages.push({
                            package: packageName,
                            code: code,
                            details: details
                        });
                    }
                });
            }
        });

        console.log(`Found ${matchingPackages.length} matching package(s)`);

        // If exactly 1 match, open build log directly
        if (matchingPackages.length === 1) {
            const pkg = matchingPackages[0];
            console.log('Only 1 result, opening build log directly');
            showBuildLog('{{ project_name }}', repo, arch, pkg.package, pkg.code, pkg.details);
            return;
        }
    } catch (error) {
        console.error('Error checking build results:', error);
        // Fall through to normal behavior
    }

    // Set all status filters to false except the clicked one
    activeFilters.success = (statusFilter === 'success');
    activeFilters.fail = (statusFilter === 'fail');
    activeFilters.blocked = (statusFilter === 'blocked');
    activeFilters.wip = (statusFilter === 'wip');
    activeFilters.inactive = (statusFilter === 'inactive');

    // Set repository and architecture filters to only the clicked ones
    activeRepositories = new Set([repo]);
    activeArchitectures = new Set([arch]);

    console.log('After setting filters in filterMonitor:');
    console.log('  activeArchitectures:', Array.from(activeArchitectures));
    console.log('  activeRepositories:', Array.from(activeRepositories));
    console.log('  activeFilters:', activeFilters);

    // Update URL with filters and set hash to #monitor
    updateURLWithFilters('monitor');

    // Check if monitor is already loaded - if so, force a reload to rebuild UI
    if (monitorLoaded) {
        console.log('Monitor already loaded, forcing reload to apply new filters');
        loadMonitorTab(true);  // force=true to reload even though monitorLoaded is true
    }

    // Switch to monitor tab
    const monitorTab = document.getElementById('monitor-tab');
    if (monitorTab) {
        const bsTab = new bootstrap.Tab(monitorTab);
        bsTab.show();
    }

    // If monitor wasn't loaded, filters will be applied when shown.bs.tab fires and calls loadMonitorTab()
}

// Select all repositories
function selectAllRepositories(event) {
    event.stopPropagation();
    filtersExplicitlySet = true;  // Mark as explicitly set by user
    document.querySelectorAll('#repositoryFilters input[type="checkbox"]').forEach(checkbox => {
        activeRepositories.add(checkbox.value);
    });
    updateRepoArchButtons();
    // Don't apply filters immediately - wait for dropdown close
}

// Select no repositories
function selectNoRepositories(event) {
    event.stopPropagation();
    filtersExplicitlySet = true;  // Mark as explicitly set by user
    activeRepositories.clear();
    updateRepoArchButtons();
    // Don't apply filters immediately - wait for dropdown close
}

// Select all architectures
function selectAllArchitectures(event) {
    event.stopPropagation();
    filtersExplicitlySet = true;  // Mark as explicitly set by user
    document.querySelectorAll('#architectureFilters input[type="checkbox"]').forEach(checkbox => {
        activeArchitectures.add(checkbox.value);
    });
    updateRepoArchButtons();
    // Don't apply filters immediately - wait for dropdown close
}

// Select no architectures
function selectNoArchitectures(event) {
    event.stopPropagation();
    filtersExplicitlySet = true;  // Mark as explicitly set by user
    activeArchitectures.clear();
    updateRepoArchButtons();
    // Don't apply filters immediately - wait for dropdown close
}

// Toggle repository filter
function toggleRepository(repo) {
    filtersExplicitlySet = true;  // Mark as explicitly set by user
    if (activeRepositories.has(repo)) {
        activeRepositories.delete(repo);
    } else {
        activeRepositories.add(repo);
    }
    updateRepoArchButtons();
    // Don't apply filters immediately - wait for dropdown close
}

// Toggle architecture filter
function toggleArchitecture(arch) {
    filtersExplicitlySet = true;  // Mark as explicitly set by user
    if (activeArchitectures.has(arch)) {
        activeArchitectures.delete(arch);
    } else {
        activeArchitectures.add(arch);
    }
    updateRepoArchButtons();
    // Don't apply filters immediately - wait for dropdown close
}

// Update repository and architecture dropdown states
function updateRepoArchButtons() {
    // Update repository checkboxes
    document.querySelectorAll('#repositoryFilters input[type="checkbox"]').forEach(checkbox => {
        const repo = checkbox.value;
        checkbox.checked = activeRepositories.has(repo);
    });

    // Update architecture checkboxes
    document.querySelectorAll('#architectureFilters input[type="checkbox"]').forEach(checkbox => {
        const arch = checkbox.value;
        checkbox.checked = activeArchitectures.has(arch);
    });

    // Update count labels
    updateFilterCounts();
}

// Update filter count labels
function updateFilterCounts() {
    const totalRepos = document.querySelectorAll('#repositoryFilters input[type="checkbox"]').length;
    const activeRepoCount = activeRepositories.size;
    const repoLabel = document.getElementById('repoFilterCount');
    if (repoLabel) {
        if (activeRepoCount === totalRepos) {
            repoLabel.textContent = `Repositories (${totalRepos})`;
        } else if (activeRepoCount === 0) {
            repoLabel.textContent = 'Repositories (none)';
        } else {
            repoLabel.textContent = `Repositories (${activeRepoCount}/${totalRepos})`;
        }
    }

    const totalArchs = document.querySelectorAll('#architectureFilters input[type="checkbox"]').length;
    const activeArchCount = activeArchitectures.size;
    const archLabel = document.getElementById('archFilterCount');
    if (archLabel) {
        if (activeArchCount === totalArchs) {
            archLabel.textContent = `Architectures (${totalArchs})`;
        } else if (activeArchCount === 0) {
            archLabel.textContent = 'Architectures (none)';
        } else {
            archLabel.textContent = `Architectures (${activeArchCount}/${totalArchs})`;
        }
    }
}

// Apply repository and architecture filters (hide entire columns)
function applyRepoArchFilters() {
    const table = document.querySelector('#monitorContent table');
    if (!table) return;

    console.time('applyRepoArchFilters');

    // Hide/show architecture header cells (second row)
    const archHeaders = table.querySelectorAll('thead tr:nth-child(2) th[data-repo-arch]');
    archHeaders.forEach((header, colIndex) => {
        const repoArchKey = header.getAttribute('data-repo-arch');
        if (repoArchKey) {
            const [repo, arch] = repoArchKey.split('|');
            const isVisible = activeRepositories.has(repo) && activeArchitectures.has(arch);
            header.style.display = isVisible ? '' : 'none';
        }
    });

    // Hide/show data cells in ALL rows for the same columns
    const dataRows = table.querySelectorAll('tbody tr');
    dataRows.forEach(row => {
        const cells = row.querySelectorAll('td[data-repo-arch]');
        cells.forEach(cell => {
            const repoArchKey = cell.getAttribute('data-repo-arch');
            if (repoArchKey) {
                const [repo, arch] = repoArchKey.split('|');
                const isVisible = activeRepositories.has(repo) && activeArchitectures.has(arch);
                cell.style.display = isVisible ? '' : 'none';
            }
        });
    });

    // Update repository header colspan based on visible columns
    const repoHeaders = table.querySelectorAll('thead tr:nth-child(1) th:not(.sticky-col)');
    repoHeaders.forEach(header => {
        const repo = header.getAttribute('data-repo');
        if (repo) {
            // Count visible architecture headers for this repo
            let visibleCount = 0;
            archHeaders.forEach(archHeader => {
                const key = archHeader.getAttribute('data-repo-arch');
                if (key && key.startsWith(repo + '|') && archHeader.style.display !== 'none') {
                    visibleCount++;
                }
            });

            if (visibleCount === 0) {
                header.style.display = 'none';
            } else {
                header.style.display = '';
                header.setAttribute('colspan', visibleCount);
            }
        }
    });

    console.timeEnd('applyRepoArchFilters');
}

// Apply status filters and search (hide content of filtered cells, hide rows by search)
// Helper function to render a single package row
// Used both for initial rendering and for dynamically rendering searched packages
function renderPackageRow(pkg, matrixData, repoArchKeys, renderTimestamp) {
    const AI_HINTS = {{ ai_hints | tojson if ai_hints else '{}' }};
    const SHOW_AI_HINTS = {{ 'true' if show_ai_hints else 'false' }};
    const GITEA_SERVER = {{ gitea_server | tojson if gitea_server else 'null' }};
    const GITEA_ORGANISATION = {{ gitea_organisation | tojson if gitea_organisation else 'null' }};
    const MY_INSTANCE_URL = window.location.origin;

    if (!renderTimestamp) {
        renderTimestamp = Date.now();
    }

    let rowHtml = '<tr>';
    rowHtml += `<td class="sticky-col"><strong><a href="/packages/{{ project_name }}/${encodeURIComponent(pkg)}" class="project-link text-decoration-none">${pkg}</a></strong></td>`;

    // Each column is a repo/arch combination
    repoArchKeys.forEach(key => {
        const statusData = matrixData[key].packages[pkg] || { code: '', details: '' };
        const status = statusData.code || '';
        const details = statusData.details || '';
        const repo = matrixData[key].repository;
        const arch = matrixData[key].arch;
        let cellClass = '';
        let icon = '';
        let statusText = status || 'no build';
        let category = '';

        switch(status) {
            case 'succeeded':
                cellClass = 'bg-success-cell';
                icon = '✓';
                statusText = 'succeeded';
                category = 'success';
                break;
            case 'building':
            case 'dispatching':
            case 'signing':
                cellClass = 'bg-building-cell';
                icon = '<i class="fas fa-circle-notch fa-spin"></i>';
                statusText = status;
                category = 'wip';
                break;
            case 'scheduled':
                cellClass = 'bg-info-cell';
                icon = '⏱';
                statusText = 'scheduled';
                category = 'wip';
                break;
            case 'finished':
                cellClass = 'bg-info-cell';
                icon = '✔';
                statusText = 'finished';
                category = 'wip';
                break;
            case 'failed':
                cellClass = 'bg-danger-cell';
                icon = '✗';
                statusText = 'failed';
                category = 'fail';
                break;
            case 'unresolvable':
                cellClass = 'bg-danger-cell';
                icon = '?';
                statusText = 'unresolvable';
                category = 'fail';
                break;
            case 'broken':
                cellClass = 'bg-danger-cell';
                icon = '⚠';
                statusText = 'broken';
                category = 'fail';
                break;
            case 'blocked':
                cellClass = 'bg-blocked-cell';
                icon = '▌';
                statusText = 'blocked';
                category = 'blocked';
                break;
            case 'disabled':
                cellClass = 'bg-disabled-cell';
                icon = '○';
                statusText = 'disabled';
                category = 'inactive';
                break;
            case 'excluded':
                cellClass = 'bg-secondary-cell';
                icon = '−';
                statusText = 'excluded';
                category = 'inactive';
                break;
            case 'unknown':
                cellClass = 'bg-secondary-cell';
                icon = '?';
                statusText = 'unknown';
                category = 'inactive';
                break;
            case 'locked':
                cellClass = 'bg-secondary-cell';
                icon = '🔒';
                statusText = 'locked';
                category = 'inactive';
                break;
            case 'deleting':
                cellClass = 'bg-secondary-cell';
                icon = '🗑';
                statusText = 'deleting';
                category = 'inactive';
                break;
            default:
                cellClass = 'bg-empty-cell';
                icon = '';
                statusText = 'no build';
                category = '';
        }

        // Build tooltip - add details for unresolvable/broken
        let title = `${pkg} @ ${repo}/${arch}: ${statusText}`;
        if ((status === 'unresolvable' || status === 'broken') && details) {
            // Escape HTML and limit length for tooltip
            const escapedDetails = details.replace(/</g, '&lt;').replace(/>/g, '&gt;');
            const shortDetails = escapedDetails.length > 200 ? escapedDetails.substring(0, 200) + '...' : escapedDetails;
            title += `\n${shortDetails}`;
        }
        // Append zero-width space with timestamp to force tooltip refresh
        title += `\u200B${renderTimestamp}`;

        const categoryAttr = category ? `data-category="${category}"` : '';
        const repoArchAttr = `data-repo-arch="${repo}|${arch}"`;
        const clickable = status && status !== '' && category !== '';
        const cursorStyle = clickable ? 'cursor: pointer;' : '';
        const detailsAttr = details ? `data-details="${details.replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}"` : '';
        const clickHandler = clickable ? `onclick="showBuildLogFromElement(this, '{{ project_name }}', '${repo}', '${arch}', '${pkg}', '${status}')"` : '';
        const timestampAttr = `data-render-ts="${renderTimestamp}"`;

        // Build cell content with optional AI hint buttons for failed states
        let cellContent = icon;
        if (SHOW_AI_HINTS && AI_HINTS && (status === 'failed' || status === 'unresolvable' || status === 'broken')) {
            const hintKey = status;
            if (AI_HINTS[hintKey] && AI_HINTS[hintKey].buttons) {
                const buttons = AI_HINTS[hintKey].buttons;

                const promptContext = {
                    gitea_server: GITEA_SERVER,
                    gitea_organisation: GITEA_ORGANISATION,
                    git_repository: pkg,
                    instance_url: MY_INSTANCE_URL,
                    project: '{{ project_name }}',
                    repository: repo,
                    architecture: arch,
                    package: pkg
                };

                buttons.forEach(button => {
                    const processedPrompt = replacePromptPlaceholders(button.prompt, promptContext);
                    const escapedPrompt = processedPrompt.replace(/'/g, "\\'").replace(/\n/g, '\\n');
                    cellContent += `<br><button class="btn btn-xs btn-outline-light ai-hint-btn mt-1"
                        onclick="event.stopPropagation(); copyAIHint('${escapedPrompt}'); return false;"
                        title="${button.tooltip}"
                        style="font-size: 0.65rem; padding: 0.1rem 0.3rem; line-height: 1;">
                        ${button.button_label}
                    </button>`;
                });
            }
        }

        rowHtml += `<td class="text-center ${cellClass}" ${categoryAttr} ${repoArchAttr} ${detailsAttr} ${timestampAttr} title="${title}" style="${cursorStyle}" ${clickHandler}>${cellContent}</td>`;
    });

    rowHtml += '</tr>';
    return rowHtml;
}

function applyFilters() {
    console.time('applyFilters');
    const searchTerm = document.getElementById('packageSearch') ? document.getElementById('packageSearch').value.toLowerCase() : '';
    const tbody = document.querySelector('#monitorContent table tbody');
    const rows = document.querySelectorAll('#monitorContent table tbody tr');

    // If searching and we have a full package list, check if we need to render additional packages
    if (searchTerm && window.monitorFullPackageList && window.monitorMatrixData) {
        const existingPackages = new Set();
        rows.forEach(row => {
            const packageNameCell = row.querySelector('td.sticky-col a');
            if (packageNameCell) {
                existingPackages.add(packageNameCell.textContent);
            }
        });

        // Find matching packages that aren't currently rendered
        const matchingUnrenderedPackages = window.monitorFullPackageList.filter(pkg => {
            return pkg.toLowerCase().includes(searchTerm) && !existingPackages.has(pkg);
        });

        // Render matching packages that weren't in the initial 1000
        if (matchingUnrenderedPackages.length > 0) {
            console.log(`Search found ${matchingUnrenderedPackages.length} additional packages beyond initial render`);

            // Use filtered repo/arch keys if available, otherwise fall back to all keys
            const repoArchKeysForSearch = window.monitorFilteredRepoArchKeys || window.monitorRepoArchKeys;

            matchingUnrenderedPackages.forEach(pkg => {
                const row = renderPackageRow(pkg, window.monitorMatrixData, repoArchKeysForSearch, window.monitorRenderTimestamp);
                if (row) {
                    tbody.insertAdjacentHTML('beforeend', row);
                }
            });
        }
    } else if (!searchTerm && window.monitorDynamicRowsAdded) {
        // Search cleared - remove dynamically added rows to keep DOM clean
        // Mark that we've added dynamic rows so we know when to clean up
        const MAX_RENDERED_PACKAGES = 1000;
        const allRows = document.querySelectorAll('#monitorContent table tbody tr');
        if (allRows.length > MAX_RENDERED_PACKAGES) {
            console.log(`Cleaning up ${allRows.length - MAX_RENDERED_PACKAGES} dynamically added rows`);
            // Remove rows beyond the original limit
            for (let i = MAX_RENDERED_PACKAGES; i < allRows.length; i++) {
                allRows[i].remove();
            }
        }
        window.monitorDynamicRowsAdded = false;
    }

    // Track that we've added dynamic rows if we did
    if (searchTerm && window.monitorFullPackageList) {
        const currentRowCount = document.querySelectorAll('#monitorContent table tbody tr').length;
        if (currentRowCount > 1000) {
            window.monitorDynamicRowsAdded = true;
        }
    }

    // Apply filters to all rows (both original and newly rendered)
    const allRows = document.querySelectorAll('#monitorContent table tbody tr');
    allRows.forEach(row => {
        // Check package name filter
        const packageNameCell = row.querySelector('td.sticky-col');
        const packageName = packageNameCell ? packageNameCell.textContent.toLowerCase() : '';
        const matchesSearch = !searchTerm || packageName.includes(searchTerm);

        // Hide/show cell content based on status filters
        let hasVisibleContent = false;
        const cells = row.querySelectorAll('td[data-category]');

        cells.forEach(cell => {
            const category = cell.getAttribute('data-category');

            if (category && !activeFilters[category]) {
                // Status filter is not active - hide content but keep cell in layout
                cell.classList.add('content-hidden');
            } else {
                // Status filter is active or no category - show content
                cell.classList.remove('content-hidden');
                // Only count as visible if the cell itself is visible (not hidden by repo/arch filters)
                if (category && cell.style.display !== 'none') {
                    hasVisibleContent = true;
                }
            }
        });

        // Hide row if it doesn't match search OR has no visible content
        if (!matchesSearch || !hasVisibleContent) {
            row.style.display = 'none';
        } else {
            row.style.display = '';
        }
    });
    console.timeEnd('applyFilters');
}

// Filter packages by search term
function filterPackages() {
    applyFilters();
}

// Filter build area packages by search term
// Pagination state
let currentPackagePage = 1;
let packagesPerPage = 100;
let lastBuildAreaSearch = '';

function filterBuildArea() {
    console.log('filterBuildArea called, current page:', currentPackagePage, 'per page:', packagesPerPage);
    const searchInput = document.getElementById('buildAreaSearch');
    if (!searchInput) {
        console.log('buildAreaSearch input not found');
        return;
    }

    const searchTerm = searchInput.value.toLowerCase().trim();
    const rows = document.querySelectorAll('.build-area-row');
    const searchResults = document.getElementById('buildAreaSearchResults');
    const totalCount = document.getElementById('buildAreaCount');

    // First pass: filter by search term
    let matchingRows = [];
    rows.forEach(row => {
        const packageName = row.getAttribute('data-package').toLowerCase();
        if (!searchTerm || packageName.includes(searchTerm)) {
            matchingRows.push(row);
        }
    });

    // Update results message
    if (searchTerm) {
        searchResults.textContent = `Found ${matchingRows.length} package${matchingRows.length !== 1 ? 's' : ''}`;
    } else {
        searchResults.textContent = '';
    }

    // Update total count badge
    if (totalCount) {
        totalCount.textContent = matchingRows.length;
    }

    // Reset to page 1 only when search term changes
    if (searchTerm !== lastBuildAreaSearch) {
        console.log('Search term changed from', lastBuildAreaSearch, 'to', searchTerm, '- resetting to page 1');
        currentPackagePage = 1;
        lastBuildAreaSearch = searchTerm;
    }

    // Apply pagination
    applyPackagePagination(matchingRows);
}

function applyPackagePagination(matchingRows) {
    const rows = document.querySelectorAll('.build-area-row');
    const perPage = packagesPerPage === 'all' ? matchingRows.length : parseInt(packagesPerPage);
    const totalPages = Math.ceil(matchingRows.length / perPage);

    // Make sure current page is valid
    if (currentPackagePage > totalPages && totalPages > 0) {
        currentPackagePage = totalPages;
    }
    if (currentPackagePage < 1) {
        currentPackagePage = 1;
    }

    const startIndex = (currentPackagePage - 1) * perPage;
    const endIndex = startIndex + perPage;

    // Hide all rows first
    rows.forEach(row => {
        row.style.display = 'none';
    });

    // Show only rows on current page
    matchingRows.forEach((row, index) => {
        if (index >= startIndex && index < endIndex) {
            row.style.display = '';
        }
    });

    // Update pagination info and controls
    updatePackagePagination(matchingRows.length, totalPages);
}

function updatePackagePagination(totalItems, totalPages) {
    console.log('updatePackagePagination called, totalItems:', totalItems, 'totalPages:', totalPages, 'currentPage:', currentPackagePage);
    const paginationInfo = document.getElementById('packagesPaginationInfo');
    const pagination = document.getElementById('packagesPagination');

    if (!paginationInfo || !pagination) {
        console.log('Pagination elements not found:', {paginationInfo: !!paginationInfo, pagination: !!pagination});
        return;
    }

    const perPage = packagesPerPage === 'all' ? totalItems : parseInt(packagesPerPage);
    const startItem = totalItems === 0 ? 0 : (currentPackagePage - 1) * perPage + 1;
    const endItem = Math.min(currentPackagePage * perPage, totalItems);

    // Update info text
    paginationInfo.textContent = `Showing ${startItem}-${endItem} of ${totalItems} packages`;

    // Clear pagination
    pagination.innerHTML = '';

    if (totalPages <= 1) {
        return; // No pagination needed
    }

    // Previous button
    const prevLi = document.createElement('li');
    prevLi.className = `page-item ${currentPackagePage === 1 ? 'disabled' : ''}`;
    const prevLink = document.createElement('a');
    prevLink.className = 'page-link';
    prevLink.href = '#';
    prevLink.textContent = 'Previous';
    if (currentPackagePage > 1) {
        prevLink.addEventListener('click', (e) => {
            e.preventDefault();
            changePackagePage(currentPackagePage - 1);
        });
    }
    prevLi.appendChild(prevLink);
    pagination.appendChild(prevLi);

    // Page numbers
    const maxPagesToShow = 5;
    let startPage = Math.max(1, currentPackagePage - Math.floor(maxPagesToShow / 2));
    let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);

    if (endPage - startPage < maxPagesToShow - 1) {
        startPage = Math.max(1, endPage - maxPagesToShow + 1);
    }

    if (startPage > 1) {
        const firstLi = document.createElement('li');
        firstLi.className = 'page-item';
        const firstLink = document.createElement('a');
        firstLink.className = 'page-link';
        firstLink.href = '#';
        firstLink.textContent = '1';
        firstLink.addEventListener('click', (e) => {
            e.preventDefault();
            changePackagePage(1);
        });
        firstLi.appendChild(firstLink);
        pagination.appendChild(firstLi);

        if (startPage > 2) {
            const ellipsisLi = document.createElement('li');
            ellipsisLi.className = 'page-item disabled';
            ellipsisLi.innerHTML = `<span class="page-link">...</span>`;
            pagination.appendChild(ellipsisLi);
        }
    }

    for (let i = startPage; i <= endPage; i++) {
        const li = document.createElement('li');
        li.className = `page-item ${i === currentPackagePage ? 'active' : ''}`;
        const link = document.createElement('a');
        link.className = 'page-link';
        link.href = '#';
        link.textContent = i;
        const pageNum = i; // Capture for closure
        link.addEventListener('click', (e) => {
            e.preventDefault();
            console.log('Page link clicked:', pageNum);
            changePackagePage(pageNum);
        });
        li.appendChild(link);
        pagination.appendChild(li);
    }
    console.log('Created pagination buttons from page', startPage, 'to', endPage);

    if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
            const ellipsisLi = document.createElement('li');
            ellipsisLi.className = 'page-item disabled';
            ellipsisLi.innerHTML = `<span class="page-link">...</span>`;
            pagination.appendChild(ellipsisLi);
        }

        const lastLi = document.createElement('li');
        lastLi.className = 'page-item';
        const lastLink = document.createElement('a');
        lastLink.className = 'page-link';
        lastLink.href = '#';
        lastLink.textContent = totalPages;
        lastLink.addEventListener('click', (e) => {
            e.preventDefault();
            changePackagePage(totalPages);
        });
        lastLi.appendChild(lastLink);
        pagination.appendChild(lastLi);
    }

    // Next button
    const nextLi = document.createElement('li');
    nextLi.className = `page-item ${currentPackagePage === totalPages ? 'disabled' : ''}`;
    const nextLink = document.createElement('a');
    nextLink.className = 'page-link';
    nextLink.href = '#';
    nextLink.textContent = 'Next';
    if (currentPackagePage < totalPages) {
        nextLink.addEventListener('click', (e) => {
            e.preventDefault();
            changePackagePage(currentPackagePage + 1);
        });
    }
    nextLi.appendChild(nextLink);
    pagination.appendChild(nextLi);
}

function changePackagePage(page) {
    console.log('changePackagePage called with page:', page);
    currentPackagePage = page;
    filterBuildArea(); // Re-apply filter and pagination
}

function changePackagesPerPage() {
    const select = document.getElementById('packagesPerPage');
    packagesPerPage = select.value;
    currentPackagePage = 1; // Reset to first page
    filterBuildArea(); // Re-apply filter and pagination
}

// Fetch and display build overview
let buildOverviewState = null;
let buildOverviewInterval = null;
let buildOverviewAbortController = null;
const BUILD_OVERVIEW_REFRESH_MS = 10000; // 10 seconds
const BUILD_OVERVIEW_TIMEOUT_MS = 20000; // 20 seconds timeout for oldstate requests (reduced to prevent UI hangs)

async function fetchBuildOverview(useOldstate = false) {
    const loader = document.getElementById('buildOverviewLoader');
    const content = document.getElementById('buildOverviewContent');

    // Cancel previous request if still running
    if (buildOverviewAbortController) {
        buildOverviewAbortController.abort();
    }

    // Create new AbortController with timeout
    buildOverviewAbortController = new AbortController();
    const timeoutId = setTimeout(() => {
        buildOverviewAbortController.abort();
    }, BUILD_OVERVIEW_TIMEOUT_MS);

    try {
        const projectName = '{{ project_name }}';
        const redisEnabled = {{ 'true' if redis_enabled else 'false' }};
        let url;

        if (redisEnabled) {
            // Use Redis-backed API endpoint (does not support oldstate)
            url = `/api/projects/${encodeURIComponent(projectName)}/_result`;
        } else {
            // Use OBS proxy endpoint
            url = `/obs/build/${encodeURIComponent(projectName)}/_result`;

            if (useOldstate && buildOverviewState) {
                url += `?oldstate=${buildOverviewState}`;
            }
        }

        const response = await fetch(url, { signal: buildOverviewAbortController.signal });
        clearTimeout(timeoutId);

        if (!response.ok) {
            throw new Error(`Failed to fetch build results: ${response.status}`);
        }

        const xmlText = await response.text();
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(xmlText, 'text/xml');

        // Extract new state checksum
        const resultList = xmlDoc.querySelector('resultlist');
        const newState = resultList ? resultList.getAttribute('state') : null;

        // If using oldstate and state hasn't changed, don't update
        if (useOldstate && buildOverviewState && newState === buildOverviewState) {
            console.log('Build overview unchanged, skipping update');
            return;
        }

        // Update stored state
        if (newState) {
            buildOverviewState = newState;
        }

        const results = xmlDoc.querySelectorAll('result');

        // Collect all repositories and architectures from current results
        const repositories = new Set();
        const architectures = new Set();
        const statusCounts = {
            success: 0,
            fail: 0,
            blocked: 0,
            active: 0,
            inactive: 0
        };

        // Per-repository and per-architecture counts
        const repoStats = {};
        const archStats = {};
        const repoState = {}; // Track state for each repository

        // Extract scminfo data to track source revisions per repo/arch
        const scminfoData = {};

        results.forEach(result => {
            const repo = result.getAttribute('repository');
            const arch = result.getAttribute('arch');
            const state = result.getAttribute('state');
            const key = `${repo}|${arch}`;

            if (repo) {
                repositories.add(repo);
                if (!repoStats[repo]) {
                    repoStats[repo] = { success: 0, fail: 0, blocked: 0, active: 0, inactive: 0 };
                }
                // Store state for this repository (use first occurrence)
                if (!repoState[repo] && state) {
                    repoState[repo] = state;
                }
            }
            if (arch) {
                architectures.add(arch);
                if (!archStats[arch]) {
                    archStats[arch] = { success: 0, fail: 0, blocked: 0, active: 0, inactive: 0 };
                }
            }

            // Extract scminfo element if present
            const scminfoElement = result.querySelector('scminfo');
            if (scminfoElement) {
                const revision = scminfoElement.textContent.trim();
                if (revision) {
                    scminfoData[key] = revision;
                }
            }

            const statuses = result.querySelectorAll('status');
            statuses.forEach(status => {
                const code = status.getAttribute('code');
                const category = categorizeStatus(code);

                if (category === 'success') {
                    statusCounts.success++;
                    if (repo) repoStats[repo].success++;
                    if (arch) archStats[arch].success++;
                } else if (category === 'fail') {
                    statusCounts.fail++;
                    if (repo) repoStats[repo].fail++;
                    if (arch) archStats[arch].fail++;
                } else if (category === 'blocked') {
                    statusCounts.blocked++;
                    if (repo) repoStats[repo].blocked++;
                    if (arch) archStats[arch].blocked++;
                } else if (category === 'wip') {
                    statusCounts.active++;
                    if (repo) repoStats[repo].active++;
                    if (arch) archStats[arch].active++;
                } else if (category === 'inactive') {
                    statusCounts.inactive++;
                    if (repo) repoStats[repo].inactive++;
                    if (arch) archStats[arch].inactive++;
                }
            });
        });

        // Store the full list of available repos/archs on first load (Overview tab always loads unfiltered)
        // This happens before any filter interactions from the user
        if (!projectCache.hasLoaded) {
            projectCache.repositories = new Set(repositories);
            projectCache.architectures = new Set(architectures);
            projectCache.hasLoaded = true;
            console.log('[Overview] Saved full list of repos/archs for', currentProjectName + ':', projectCache.repositories.size, 'repos,', projectCache.architectures.size, 'archs');
        }

        // Build a matrix of repo/arch combinations with their status
        const repoArchMatrix = {};

        results.forEach(result => {
            const repo = result.getAttribute('repository');
            const arch = result.getAttribute('arch');

            if (!repo || !arch) return;

            if (!repoArchMatrix[repo]) {
                repoArchMatrix[repo] = {};
            }

            // Count statuses for this repo/arch combination
            const cellStats = { success: 0, fail: 0, blocked: 0, active: 0, inactive: 0, total: 0 };

            const statuses = result.querySelectorAll('status');
            statuses.forEach(status => {
                const code = status.getAttribute('code');
                const category = categorizeStatus(code);
                cellStats.total++;

                if (category === 'success') cellStats.success++;
                else if (category === 'fail') cellStats.fail++;
                else if (category === 'blocked') cellStats.blocked++;
                else if (category === 'wip') cellStats.active++;
                else if (category === 'inactive') cellStats.inactive++;
            });

            repoArchMatrix[repo][arch] = cellStats;
        });

        // Build Results Table (similar to OBS UI)
        let html = '';

        // Get current Gitea commit for the tracking branch (provided by server)
        const giteaCurrentCommit = {{ gitea_current_commit | tojson if gitea_current_commit else 'null' }};

        if (repositories.size > 0 && architectures.size > 0) {
            html += '<div class="table-responsive">';
            html += '<table class="table table-sm table-bordered">';
            html += '<thead><tr>';
            html += '<th style="width: 200px;">Repository</th>';

            // Architecture headers with scminfo-based coloring
            const sortedArchs = Array.from(architectures).sort();
            const sortedRepos = Array.from(repositories).sort();

            sortedArchs.forEach(arch => {
                // For architecture coloring, we need to check if there's consistent scminfo across all repos for this arch
                // We'll use the first repo's scminfo for this arch as representative
                let scmRevision = null;
                for (const repo of sortedRepos) {
                    const key = `${repo}|${arch}`;
                    if (scminfoData[key]) {
                        scmRevision = scminfoData[key];
                        break;
                    }
                }

                // Determine color based on scminfo and Gitea comparison
                let archColor = ''; // default (black) when no scminfo
                let titleText = '';
                let statusSymbol = '';

                if (scmRevision) {
                    // Add revision to tooltip (without arch)
                    titleText = `Commit: ${scmRevision}`;

                    // Compare with Gitea current commit if available
                    if (giteaCurrentCommit) {
                        if (scmRevision === giteaCurrentCommit) {
                            archColor = 'text-success'; // green - up to date
                            titleText += '\nUp to date';
                            statusSymbol = '<span class="text-success ms-1" style="font-size: 0.85em;">✓</span>';
                        } else {
                            archColor = 'text-danger'; // red - outdated
                            titleText += `\nOutdated (current: ${giteaCurrentCommit.substring(0, 7)})`;
                            statusSymbol = '<span class="text-danger ms-1" style="font-size: 0.85em;">⚠</span>';
                        }
                    } else {
                        // Has scminfo but no Gitea commit to compare - keep black
                        archColor = '';
                    }
                } else {
                    // No scmRevision information available
                    titleText = 'No commit state known';
                }

                // Escape HTML entities for title attribute
                const escapedTitle = titleText.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

                html += `<th class="text-center arch-header" style="min-width: 80px;" title="${escapedTitle}"><code class="${archColor}">${arch}</code>${statusSymbol}</th>`;
            });

            html += '</tr></thead><tbody>';

            // For each repository, show status for each architecture
            sortedRepos.forEach(repo => {
                html += '<tr>';

                // Repository name with link and state
                html += '<td>';
                if (DOWNLOAD_URL) {
                    const escapedProject = escapeProjectName(PROJECT_NAME);
                    const repoUrl = `${DOWNLOAD_URL}/${escapedProject}/${repo}/`;
                    html += `<a href="${repoUrl}" target="_blank" class="project-link"><strong>${repo}</strong></a>`;
                } else {
                    html += `<strong>${repo}</strong>`;
                }

                // Show state if available
                const state = repoState[repo];
                if (state) {
                    html += ` <small class="text-muted">(${state})</small>`;
                }
                html += '</td>';

                sortedArchs.forEach((archName, archIndex) => {
                    const cellStats = repoArchMatrix[repo]?.[archName];

                    if (!cellStats || cellStats.total === 0) {
                        // No builds for this combination
                        html += '<td class="text-center text-muted">-</td>';
                    } else {
                        // Show status summary with colored badges
                        html += '<td class="text-center" style="padding: 0.25rem;">';

                        // Use JSON.stringify for proper escaping in onclick handlers
                        const repoJson = JSON.stringify(repo);
                        const archJson = JSON.stringify(archName);

                        // Determine primary status based on priority: fail > blocked > active > success > inactive
                        let statusHtml = '';

                        if (cellStats.fail > 0) {
                            statusHtml += `<a href="javascript:void(0)" class="badge bg-danger text-decoration-none" style="font-size: 0.7rem; cursor: pointer;" onclick='filterMonitor(${repoJson}, ${archJson}, "fail");'>${cellStats.fail}</a> `;
                        }
                        if (cellStats.blocked > 0) {
                            statusHtml += `<a href="javascript:void(0)" class="badge bg-warning text-dark text-decoration-none" style="font-size: 0.7rem; cursor: pointer;" onclick='filterMonitor(${repoJson}, ${archJson}, "blocked");'>${cellStats.blocked}</a> `;
                        }
                        if (cellStats.active > 0) {
                            statusHtml += `<a href="javascript:void(0)" class="badge bg-primary text-decoration-none" style="font-size: 0.7rem; cursor: pointer;" onclick='filterMonitor(${repoJson}, ${archJson}, "wip");'>${cellStats.active}</a> `;
                        }
                        if (cellStats.success > 0) {
                            statusHtml += `<a href="javascript:void(0)" class="badge bg-success text-decoration-none" style="font-size: 0.7rem; cursor: pointer;" onclick='filterMonitor(${repoJson}, ${archJson}, "success");'>${cellStats.success}</a> `;
                        }
                        if (cellStats.inactive > 0) {
                            statusHtml += `<a href="javascript:void(0)" class="badge bg-secondary text-decoration-none" style="font-size: 0.7rem; cursor: pointer;" onclick='filterMonitor(${repoJson}, ${archJson}, "inactive");'>${cellStats.inactive}</a> `;
                        }

                        html += statusHtml || '-';
                        html += '</td>';
                    }
                });

                html += '</tr>';
            });

            html += '</tbody></table>';
            html += '</div>';
        } else {
            html += '<div class="alert alert-info"><i class="fas fa-info-circle"></i> No build results available</div>';
        }

        content.innerHTML = html;
        loader.style.display = 'none';
        content.style.display = 'block';

        // Start auto-refresh if not already running
        if (!buildOverviewInterval) {
            startBuildOverviewAutoRefresh();
        }
    } catch (error) {
        clearTimeout(timeoutId);
        buildOverviewAbortController = null;

        // Don't show errors for aborted requests (timeout or manual cancellation)
        if (error.name === 'AbortError') {
            console.log('Build overview fetch aborted or timed out, will retry on next interval');
            return;
        }

        console.error('Error fetching build overview:', error);
        content.innerHTML = `<div class="alert alert-warning"><i class="fas fa-exclamation-triangle"></i> Could not load build overview: ${error.message}</div>`;
        loader.style.display = 'none';
        content.style.display = 'block';
    }
}

function startBuildOverviewAutoRefresh() {
    if (buildOverviewInterval) {
        clearInterval(buildOverviewInterval);
    }

    console.log('Starting build overview auto-refresh');
    buildOverviewInterval = setInterval(() => {
        fetchBuildOverview(true); // Use oldstate for polling
    }, BUILD_OVERVIEW_REFRESH_MS);
}

function stopBuildOverviewAutoRefresh() {
    if (buildOverviewInterval) {
        console.log('Stopping build overview auto-refresh');
        clearInterval(buildOverviewInterval);
        buildOverviewInterval = null;
    }
    // Cancel any in-flight request
    if (buildOverviewAbortController) {
        buildOverviewAbortController.abort();
        buildOverviewAbortController = null;
    }
}

// Cookie utilities
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
    return '';
}

function setCookie(name, value, days = 365) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
}

// Get marked projects from cookies
function getMarkedProjects() {
    const marked = getCookie(`markedProjects_${BACKEND_ID}`);
    return marked ? JSON.parse(decodeURIComponent(marked)) : [];
}

// Save marked projects to cookies
function saveMarkedProjects(projects) {
    setCookie(`markedProjects_${BACKEND_ID}`, encodeURIComponent(JSON.stringify(projects)));
}

// Update button UI
function updateMarkButton() {
    const projectName = document.getElementById('markProjectBtn').getAttribute('data-project');
    const marked = getMarkedProjects();
    const btn = document.getElementById('markProjectBtn');
    const icon = btn.querySelector('i');
    const text = document.getElementById('markBtnText');

    if (marked.includes(projectName)) {
        icon.className = 'fas fa-star';
        text.textContent = 'Unmark';
        btn.className = 'btn btn-warning';
    } else {
        icon.className = 'far fa-star';
        text.textContent = 'Mark';
        btn.className = 'btn btn-outline-warning';
    }
}

// Handle mark button click
document.getElementById('markProjectBtn').addEventListener('click', function() {
    const projectName = this.getAttribute('data-project');
    let marked = getMarkedProjects();
    const index = marked.indexOf(projectName);

    if (index > -1) {
        // Unmark
        marked.splice(index, 1);
    } else {
        // Mark
        marked.push(projectName);
    }

    // Save to cookies
    saveMarkedProjects(marked);

    // Update UI
    updateMarkButton();

    // Show feedback
    const btn = this;
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-check"></i> Saved!';
    btn.disabled = true;

    setTimeout(() => {
        btn.disabled = false;
        updateMarkButton();
    }, 800);
});

// Initialize on page load
updateMarkButton();

// Initialize build area pagination
console.log('Checking for buildAreaSearch element...');
if (document.getElementById('buildAreaSearch')) {
    console.log('buildAreaSearch found, calling filterBuildArea');
    filterBuildArea();
} else {
    console.log('buildAreaSearch NOT found');
}

// Handle URL fragments for tabs
function activateTabFromHash() {
    const hash = window.location.hash;
    console.log('activateTabFromHash called, hash:', hash);

    if (hash) {
        const tabId = hash.substring(1); // Remove the #
        const tabButton = document.getElementById(tabId + '-tab');
        console.log('Looking for tab button:', tabId + '-tab', 'found:', !!tabButton);

        if (tabButton) {
            // Use Bootstrap 5 Tab class if available
            if (typeof bootstrap !== 'undefined' && bootstrap.Tab) {
                const tab = new bootstrap.Tab(tabButton);
                tab.show();
            } else {
                // Fallback: just click the tab button
                tabButton.click();
            }

            // Manually trigger load for this tab since shown.bs.tab might not fire
            setTimeout(() => {
                console.log('Manually triggering load for tab:', tabId);
                if (tabId === 'monitor') {
                    loadMonitorTab();
                }
            }, 100);
        }
    }
}

// Update URL hash when tab changes
document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(button => {
    button.addEventListener('shown.bs.tab', function(event) {
        const targetId = event.target.getAttribute('data-bs-target').substring(1);
        // Preserve query parameters when updating hash
        const url = new URL(window.location);
        console.log('Tab shown event: current location before update:', window.location.toString());
        url.hash = targetId;
        console.log('Tab shown event: setting URL to', url.toString());
        window.history.replaceState({}, '', url);
    });
});

// Handle browser back/forward
window.addEventListener('hashchange', activateTabFromHash);

// Toggle last result mode
function toggleLastResult() {
    lastResultEnabled = !lastResultEnabled;
    const statusSpan = document.getElementById('lastResultStatus');
    const btn = document.getElementById('lastResultBtn');
    const autoRefreshBtn = document.getElementById('autoRefreshBtn');

    if (lastResultEnabled) {
        statusSpan.textContent = 'ON';
        btn.classList.remove('btn-outline-secondary');
        btn.classList.add('btn-secondary');
        // Hide auto-refresh button
        autoRefreshBtn.style.display = 'none';
        // Stop auto-refresh if running
        stopMonitorRefresh();
        autoRefreshEnabled = false;
        // Reload with lastbuild=1
        loadMonitorTab(true, false);
    } else {
        statusSpan.textContent = 'OFF';
        btn.classList.remove('btn-secondary');
        btn.classList.add('btn-outline-secondary');
        // Show auto-refresh button
        autoRefreshBtn.style.display = '';
        // Re-enable auto-refresh
        autoRefreshEnabled = true;
        const autoStatusSpan = document.getElementById('autoRefreshStatus');
        const autoBtn = document.getElementById('autoRefreshBtn');
        autoStatusSpan.textContent = 'ON';
        autoBtn.classList.remove('btn-outline-info');
        autoBtn.classList.add('btn-info');
        // Reload without lastbuild parameter
        loadMonitorTab(true, false);
    }
}

// Toggle auto-refresh
function toggleAutoRefresh() {
    autoRefreshEnabled = !autoRefreshEnabled;
    const statusSpan = document.getElementById('autoRefreshStatus');
    const btn = document.getElementById('autoRefreshBtn');

    if (autoRefreshEnabled) {
        statusSpan.textContent = 'ON';
        btn.classList.remove('btn-outline-info');
        btn.classList.add('btn-info');
        startMonitorRefresh();
    } else {
        statusSpan.textContent = 'OFF';
        btn.classList.remove('btn-info');
        btn.classList.add('btn-outline-info');
        stopMonitorRefresh();
    }
}

// Start monitor auto-refresh
function startMonitorRefresh() {
    if (monitorRefreshInterval) {
        clearInterval(monitorRefreshInterval);
    }
    // Refresh every 10 seconds
    monitorRefreshInterval = setInterval(() => {
        loadMonitorTab(false, true);
    }, 10000);
}

// Stop monitor auto-refresh
function stopMonitorRefresh() {
    if (monitorRefreshInterval) {
        clearInterval(monitorRefreshInterval);
        monitorRefreshInterval = null;
    }
    // Cancel any in-flight request
    if (monitorAbortController) {
        monitorAbortController.abort();
        monitorAbortController = null;
    }
}

// Update last update time
function updateLastUpdateTime() {
    const now = new Date();
    const timeStr = now.toLocaleTimeString();
    const elem = document.getElementById('lastUpdateTime');
    if (elem) {
        elem.textContent = `Last update: ${timeStr}`;
    }
}

// Handle tab switching for lazy loading
function loadMonitorTab(force = false, isAutoRefresh = false) {
    console.log('loadMonitorTab called, monitorLoaded:', monitorLoaded, 'force:', force, 'isAutoRefresh:', isAutoRefresh);

    if (!monitorLoaded || force || isAutoRefresh) {
        const loader = document.getElementById('monitorLoader');
        const content = document.getElementById('monitorContent');

        console.log('Loader element:', loader);
        console.log('Content element:', content);

        // Only show loader on initial load, not on auto-refresh
        if (!isAutoRefresh) {
            content.innerHTML = '';
            content.style.display = 'none';
            loader.style.display = 'block';
        }

        console.log('Fetching build results for: {{ project_name }}');

        // Build URL with parameters
        // Use Redis API endpoint if available, otherwise use OBS proxy
        const redisEnabled = {{ 'true' if redis_enabled else 'false' }};
        let fetchUrl;

        // Build filter parameters (common for both Redis and OBS proxy)
        const params = [];

        // Add repository filters if any are active (use OBS API style: multiple params)
        if (activeRepositories.size > 0) {
            const repos = Array.from(activeRepositories);
            repos.forEach(repo => {
                params.push(`repository=${encodeURIComponent(repo)}`);
            });
            console.log('Filtering by repositories:', repos.join(', '));
        }

        // Add architecture filters if any are active (use OBS API style: multiple params)
        if (activeArchitectures.size > 0) {
            const archs = Array.from(activeArchitectures);
            archs.forEach(arch => {
                params.push(`arch=${encodeURIComponent(arch)}`);
            });
            console.log('Filtering by architectures:', archs.join(', '));
        }

        // Add status filter if active (use OBS API style: code parameter)
        if (activeFilters.size > 0) {
            const filters = Array.from(activeFilters);
            filters.forEach(filter => {
                params.push(`code=${encodeURIComponent(filter)}`);
            });
            console.log('Filtering by status codes:', filters.join(', '));
        }

        if (redisEnabled) {
            // Use Redis-backed API endpoint with filter support
            fetchUrl = '/api/projects/{{ project_name }}/_result';
            console.log('Using Redis API endpoint with server-side filtering');
        } else {
            // Use OBS proxy endpoint with filter support
            fetchUrl = '/obs/build/{{ project_name }}/_result';

            if (lastResultEnabled) {
                params.push('lastbuild=1');
                console.log('Using lastbuild=1');
            }

            if (isAutoRefresh && monitorChecksum && !lastResultEnabled) {
                params.push(`oldstate=${monitorChecksum}`);
                console.log('Using oldstate checksum:', monitorChecksum);
            }

            console.log('Using OBS proxy endpoint with server-side filtering');
        }

        if (params.length > 0) {
            fetchUrl += '?' + params.join('&');
        }

        console.log('Fetch URL:', fetchUrl);

        // Cancel previous request if still running
        if (monitorAbortController) {
            monitorAbortController.abort();
        }

        // Create new AbortController with timeout
        monitorAbortController = new AbortController();
        const currentController = monitorAbortController;
        const timeoutId = setTimeout(() => {
            if (currentController) {
                currentController.abort();
            }
        }, MONITOR_TIMEOUT_MS);

        fetch(fetchUrl, { signal: monitorAbortController.signal })
            .then(response => {
                clearTimeout(timeoutId);
                console.log('Build response status:', response.status);
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                return response.text();
            })
            .then(xml => {
                console.log('Build XML received, length:', xml.length);
                const parser = new DOMParser();
                const xmlDoc = parser.parseFromString(xml, 'text/xml');

                // Extract checksum from resultlist state attribute
                const resultList = xmlDoc.querySelector('resultlist');
                const newChecksum = resultList ? resultList.getAttribute('state') : null;
                console.log('New checksum:', newChecksum, 'Old checksum:', monitorChecksum);

                // If checksums match (no change), don't update UI
                if (isAutoRefresh && newChecksum && newChecksum === monitorChecksum) {
                    console.log('No changes detected, skipping UI update');
                    updateLastUpdateTime();
                    return;
                }

                // Update stored checksum
                monitorChecksum = newChecksum;

                const results = xmlDoc.querySelectorAll('result');

                // Collect all packages and build a matrix
                const packageSet = new Set();
                const matrixData = {};

                // Extract scminfo data to track source revisions
                const scminfoData = {};

                results.forEach(result => {
                    const repo = result.getAttribute('repository') || 'N/A';
                    const arch = result.getAttribute('arch') || 'N/A';
                    const key = `${repo}|${arch}`;

                    if (!matrixData[key]) {
                        matrixData[key] = {
                            repository: repo,
                            arch: arch,
                            packages: {}
                        };
                    }

                    // Extract scminfo element if present
                    const scminfoElement = result.querySelector('scminfo');
                    if (scminfoElement) {
                        const revision = scminfoElement.textContent.trim();
                        if (revision) {
                            scminfoData[key] = revision;
                            console.log(`SCM info for ${repo}/${arch}: ${revision}`);
                        }
                    }

                    // Get all status elements (packages)
                    const statuses = result.querySelectorAll('status');
                    statuses.forEach(status => {
                        const packageName = status.getAttribute('package');
                        const code = status.getAttribute('code');

                        // Get details element if present (for unresolvable/broken)
                        const detailsElement = status.querySelector('details');
                        const details = detailsElement ? detailsElement.textContent.trim() : '';

                        if (packageName) {
                            packageSet.add(packageName);
                            matrixData[key].packages[packageName] = {
                                code: code || 'unknown',
                                details: details
                            };
                        }
                    });
                });

                // Sort packages based on current sort mode
                let packages;
                if (monitorSortMode === 'alphabetical') {
                    // Simple alphabetical sort
                    packages = Array.from(packageSet).sort();
                } else {
                    // Priority sort: active builds, blocked, then rest
                    packages = Array.from(packageSet).sort((a, b) => {
                        // Get highest priority status for each package across all repo/arch combinations
                        const getPackagePriority = (pkg) => {
                            let hasBuilding = false;
                            let hasOtherActive = false;
                            let hasBlocked = false;
                            let hasFailed = false;

                            for (const key in matrixData) {
                                const status = matrixData[key].packages[pkg]?.code?.toLowerCase();
                                if (!status) continue;

                                // Check for building state (highest priority)
                                if (status === 'building') {
                                    hasBuilding = true;
                                }
                                // Check for other active build states (second priority)
                                else if (['dispatching', 'scheduled', 'signing', 'finished'].includes(status)) {
                                    hasOtherActive = true;
                                }
                                // Check for blocked (third priority)
                                else if (status === 'blocked') {
                                    hasBlocked = true;
                                }
                                // Check for failed states (fourth priority)
                                else if (['failed', 'broken', 'unresolvable'].includes(status)) {
                                    hasFailed = true;
                                }
                            }

                            // Return priority: 1 = building, 2 = other active, 3 = blocked, 4 = failed, 5 = other
                            if (hasBuilding) return 1;
                            if (hasOtherActive) return 2;
                            if (hasBlocked) return 3;
                            if (hasFailed) return 4;
                            return 5;
                        };

                        const priorityA = getPackagePriority(a);
                        const priorityB = getPackagePriority(b);

                        // Sort by priority first, then alphabetically within same priority
                        if (priorityA !== priorityB) {
                            return priorityA - priorityB;
                        }
                        return a.localeCompare(b);
                    });
                }

                const repoArchKeys = Object.keys(matrixData).sort();

                // Extract repositories and architectures BEFORE generating HTML
                // so they're available for filtering
                const repositories = new Set();
                const architectures = new Set();
                repoArchKeys.forEach(key => {
                    repositories.add(matrixData[key].repository);
                    architectures.add(matrixData[key].arch);
                });

                // Initialize active sets if first load and not already filtered
                if (!monitorLoaded) {
                    if (activeRepositories.size === 0) {
                        console.log('No repository filters set, enabling all repositories');
                        activeRepositories = new Set(repositories);
                    } else {
                        console.log('Repository filters already set to:', Array.from(activeRepositories));
                    }
                    if (activeArchitectures.size === 0) {
                        console.log('No architecture filters set, enabling all architectures');
                        activeArchitectures = new Set(architectures);
                    } else {
                        console.log('Architecture filters already set to:', Array.from(activeArchitectures));
                    }
                }

                // Get current Gitea commit for the tracking branch (provided by server)
                const giteaCurrentCommit = {{ gitea_current_commit | tojson if gitea_current_commit else 'null' }};
                if (giteaCurrentCommit) {
                    console.log('Current Gitea commit (from server):', giteaCurrentCommit, 'length:', giteaCurrentCommit.length);
                }

                // For large projects (100+ packages), show failures and WIP by default
                // But only if filters weren't explicitly set by user action or URL
                const isLargeProject = packages.length >= 100;
                let largeProjectNotice = '';
                if (isLargeProject && !monitorLoaded && !filtersExplicitlySet) {
                    console.log(`Large project detected (${packages.length} packages), showing failures and WIP by default`);
                    activeFilters.success = false;
                    activeFilters.fail = true;
                    activeFilters.blocked = false;
                    activeFilters.wip = true;
                    activeFilters.inactive = false;
                    largeProjectNotice = `<div class="alert alert-info mb-3"><i class="fas fa-info-circle"></i> Large project detected (${packages.length} packages). Showing failed and active builds by default. Use filters to show more.</div>`;
                }

                // Generate timestamp for this render to force tooltip refresh
                const renderTimestamp = Date.now();

                let html = largeProjectNotice;
                html += '<div class="table-responsive">';
                html += '<table class="table table-dark table-bordered table-sm build-matrix">';

                // Header rows - repository names and architectures
                html += '<thead>';

                // First header row - Package header and Repository names
                html += '<tr><th class="sticky-col" style="border-bottom: 0 !important;">';
                html += 'Package ';
                const sortIcon = (monitorSortMode === 'priority') ? 'fa-sort-amount-down' : 'fa-sort-alpha-down';
                const sortLabel = (monitorSortMode === 'priority') ? 'Priority' : 'A-Z';
                html += '<button type="button" class="btn btn-sm btn-outline-secondary ms-2" id="sortToggle" onclick="toggleSortMode()" style="font-size: 0.75rem; padding: 0.1rem 0.4rem; color: #000; background-color: #fff; border-color: #6c757d;">';
                html += `<i class="fas ${sortIcon}"></i> <span id="sortModeLabel">${sortLabel}</span>`;
                html += '</button>';
                html += '</th>';
                let currentRepo = '';
                let repoSpan = 0;

                // Calculate colspan for each repository
                const repoColspans = {};
                repoArchKeys.forEach(key => {
                    const repo = matrixData[key].repository;
                    repoColspans[repo] = (repoColspans[repo] || 0) + 1;
                });

                // Output repository headers with colspan
                Object.entries(repoColspans).forEach(([repo, colspan]) => {
                    html += `<th class="text-center repo-header" data-repo="${repo}" colspan="${colspan}">${repo}</th>`;
                });
                html += '</tr>';

                // Second header row - Search field and Architecture names
                html += '<tr>';
                html += '<th class="sticky-col p-2" style="border-top: 0 !important;">';
                html += '<input type="text" id="packageSearch" class="form-control form-control-sm search-box" ';
                html += 'placeholder="🔍 Search..." onkeyup="filterPackages()" style="font-size: 0.85rem;">';
                html += '</th>';
                repoArchKeys.forEach(key => {
                    const repo = matrixData[key].repository;
                    const arch = matrixData[key].arch;
                    const scmRevision = scminfoData[key];

                    // Determine color based on scminfo and Gitea comparison
                    let archColor = ''; // default (black) when no scminfo
                    let titleText = '';
                    let statusSymbol = '';

                    if (scmRevision) {
                        // Add revision to tooltip (without arch)
                        titleText = `Commit: ${scmRevision}`;

                        // Compare with Gitea current commit if available
                        if (giteaCurrentCommit) {
                            // Normalize both values (trim whitespace)
                            const normalizedScm = String(scmRevision).trim();
                            const normalizedGitea = String(giteaCurrentCommit).trim();

                            if (normalizedScm === normalizedGitea) {
                                archColor = 'text-success'; // green - up to date
                                titleText += '\nUp to date';
                                statusSymbol = '<span class="text-success ms-1" style="font-size: 0.85em;">✓</span>';
                            } else {
                                archColor = 'text-danger'; // red - outdated
                                titleText += `\nOutdated (current: ${giteaCurrentCommit.substring(0, 7)})`;
                                statusSymbol = '<span class="text-danger ms-1" style="font-size: 0.85em;">⚠</span>';
                                console.log(`[COMMIT MISMATCH] ${repo}/${arch}: scm='${normalizedScm}' (len=${normalizedScm.length}) vs gitea='${normalizedGitea}' (len=${normalizedGitea.length})`);
                            }
                        } else {
                            // Has scminfo but no Gitea commit to compare - keep black
                            archColor = '';
                        }
                    } else {
                        // No scmRevision information available
                        titleText = 'No commit state known';
                    }

                    // Escape HTML entities for title attribute
                    const escapedTitle = titleText.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

                    html += `<th class="text-center arch-header" data-repo-arch="${repo}|${arch}" title="${escapedTitle}"><code class="${archColor}">${arch}</code>${statusSymbol}</th>`;
                });
                html += '</tr>';

                html += '</thead>';

                html += '<tbody>';

                // Helper function to check if package has any visible status based on filters
                const packageMatchesFilters = (pkg) => {
                    // If no filters are active (all disabled), show nothing
                    const anyFilterActive = activeFilters.success || activeFilters.fail ||
                                          activeFilters.blocked || activeFilters.wip || activeFilters.inactive;
                    if (!anyFilterActive) {
                        return true; // Show all if no filters
                    }

                    // Check only the repo/arch combinations that match active filters
                    for (const key of repoArchKeys) {
                        const repo = matrixData[key].repository;
                        const arch = matrixData[key].arch;

                        // Skip if this repo/arch combo doesn't match active filters
                        if (!activeRepositories.has(repo) || !activeArchitectures.has(arch)) {
                            continue;
                        }

                        const statusData = matrixData[key].packages[pkg] || { code: '', details: '' };
                        const status = statusData.code || '';

                        // Determine category for this status
                        let category = '';
                        if (status === 'succeeded') category = 'success';
                        else if (['building', 'dispatching', 'signing', 'scheduled', 'finished'].includes(status)) category = 'wip';
                        else if (['failed', 'unresolvable', 'broken'].includes(status)) category = 'fail';
                        else if (status === 'blocked') category = 'blocked';
                        else if (['disabled', 'excluded', 'unknown', 'locked', 'deleting'].includes(status)) category = 'inactive';

                        // If this status matches an active filter, package is visible
                        if (category && activeFilters[category]) {
                            return true;
                        }
                    }
                    return false;
                };

                // Filter packages based on active filters BEFORE limiting
                const filteredPackages = packages.filter(pkg => packageMatchesFilters(pkg));

                // Limit rendering to 1000 packages for performance in very large projects
                const MAX_RENDERED_PACKAGES = 1000;
                const totalPackages = packages.length;
                const totalFilteredPackages = filteredPackages.length;
                const displayPackages = filteredPackages.slice(0, MAX_RENDERED_PACKAGES);

                if (packages.length === 0) {
                    html += `<tr><td colspan="${repoArchKeys.length + 1}" class="text-center text-muted">No build results available</td></tr>`;
                } else {

                    // Store filtered repo/arch keys for search to use
                    // Filter repoArchKeys to only include active repo/arch combinations
                    const filteredRepoArchKeys = repoArchKeys.filter(key => {
                        const repo = matrixData[key].repository;
                        const arch = matrixData[key].arch;
                        return activeRepositories.has(repo) && activeArchitectures.has(arch);
                    });

                    // Store full package list and data globally for search functionality
                    // Use filteredPackages (already filtered by status and repo/arch) for search
                    window.monitorFullPackageList = filteredPackages;
                    window.monitorMatrixData = matrixData;
                    window.monitorRepoArchKeys = repoArchKeys;
                    window.monitorFilteredRepoArchKeys = filteredRepoArchKeys;
                    window.monitorRenderTimestamp = renderTimestamp;

                    // Each row is a package
                    displayPackages.forEach(pkg => {
                        html += '<tr>';
                        html += `<td class="sticky-col"><strong><a href="/packages/{{ project_name }}/${encodeURIComponent(pkg)}" class="project-link text-decoration-none">${pkg}</a></strong></td>`;

                        // Each column is a repo/arch combination
                        repoArchKeys.forEach(key => {
                            const statusData = matrixData[key].packages[pkg] || { code: '', details: '' };
                            const status = statusData.code || '';
                            const details = statusData.details || '';
                            const repo = matrixData[key].repository;
                            const arch = matrixData[key].arch;
                            let cellClass = '';
                            let icon = '';
                            let statusText = status || 'no build';
                            let category = '';

                            switch(status) {
                                case 'succeeded':
                                    cellClass = 'bg-success-cell';
                                    icon = '✓';
                                    statusText = 'succeeded';
                                    category = 'success';
                                    break;
                                case 'building':
                                case 'dispatching':
                                case 'signing':
                                    cellClass = 'bg-building-cell';
                                    icon = '<i class="fas fa-circle-notch fa-spin"></i>';
                                    statusText = status;
                                    category = 'wip';
                                    break;
                                case 'scheduled':
                                    cellClass = 'bg-info-cell';
                                    icon = '⏱';
                                    statusText = 'scheduled';
                                    category = 'wip';
                                    break;
                                case 'finished':
                                    cellClass = 'bg-info-cell';
                                    icon = '✔';
                                    statusText = 'finished';
                                    category = 'wip';
                                    break;
                                case 'failed':
                                    cellClass = 'bg-danger-cell';
                                    icon = '✗';
                                    statusText = 'failed';
                                    category = 'fail';
                                    break;
                                case 'unresolvable':
                                    cellClass = 'bg-danger-cell';
                                    icon = '?';
                                    statusText = 'unresolvable';
                                    category = 'fail';
                                    break;
                                case 'broken':
                                    cellClass = 'bg-danger-cell';
                                    icon = '⚠';
                                    statusText = 'broken';
                                    category = 'fail';
                                    break;
                                case 'blocked':
                                    cellClass = 'bg-blocked-cell';
                                    icon = '▌';
                                    statusText = 'blocked';
                                    category = 'blocked';
                                    break;
                                case 'disabled':
                                    cellClass = 'bg-disabled-cell';
                                    icon = '○';
                                    statusText = 'disabled';
                                    category = 'inactive';
                                    break;
                                case 'excluded':
                                    cellClass = 'bg-secondary-cell';
                                    icon = '−';
                                    statusText = 'excluded';
                                    category = 'inactive';
                                    break;
                                case 'unknown':
                                    cellClass = 'bg-secondary-cell';
                                    icon = '?';
                                    statusText = 'unknown';
                                    category = 'inactive';
                                    break;
                                case 'locked':
                                    cellClass = 'bg-secondary-cell';
                                    icon = '🔒';
                                    statusText = 'locked';
                                    category = 'inactive';
                                    break;
                                case 'deleting':
                                    cellClass = 'bg-secondary-cell';
                                    icon = '🗑';
                                    statusText = 'deleting';
                                    category = 'inactive';
                                    break;
                                default:
                                    cellClass = 'bg-empty-cell';
                                    icon = '';
                                    statusText = 'no build';
                                    category = '';
                            }

                            // Build tooltip - add details for unresolvable/broken
                            let title = `${pkg} @ ${repo}/${arch}: ${statusText}`;
                            if ((status === 'unresolvable' || status === 'broken') && details) {
                                // Escape HTML and limit length for tooltip
                                const escapedDetails = details.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                                const shortDetails = escapedDetails.length > 200 ? escapedDetails.substring(0, 200) + '...' : escapedDetails;
                                title += `\n${shortDetails}`;
                            }
                            // Append zero-width space with timestamp to force tooltip refresh
                            // This makes each title technically unique, forcing browser to re-read it
                            title += `\u200B${renderTimestamp}`;

                            const categoryAttr = category ? `data-category="${category}"` : '';
                            const repoArchAttr = `data-repo-arch="${repo}|${arch}"`;
                            const clickable = status && status !== '' && category !== '';
                            const cursorStyle = clickable ? 'cursor: pointer;' : '';
                            // Store details in data attribute for broken/unresolvable states
                            const detailsAttr = details ? `data-details="${details.replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}"` : '';
                            const clickHandler = clickable ? `onclick="showBuildLogFromElement(this, '{{ project_name }}', '${repo}', '${arch}', '${pkg}', '${status}')"` : '';
                            // Add render timestamp to force browser to refresh tooltips
                            const timestampAttr = `data-render-ts="${renderTimestamp}"`;

                            // Build cell content with optional AI hint buttons for failed states
                            let cellContent = icon;
                            if (SHOW_AI_HINTS && AI_HINTS && (status === 'failed' || status === 'unresolvable' || status === 'broken')) {
                                const hintKey = status;
                                if (AI_HINTS[hintKey] && AI_HINTS[hintKey].buttons) {
                                    const buttons = AI_HINTS[hintKey].buttons;

                                    // Create context for placeholder replacement
                                    const promptContext = {
                                        gitea_server: GITEA_SERVER,
                                        gitea_organisation: GITEA_ORGANISATION,
                                        git_repository: pkg,
                                        instance_url: MY_INSTANCE_URL,
                                        project: '{{ project_name }}',
                                        repository: repo,
                                        architecture: arch,
                                        package: pkg
                                    };

                                    buttons.forEach(button => {
                                        // Replace placeholders in the prompt
                                        const processedPrompt = replacePromptPlaceholders(button.prompt, promptContext);
                                        const escapedPrompt = processedPrompt.replace(/'/g, "\\'").replace(/\n/g, '\\n');
                                        cellContent += `<br><button class="btn btn-xs btn-outline-light ai-hint-btn mt-1"
                                            onclick="event.stopPropagation(); copyAIHint('${escapedPrompt}'); return false;"
                                            title="${button.tooltip}"
                                            style="font-size: 0.65rem; padding: 0.1rem 0.3rem; line-height: 1;">
                                            ${button.button_label}
                                        </button>`;
                                    });
                                }
                            }

                            html += `<td class="text-center ${cellClass}" ${categoryAttr} ${repoArchAttr} ${detailsAttr} ${timestampAttr} title="${title}" style="${cursorStyle}" ${clickHandler}>${cellContent}</td>`;
                        });

                        html += '</tr>';
                    });
                }

                html += '</tbody></table></div>';

                // Add truncation notice if applicable
                if (totalFilteredPackages > MAX_RENDERED_PACKAGES) {
                    html += `<div class="alert alert-warning mt-3 mb-3">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Display Limited:</strong>
                        Showing ${MAX_RENDERED_PACKAGES.toLocaleString()} of ${totalFilteredPackages.toLocaleString()} matching packages for performance.
                        <strong>Use the search box to find specific packages</strong> - search works across all ${totalPackages.toLocaleString()} packages.
                    </div>`;
                }

                // Add legend
                html += '<div class="mt-3 mb-2"><small class="text-muted">';
                html += '<strong>Legend:</strong> ';
                html += '<span class="badge bg-success ms-2">✓ Success</span> ';
                html += '<span class="badge bg-primary ms-1"><i class="fas fa-circle-notch fa-spin"></i> Building/Dispatching/Signing</span> ';
                html += '<span class="badge bg-info ms-1">⏱ Scheduled</span> ';
                html += '<span class="badge bg-info ms-1">✔ Finished</span> ';
                html += '<span class="badge bg-danger ms-1">✗ Failure</span> ';
                html += '<span class="badge bg-danger ms-1">? Unresolvable (hover for details)</span> ';
                html += '<span class="badge bg-danger ms-1">⚠ Broken (hover for details)</span> ';
                html += '<span class="badge bg-secondary ms-1">○ Disabled</span> ';
                html += '<span class="badge bg-secondary ms-1">− Excluded</span> ';
                html += '<span class="badge bg-secondary ms-1">🔒 Locked</span> ';
                html += '<span class="badge bg-secondary ms-1">🗑 Deleting</span>';
                html += '</small></div>';

                // Save scroll position before updating content (for auto-refresh)
                let savedScrollTop = 0;
                let savedScrollLeft = 0;
                if (isAutoRefresh) {
                    // Find the scrollable element - could be tab-pane, body, or window
                    const tabPane = document.getElementById('monitor');
                    const scrollableElements = [
                        tabPane,
                        document.documentElement,
                        document.body,
                        window
                    ];

                    // Find the element that actually has scroll position
                    for (const elem of scrollableElements) {
                        if (elem === window) {
                            savedScrollTop = window.scrollY || window.pageYOffset || 0;
                            savedScrollLeft = window.scrollX || window.pageXOffset || 0;
                        } else if (elem && elem.scrollTop > 0) {
                            savedScrollTop = elem.scrollTop;
                            savedScrollLeft = elem.scrollLeft || 0;
                            break;
                        }
                    }
                }

                // Preserve search field value before clearing content
                const searchInput = document.getElementById('packageSearch');
                const searchValue = searchInput ? searchInput.value : '';

                // Clear old content first to ensure tooltips are reset
                content.innerHTML = '';

                // Update content with new HTML
                content.innerHTML = html;
                loader.style.display = 'none';
                content.style.display = 'block';

                // Restore search field value after content is updated
                if (searchValue) {
                    const newSearchInput = document.getElementById('packageSearch');
                    if (newSearchInput) {
                        newSearchInput.value = searchValue;
                    }
                }

                // Restore scroll position after content update
                if (isAutoRefresh && savedScrollTop > 0) {
                    // Use requestAnimationFrame to ensure DOM is fully updated
                    requestAnimationFrame(() => {
                        const tabPane = document.getElementById('monitor');
                        const scrollableElements = [
                            tabPane,
                            document.documentElement,
                            document.body
                        ];

                        // Try to restore to each possible scroll container
                        let restored = false;
                        for (const elem of scrollableElements) {
                            if (elem && elem.scrollTo !== undefined) {
                                elem.scrollTo(savedScrollLeft, savedScrollTop);
                                restored = true;
                            } else if (elem) {
                                elem.scrollTop = savedScrollTop;
                                elem.scrollLeft = savedScrollLeft;
                                restored = true;
                            }
                        }

                        // Fallback to window scroll
                        if (!restored) {
                            window.scrollTo(savedScrollLeft, savedScrollTop);
                        }
                    });
                }

                // Show filter buttons
                document.getElementById('monitorFilters').style.display = 'block';

                // Save full list on first load if not already saved (e.g., Overview tab might have saved it already)
                if (!projectCache.hasLoaded && !monitorLoaded && activeRepositories.size === 0 && activeArchitectures.size === 0 && activeFilters.size === 0) {
                    projectCache.repositories = new Set(repositories);
                    projectCache.architectures = new Set(architectures);
                    projectCache.hasLoaded = true;
                    console.log('[Monitor] Saved full list of repos/archs for', currentProjectName + ':', projectCache.repositories.size, 'repos,', projectCache.architectures.size, 'archs');
                }

                // Build repository filter checkboxes
                let repoFiltersHtml = `
                    <li>
                        <div class="dropdown-item">
                            <button class="btn btn-sm btn-outline-info me-2" onclick="selectAllRepositories(event)">All</button>
                            <button class="btn btn-sm btn-outline-info" onclick="selectNoRepositories(event)">None</button>
                        </div>
                    </li>
                    <li><hr class="dropdown-divider"></li>`;

                console.log('Building repository checkboxes. activeRepositories:', Array.from(activeRepositories));
                console.log('Available repositories from results:', Array.from(repositories));

                // Use saved full list if available, otherwise use current results
                const reposForCheckboxes = projectCache.repositories.size > 0 ? projectCache.repositories : repositories;

                repoFiltersHtml += Array.from(reposForCheckboxes).sort().map(repo => {
                    const isActive = activeRepositories.has(repo);
                    console.log(`Repository "${repo}": isActive = ${isActive}`);
                    const escapedRepo = repo.replace(/'/g, "\\'").replace(/"/g, '&quot;');
                    const repoId = 'repo_' + repo.replace(/[^a-zA-Z0-9]/g, '_');
                    return `<li>
                        <div class="dropdown-item">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="${repo}"
                                       id="${repoId}" ${isActive ? 'checked' : ''}
                                       onchange="toggleRepository('${escapedRepo}')">
                                <label class="form-check-label" for="${repoId}" style="cursor: pointer;">
                                    ${repo}
                                </label>
                            </div>
                        </div>
                    </li>`;
                }).join('');
                document.getElementById('repositoryFilters').innerHTML = repoFiltersHtml;

                // Prevent dropdown from closing when clicking checkboxes
                document.getElementById('repositoryFilters').addEventListener('click', function(e) {
                    e.stopPropagation();
                });

                // Build architecture filter checkboxes
                let archFiltersHtml = `
                    <li>
                        <div class="dropdown-item">
                            <button class="btn btn-sm btn-outline-warning me-2" onclick="selectAllArchitectures(event)">All</button>
                            <button class="btn btn-sm btn-outline-warning" onclick="selectNoArchitectures(event)">None</button>
                        </div>
                    </li>
                    <li><hr class="dropdown-divider"></li>`;

                console.log('Building architecture checkboxes. activeArchitectures:', Array.from(activeArchitectures));
                console.log('Available architectures from results:', Array.from(architectures));

                // Use saved full list if available, otherwise use current results
                const archsForCheckboxes = projectCache.architectures.size > 0 ? projectCache.architectures : architectures;

                archFiltersHtml += Array.from(archsForCheckboxes).sort().map(arch => {
                    const isActive = activeArchitectures.has(arch);
                    console.log(`Architecture "${arch}": isActive = ${isActive}`);
                    const archId = 'arch_' + arch.replace(/[^a-zA-Z0-9]/g, '_');
                    return `<li>
                        <div class="dropdown-item">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="${arch}"
                                       id="${archId}" ${isActive ? 'checked' : ''}
                                       onchange="toggleArchitecture('${arch}')">
                                <label class="form-check-label" for="${archId}" style="cursor: pointer;">
                                    ${arch}
                                </label>
                            </div>
                        </div>
                    </li>`;
                }).join('');
                document.getElementById('architectureFilters').innerHTML = archFiltersHtml;

                // Prevent dropdown from closing when clicking checkboxes
                document.getElementById('architectureFilters').addEventListener('click', function(e) {
                    e.stopPropagation();
                });

                // Apply filters when dropdowns close (performance optimization for large projects)
                const repoDropdown = document.getElementById('repoDropdown');
                const archDropdown = document.getElementById('archDropdown');

                if (repoDropdown) {
                    repoDropdown.addEventListener('hidden.bs.dropdown', function() {
                        console.log('Repository dropdown closed, applying filters...');
                        updateURLWithFilters();
                        applyRepoArchFilters();
                    });
                }

                if (archDropdown) {
                    archDropdown.addEventListener('hidden.bs.dropdown', function() {
                        console.log('Architecture dropdown closed, applying filters...');
                        updateURLWithFilters();
                        applyRepoArchFilters();
                    });
                }

                // Update filter button states to match activeFilters
                updateFilterButtons();

                // Update repo/arch checkbox states to match active filters
                updateRepoArchButtons();
                updateFilterCounts();

                // Apply repository/architecture filters first
                applyRepoArchFilters();

                // Apply status filters
                applyFilters();

                // Update last update time
                updateLastUpdateTime();

                // Focus package search field
                const packageSearchInput = document.getElementById('packageSearch');
                if (packageSearchInput) {
                    packageSearchInput.focus();
                }

                // Start auto-refresh if enabled and not already running and not in lastResult mode
                if (autoRefreshEnabled && !monitorRefreshInterval && !isAutoRefresh && !lastResultEnabled) {
                    startMonitorRefresh();
                }

                monitorLoaded = true;
            })
            .catch(error => {
                monitorAbortController = null;

                // Don't show errors for aborted requests (timeout or manual cancellation)
                if (error.name === 'AbortError') {
                    console.log('Monitor fetch aborted or timed out, will retry on next interval');
                    return;
                }

                console.error('Error loading build results:', error);
                content.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-triangle"></i> Error loading build results: ' + error.message + '</div>';
                loader.style.display = 'none';
                content.style.display = 'block';
            });
    }
}

// Listen for tab shown events to trigger lazy loading
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, setting up tab event listeners');

    // Set initial page title based on hash
    if (window.location.hash === '#monitor') {
        document.title = '{{ project_name }} (Monitor)';
    } else {
        document.title = '{{ project_name }}';
    }

    // Check for log parameter (from SVG badge clicks)
    const urlParams = new URLSearchParams(window.location.search);
    const logParam = urlParams.get('log');
    if (logParam) {
        console.log('[AUTO-OPEN] Log parameter found:', logParam);
        // Parse log parameter: repo/arch/package/status
        const parts = logParam.split('/');
        if (parts.length >= 4) {
            const repo = decodeURIComponent(parts[0]);
            const arch = decodeURIComponent(parts[1]);
            const pkg = decodeURIComponent(parts[2]);
            let status = decodeURIComponent(parts[3]);

            // Status might have details appended with colon (e.g., "unresolvable:something")
            // Split on colon to get the main status
            const statusParts = status.split(':');
            const mainStatus = statusParts[0];
            console.log('[AUTO-OPEN] Parsed status:', status, '-> main status:', mainStatus);

            // Wait a bit for the page to fully load, then show the log
            setTimeout(() => {
                console.log(`[AUTO-OPEN] Opening build log for ${pkg} @ ${repo}/${arch}, status: ${mainStatus}`);
                // Pass null instead of empty string to trigger error details fetch
                showBuildLog('{{ project_name }}', repo, arch, pkg, mainStatus, null);
            }, 500);
        }
    }

    // Load filters from URL if present
    const hasFilters = loadFiltersFromURL();
    if (hasFilters) {
        console.log('Filters found in URL, activating monitor tab');
        // Switch to monitor tab if filters are in URL
        window.location.hash = '#monitor';
        // Update title for monitor
        document.title = '{{ project_name }} (Monitor)';
    }

    // Activate tab from hash on page load (do this first)
    activateTabFromHash();

    document.getElementById('monitor-tab').addEventListener('shown.bs.tab', function() {
        console.log('Monitor tab shown event fired');
        console.log('Current activeArchitectures:', Array.from(activeArchitectures));
        console.log('Current activeRepositories:', Array.from(activeRepositories));
        console.log('Current activeFilters:', activeFilters);

        // Update page title
        document.title = '{{ project_name }} (Monitor)';

        // loadMonitorTab() will rebuild checkboxes and apply filters at the end
        loadMonitorTab();

        // Resume auto-refresh if it was enabled and not in Last Result mode
        if (autoRefreshEnabled && !monitorRefreshInterval && !lastResultEnabled) {
            startMonitorRefresh();
        }
        // Stop build overview auto-refresh when switching to monitor tab
        stopBuildOverviewAutoRefresh();
    });

    document.getElementById('overview-tab').addEventListener('shown.bs.tab', function() {
        console.log('Overview tab shown event fired');

        // Update page title (back to just project name)
        document.title = '{{ project_name }}';
        // Pause monitor auto-refresh when leaving monitor tab (but keep enabled state)
        if (monitorRefreshInterval) {
            clearInterval(monitorRefreshInterval);
            monitorRefreshInterval = null;
        }
        // Cancel any in-flight monitor request
        if (monitorAbortController) {
            monitorAbortController.abort();
            monitorAbortController = null;
        }
        // Resume build overview auto-refresh when returning to overview tab
        if (buildOverviewState) {
            startBuildOverviewAutoRefresh();
        }
    });

    // Fire parallel requests for faster page load
    // Both fetchBuildOverview and loadMonitorTab may fetch from the same endpoint,
    // but they're independent and should load in parallel

    // 1. Fetch build overview for the Overview tab (if element exists)
    const buildOverview = document.getElementById('buildOverview');
    const buildOverviewPromise = buildOverview ? fetchBuildOverview() : Promise.resolve();

    // 2. Check active tab and load monitor tab if needed
    const activeTab = document.querySelector('.nav-link.active');
    const targetId = activeTab ? activeTab.getAttribute('data-bs-target') : null;
    console.log('Initially active tab:', targetId);

    const monitorPromise = (targetId === '#monitor') ?
        // Use setTimeout to ensure DOM is ready, but don't block buildOverview
        new Promise(resolve => setTimeout(() => {
            loadMonitorTab();
            resolve();
        }, 50)) :
        Promise.resolve();

    // Both requests are now firing in parallel
    Promise.all([buildOverviewPromise, monitorPromise]).then(() => {
        console.log('Initial data loading complete');
    });
});

// Cleanup on page unload
window.addEventListener('beforeunload', function() {
    stopBuildOverviewAutoRefresh();
    stopMonitorRefresh();
});

// Replace placeholders in AI hint prompt
function replacePromptPlaceholders(prompt, context) {
    return prompt
        .replace(/{GITEA_SERVER}/g, context.gitea_server || GITEA_SERVER)
        .replace(/{GITEA_ORGANISATION}/g, context.gitea_organisation || GITEA_ORGANISATION)
        .replace(/{GIT_REPOSITORY}/g, context.git_repository || context.package)
        .replace(/{MY_INSTANCE_URL}/g, context.instance_url || MY_INSTANCE_URL)
        .replace(/{PROJECT}/g, context.project || '')
        .replace(/{REPOSITORY}/g, context.repository || '')
        .replace(/{ARCHITECTURE}/g, context.architecture || '')
        .replace(/{PACKAGE}/g, context.package || '');
}

// Copy AI hint to clipboard
function copyAIHint(hintText) {
    // Create temporary textarea to copy text
    const textarea = document.createElement('textarea');
    textarea.value = hintText;
    textarea.style.position = 'fixed';
    textarea.style.opacity = '0';
    document.body.appendChild(textarea);
    textarea.select();

    try {
        document.execCommand('copy');
        // Show success notification
        showNotification('AI prompt copied to clipboard!', 'success');
    } catch (err) {
        console.error('Failed to copy to clipboard:', err);
        showNotification('Failed to copy to clipboard', 'error');
    } finally {
        document.body.removeChild(textarea);
    }
}

// Show temporary notification
function showNotification(message, type = 'success') {
    const notification = document.createElement('div');
    notification.className = `alert alert-${type === 'success' ? 'success' : 'danger'} position-fixed`;
    notification.style.top = '20px';
    notification.style.right = '20px';
    notification.style.zIndex = '9999';
    notification.style.minWidth = '300px';
    notification.textContent = message;

    document.body.appendChild(notification);

    setTimeout(() => {
        notification.style.transition = 'opacity 0.3s';
        notification.style.opacity = '0';
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}

// Syntax highlighting for build logs
function highlightLogText(text) {
    if (!text) return '';

    const lines = text.split('\n');
    const highlightedLines = lines.map(line => {
        // Escape HTML entities
        const escaped = line
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');

        const lowerLine = line.toLowerCase();

        // Exclude false positives (not errors or warnings, just normal output)
        if (lowerLine.match(/failed to start.*virtual console setup/i) ||
            lowerLine.match(/dmesg.*may have more information after failed mount/i)) {
            return escaped;
        }

        // Warning patterns (check first to avoid being caught by error patterns)
        if (lowerLine.match(/\bwarning\b.*:/i) ||
            lowerLine.match(/\bwarn\b:/i) ||
            lowerLine.match(/\bdeprecated\b/i) ||
            line.match(/^warning:/i)) {
            return `<span class="log-warning">${escaped}</span>`;
        }

        // Error patterns (highest priority after warnings)
        if (lowerLine.match(/\berror\b.*:/i) ||
            lowerLine.match(/\bfailed\b/i) ||
            lowerLine.match(/\bfailure\b/i) ||
            lowerLine.match(/\bcritical\b/i) ||
            lowerLine.match(/\bfatal\b/i) ||
            lowerLine.match(/\bsegmentation fault\b/i) ||
            lowerLine.match(/\bcore dumped\b/i) ||
            line.match(/^make.*:\s*\*\*\*/i) ||
            line.match(/^error:/i)) {
            return `<span class="log-error">${escaped}</span>`;
        }

        // Success patterns
        if (lowerLine.match(/\bsuccess\b/i) ||
            lowerLine.match(/\bsucceed/i) ||
            lowerLine.match(/\bcompleted successfully\b/i) ||
            lowerLine.match(/\b\d+ tests? passed\b/i) ||
            line.match(/^\[.*ok.*\]/i)) {
            return `<span class="log-success">${escaped}</span>`;
        }

        // Info patterns
        if (lowerLine.match(/^info:/i) ||
            lowerLine.match(/^note:/i) ||
            lowerLine.match(/^\[.*info.*\]/i)) {
            return `<span class="log-info">${escaped}</span>`;
        }

        // Debug patterns
        if (lowerLine.match(/^debug:/i) ||
            lowerLine.match(/^\[.*debug.*\]/i)) {
            return `<span class="log-debug">${escaped}</span>`;
        }

        // Default: return escaped line
        return escaped;
    });

    return highlightedLines.join('\n');
}

// Show build log in modal
// Wrapper function to extract details from data attribute
function showBuildLogFromElement(element, project, repo, arch, pkg, status) {
    const errorDetails = element.getAttribute('data-details') || null;
    showBuildLog(project, repo, arch, pkg, status, errorDetails);
}

// Global variables to store current log parameters for sharing
let currentLogParams = null;

function showBuildLog(project, repo, arch, pkg, status, errorDetails) {
    console.log('[BUILD LOG] Show build log called:', {project, repo, arch, pkg, status, errorDetails: errorDetails ? 'provided' : 'not provided'});

    // Store current log parameters for sharing
    currentLogParams = { project, repo, arch, pkg, status };

    // Update download link
    const downloadUrl = `/obs/build/${encodeURIComponent(project)}/${encodeURIComponent(repo)}/${encodeURIComponent(arch)}/${encodeURIComponent(pkg)}/_log?nostream=1&start=0`;
    const downloadLink = document.getElementById('logDownloadLink');
    downloadLink.href = downloadUrl;
    downloadLink.download = `${pkg}_${repo}_${arch}.log`;

    // Update modal title - only show LIVE indicator for actually building jobs
    const isLive = status === 'building';
    const liveIndicator = isLive ? ' <span class="badge bg-primary"><i class="fas fa-circle-notch fa-spin"></i> LIVE</span>' : '';
    document.getElementById('logTitle').innerHTML = `${pkg} @ ${repo}/${arch} (${status})${liveIndicator}`;

    // Setup AI hint button for failed builds
    const aiHintBtn = document.getElementById('logAIHintBtn');
    if (SHOW_AI_HINTS && AI_HINTS && (status === 'failed' || status === 'unresolvable' || status === 'broken')) {
        const hintKey = status;
        if (AI_HINTS[hintKey] && AI_HINTS[hintKey].buttons && AI_HINTS[hintKey].buttons.length > 0) {
            // Create context for placeholder replacement
            const promptContext = {
                gitea_server: GITEA_SERVER,
                gitea_organisation: GITEA_ORGANISATION,
                git_repository: pkg,
                instance_url: MY_INSTANCE_URL,
                project: project,
                repository: repo,
                architecture: arch,
                package: pkg
            };

            const button = AI_HINTS[hintKey].buttons[0]; // Use first button
            const processedPrompt = replacePromptPlaceholders(button.prompt, promptContext);

            // Set up click handler
            aiHintBtn.onclick = function() {
                copyAIHint(processedPrompt);
            };
            aiHintBtn.title = button.tooltip;
            aiHintBtn.style.display = 'block';
        } else {
            aiHintBtn.style.display = 'none';
        }
    } else {
        aiHintBtn.style.display = 'none';
    }

    // Reset modal state
    document.getElementById('buildLogLoader').style.display = 'block';
    document.getElementById('buildLogError').style.display = 'none';
    document.getElementById('buildErrorDetails').style.display = 'none';
    document.getElementById('buildLogContent').style.display = 'none';
    document.getElementById('buildLogContent').textContent = '';
    document.getElementById('buildErrorDetailsContent').textContent = '';

    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('buildLogModal'));
    modal.show();

    // Focus search input when modal is shown
    document.getElementById('buildLogModal').addEventListener('shown.bs.modal', function() {
        document.getElementById('logSearchInput').focus();
    }, { once: true });

    // For broken/unresolvable states, use provided details or fetch from /_result
    const showErrorDetails = ['broken', 'unresolvable'].includes(status);
    console.log('[BUILD LOG] Status:', status, 'showErrorDetails:', showErrorDetails, 'has errorDetails:', !!errorDetails);

    if (showErrorDetails && !errorDetails) {
        console.log('[BUILD LOG] Fetching error details because status is broken/unresolvable and no details provided');
        // Fetch from project-level /_result endpoint with filters for this specific package/repo/arch
        const resultUrl = `/obs/build/${encodeURIComponent(project)}/_result?package=${encodeURIComponent(pkg)}&repository=${encodeURIComponent(repo)}&arch=${encodeURIComponent(arch)}`;
        console.log('[BUILD LOG] Fetching error details from:', resultUrl);

        fetch(resultUrl)
            .then(response => {
                console.log('[BUILD LOG] Result response status:', response.status);
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}`);
                }
                return response.text();
            })
            .then(resultXml => {
                console.log('[BUILD LOG] Result XML received, length:', resultXml.length);
                console.log('[BUILD LOG] Result XML content:', resultXml);

                // Parse XML to extract details for the specific package
                const parser = new DOMParser();
                const xmlDoc = parser.parseFromString(resultXml, 'text/xml');

                // Check for parsing errors
                const parseError = xmlDoc.querySelector('parsererror');
                if (parseError) {
                    console.error('[BUILD LOG] XML parse error:', parseError.textContent);
                    throw new Error('XML parse error');
                }

                // Find the status element - should be filtered by OBS already
                // XML format: <resultlist><result repository="..." arch="..."><status package="..." code="..." details="..."/></result></resultlist>
                let details = null;

                // Try multiple selectors to find the status element
                let statusElem = xmlDoc.querySelector('status');
                if (!statusElem) {
                    statusElem = xmlDoc.querySelector('result status');
                }
                if (!statusElem) {
                    // Try to find any status element with matching package attribute
                    const allStatus = xmlDoc.querySelectorAll('status');
                    for (const s of allStatus) {
                        if (s.getAttribute('package') === pkg) {
                            statusElem = s;
                            break;
                        }
                    }
                }

                if (statusElem) {
                    // Details can be either an attribute or a child element
                    const detailsElem = statusElem.querySelector('details');
                    details = detailsElem ? detailsElem.textContent : statusElem.getAttribute('details');
                    const code = statusElem.getAttribute('code');
                    const pkgAttr = statusElem.getAttribute('package');
                    console.log('[BUILD LOG] Found status element - package:', pkgAttr, 'code:', code, 'details:', details);

                    // Make sure details is not empty string
                    if (details === '') {
                        console.log('[BUILD LOG] Details attribute is empty string, setting to null');
                        details = null;
                    }
                } else {
                    console.log('[BUILD LOG] No status element found in response');
                    console.log('[BUILD LOG] Available elements:', xmlDoc.documentElement.outerHTML);
                }

                console.log('[BUILD LOG] Final details value to pass:', details);
                // Now fetch the log (might be from a previous build)
                fetchBuildLogWithDetails(project, repo, arch, pkg, status, isLive, details);
            })
            .catch(error => {
                console.error('[BUILD LOG] Error fetching result details:', error);
                // Continue with log fetch even if result fetch fails
                fetchBuildLogWithDetails(project, repo, arch, pkg, status, isLive, null);
            });
    } else {
        // Details provided or not needed, fetch the log directly
        console.log('[BUILD LOG] Skipping error details fetch - either not broken/unresolvable or details already provided');
        fetchBuildLogWithDetails(project, repo, arch, pkg, status, isLive, errorDetails || null);
    }
}

// Load previous build log when user clicks button (for broken/unresolvable states)
function loadPreviousBuildLog(project, repo, arch, pkg, status, isLive) {
    console.log('Loading previous build log...');

    // Update the error details box to show loading message
    const detailsBox = document.getElementById('buildErrorDetails');
    const errorDetailsContentElem = detailsBox.querySelector('#buildErrorDetailsContent');
    const errorDetailsText = errorDetailsContentElem ? errorDetailsContentElem.textContent : '';

    detailsBox.innerHTML = `
        <h6 class="alert-heading"><i class="fas fa-exclamation-triangle"></i> Build Error Details</h6>
        <hr>
        <pre id="buildErrorDetailsContent" class="mb-0" style="white-space: pre-wrap; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; font-size: 0.85rem; background: transparent; border: none; padding: 0; color: inherit;">${errorDetailsText}</pre>
        <hr class="my-2">
        <small class="text-muted"><i class="fas fa-info-circle"></i> The build log below (if present) is from a previous build attempt.</small>
    `;

    // Show loader and hide content
    document.getElementById('buildLogLoader').style.display = 'block';
    document.getElementById('buildLogContent').style.display = 'none';

    // Show log-related buttons now that we're loading the log
    document.getElementById('logJumpToError').style.display = 'inline-block';
    document.getElementById('logDownloadLink').style.display = 'inline-block';
    // logJumpToBottom will be shown/hidden by scroll handler

    // Build log URL - always use nostream=1
    let logUrl = `/obs/build/${encodeURIComponent(project)}/${encodeURIComponent(repo)}/${encodeURIComponent(arch)}/${encodeURIComponent(pkg)}/_log?nostream=1&start=0`;

    // Fetch and display the log (no tail mode for previous logs)
    actuallyFetchBuildLog(logUrl, project, repo, arch, pkg, status, isLive, errorDetailsText, false, 0, 0);
}

// Fetch build log with optional error details in separate section
function fetchBuildLogWithDetails(project, repo, arch, pkg, status, isLive, errorDetails) {
    console.log('[FETCH LOG] Called with errorDetails:', errorDetails, 'type:', typeof errorDetails, 'truthy:', !!errorDetails);

    // First, check log size to decide whether to fetch full log or tail
    const sizeCheckUrl = `/obs/build/${encodeURIComponent(project)}/${encodeURIComponent(repo)}/${encodeURIComponent(arch)}/${encodeURIComponent(pkg)}/_log?view=entry`;

    fetch(sizeCheckUrl)
        .then(response => response.text())
        .then(xml => {
            const parser = new DOMParser();
            const xmlDoc = parser.parseFromString(xml, 'text/xml');
            const entryElement = xmlDoc.querySelector('entry[name="_log"]');
            const logSize = entryElement ? parseInt(entryElement.getAttribute('size')) : 0;

            console.log('[FETCH LOG] Log size:', logSize, 'bytes');

            // Proceed with actual log fetch, passing the size info
            fetchBuildLogWithSize(project, repo, arch, pkg, status, isLive, errorDetails, logSize);
        })
        .catch(error => {
            console.error('[FETCH LOG] Error checking log size:', error);
            // Fallback to fetching without size info
            fetchBuildLogWithSize(project, repo, arch, pkg, status, isLive, errorDetails, 0);
        });
}

// Fetch build log knowing the size
function fetchBuildLogWithSize(project, repo, arch, pkg, status, isLive, errorDetails, logSize) {
    // Build log URL - always use nostream=1 to avoid hanging on stalled builds
    // For large logs (> 1MB), fetch only the tail (last 500KB)
    const MAX_SIZE_FULL = 1024 * 1024; // 1MB
    const TAIL_SIZE = 500 * 1024; // 500KB

    let logUrl = `/obs/build/${encodeURIComponent(project)}/${encodeURIComponent(repo)}/${encodeURIComponent(arch)}/${encodeURIComponent(pkg)}/_log?nostream=1`;
    let isTailOnly = false;
    let startByte = 0;

    if (logSize > MAX_SIZE_FULL) {
        // Fetch only tail for large logs
        startByte = Math.max(0, logSize - TAIL_SIZE);
        logUrl += `&start=${startByte}`;
        isTailOnly = true;
        console.log('[FETCH LOG] Large log detected, fetching tail only from byte', startByte);
    } else {
        logUrl += '&start=0';
        console.log('[FETCH LOG] Fetching full log');
    }

    console.log('[FETCH LOG] Fetching log from:', logUrl);

    // Determine if this is an error or active build
    const isError = ['broken', 'unresolvable', 'failed'].includes(status);
    const isActive = ['building', 'dispatching', 'signing', 'scheduled'].includes(status);
    const isBlocked = status === 'blocked';
    const isBrokenOrUnresolvable = ['broken', 'unresolvable'].includes(status);
    // States that should hide the build log by default and show "Show Previous Build Log" button
    const shouldHideLogByDefault = ['broken', 'unresolvable', 'scheduled', 'dispatching', 'blocked'].includes(status);

    console.log('[FETCH LOG] Status checks - isError:', isError, 'isActive:', isActive, 'isBlocked:', isBlocked, 'isBrokenOrUnresolvable:', isBrokenOrUnresolvable, 'shouldHideLogByDefault:', shouldHideLogByDefault);

    // Show details in separate section if available, or show button for states that need it
    const detailsBox = document.getElementById('buildErrorDetails');

    // Show details box if we have error details OR if we should hide log by default
    if (errorDetails || shouldHideLogByDefault) {
        if (errorDetails) {
            console.log('[FETCH LOG] errorDetails is truthy, showing details box with content:', errorDetails.substring(0, 100));
        }

        // Style differently for errors vs active builds
        if (isError) {
            detailsBox.className = 'alert alert-danger m-3';

            // For states that should hide log by default, add a button to show previous build log
            if (shouldHideLogByDefault) {
                const detailsContent = errorDetails ? `
                    <h6 class="alert-heading"><i class="fas fa-exclamation-triangle"></i> Build Error Details</h6>
                    <hr>
                    <pre id="buildErrorDetailsContent" class="mb-0" style="white-space: pre-wrap; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; font-size: 0.85rem; background: transparent; border: none; padding: 0; color: inherit;">${errorDetails}</pre>
                    <hr class="my-2">` : '';

                detailsBox.innerHTML = detailsContent + `
                    <button class="btn btn-sm btn-outline-secondary" id="showPreviousLogBtn">
                        <i class="fas fa-file-alt"></i> Show Previous Build Log
                    </button>
                `;

                // Add click handler for the button
                setTimeout(() => {
                    const btn = document.getElementById('showPreviousLogBtn');
                    if (btn) {
                        btn.addEventListener('click', () => {
                            loadPreviousBuildLog(project, repo, arch, pkg, status, isLive);
                        });
                    }
                }, 0);
            } else {
                detailsBox.innerHTML = `
                    <h6 class="alert-heading"><i class="fas fa-exclamation-triangle"></i> Build Error Details</h6>
                    <hr>
                    <pre id="buildErrorDetailsContent" class="mb-0" style="white-space: pre-wrap; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; font-size: 0.85rem; background: transparent; border: none; padding: 0; color: inherit;">${errorDetails}</pre>
                    <hr class="my-2">
                    <small class="text-muted"><i class="fas fa-info-circle"></i> Note: The build log below (if present) is from a previous build attempt.</small>
                `;
            }
        } else if (isActive) {
            detailsBox.className = 'alert alert-info m-3';

            // For scheduled/dispatching states, add button to show previous build log
            if (shouldHideLogByDefault) {
                // Get appropriate status message
                let statusMessage = '';
                if (status === 'scheduled') {
                    statusMessage = '<i class="fas fa-clock"></i> Build job is scheduled and waiting to be dispatched to a build worker.';
                } else if (status === 'dispatching') {
                    statusMessage = '<i class="fas fa-sync-alt"></i> Build job is being dispatched to a build worker.';
                }

                const detailsContent = errorDetails ? `
                    <h6 class="alert-heading"><i class="fas fa-info-circle"></i> Build Status</h6>
                    <p class="mb-2">${statusMessage}</p>
                    <hr>
                    <pre id="buildErrorDetailsContent" class="mb-0" style="white-space: pre-wrap; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; font-size: 0.85rem; background: transparent; border: none; padding: 0; color: inherit;">${errorDetails}</pre>
                    <hr class="my-2">` : `
                    <h6 class="alert-heading"><i class="fas fa-info-circle"></i> Build Status</h6>
                    <p class="mb-3">${statusMessage}</p>
                    <hr class="my-2">`;

                detailsBox.innerHTML = detailsContent + `
                    <button class="btn btn-sm btn-outline-secondary" id="showPreviousLogBtn">
                        <i class="fas fa-file-alt"></i> Show Previous Build Log
                    </button>
                `;

                // Add click handler for the button
                setTimeout(() => {
                    const btn = document.getElementById('showPreviousLogBtn');
                    if (btn) {
                        btn.addEventListener('click', () => {
                            loadPreviousBuildLog(project, repo, arch, pkg, status, isLive);
                        });
                    }
                }, 0);
            } else {
                detailsBox.innerHTML = `
                    <pre id="buildErrorDetailsContent" class="mb-0" style="white-space: pre-wrap; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; font-size: 0.85rem; background: transparent; border: none; padding: 0; color: inherit;">${errorDetails}</pre>
                `;
            }
        } else if (isBlocked) {
            // Blocked state - show warning styling with button
            detailsBox.className = 'alert alert-warning m-3';

            const statusMessage = '<i class="fas fa-pause-circle"></i> Build is blocked, waiting for dependencies to complete.';

            const detailsContent = errorDetails ? `
                <h6 class="alert-heading"><i class="fas fa-exclamation-triangle"></i> Build Blocked</h6>
                <p class="mb-2">${statusMessage}</p>
                <hr>
                <pre id="buildErrorDetailsContent" class="mb-0" style="white-space: pre-wrap; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; font-size: 0.85rem; background: transparent; border: none; padding: 0; color: inherit;">${errorDetails}</pre>
                <hr class="my-2">` : `
                <h6 class="alert-heading"><i class="fas fa-exclamation-triangle"></i> Build Blocked</h6>
                <p class="mb-3">${statusMessage}</p>
                <hr class="my-2">`;

            detailsBox.innerHTML = detailsContent + `
                <button class="btn btn-sm btn-outline-secondary" id="showPreviousLogBtn">
                    <i class="fas fa-file-alt"></i> Show Previous Build Log
                </button>
            `;

            // Add click handler for the button
            setTimeout(() => {
                const btn = document.getElementById('showPreviousLogBtn');
                if (btn) {
                    btn.addEventListener('click', () => {
                        loadPreviousBuildLog(project, repo, arch, pkg, status, isLive);
                    });
                }
            }, 0);
        } else {
            // Other statuses - neutral styling
            detailsBox.className = 'alert alert-warning m-3';
            detailsBox.innerHTML = `
                <pre id="buildErrorDetailsContent" class="mb-0" style="white-space: pre-wrap; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace; font-size: 0.85rem; background: transparent; border: none; padding: 0; color: inherit;">${errorDetails}</pre>
            `;
        }
        detailsBox.style.display = 'block';
    } else {
        detailsBox.style.display = 'none';
    }

    // For states that should hide log by default, don't fetch log automatically
    // This includes: broken, unresolvable, scheduled, dispatching, blocked
    if (shouldHideLogByDefault) {
        console.log('State should hide log by default (' + status + ') - not fetching log automatically');
        document.getElementById('buildLogLoader').style.display = 'none';
        document.getElementById('buildLogContent').style.display = 'none';

        // Hide log-related buttons when log is not shown
        document.getElementById('logJumpToError').style.display = 'none';
        document.getElementById('logJumpToBottom').style.display = 'none';
        document.getElementById('logDownloadLink').style.display = 'none';
        document.getElementById('logRefreshBtn').style.display = 'none';
        document.getElementById('logLoadFullBtn').style.display = 'none';

        return;
    }

    // Fetch the log
    actuallyFetchBuildLog(logUrl, project, repo, arch, pkg, status, isLive, errorDetails, isTailOnly, logSize, startByte);
}

// Actually fetch and display the build log
function actuallyFetchBuildLog(logUrl, project, repo, arch, pkg, status, isLive, errorDetails, isTailOnly, logSize, startByte) {
    // Determine if this is an active build (only 'building' is actually live/streaming)
    const isActive = status === 'building';

    // Ensure log-related buttons are visible when fetching log
    document.getElementById('logJumpToError').style.display = 'inline-block';
    document.getElementById('logDownloadLink').style.display = 'inline-block';
    // logJumpToBottom visibility is controlled by scroll handler

    // Show refresh button for building jobs
    const refreshBtn = document.getElementById('logRefreshBtn');
    if (status === 'building') {
        refreshBtn.style.display = 'inline-block';
        refreshBtn.onclick = function() {
            console.log('[LOG] Manual refresh triggered');
            // Re-fetch the log
            showBuildLog(project, repo, arch, pkg, status, errorDetails);
        };
    } else {
        refreshBtn.style.display = 'none';
    }

    // Show "Load Full Log" button if showing tail only
    const loadFullBtn = document.getElementById('logLoadFullBtn');
    if (isTailOnly) {
        loadFullBtn.style.display = 'inline-block';
        loadFullBtn.onclick = function() {
            console.log('[LOG] Loading full log');
            // Fetch full log by calling with start=0
            const fullLogUrl = `/obs/build/${encodeURIComponent(project)}/${encodeURIComponent(repo)}/${encodeURIComponent(arch)}/${encodeURIComponent(pkg)}/_log?nostream=1&start=0`;
            actuallyFetchBuildLog(fullLogUrl, project, repo, arch, pkg, status, isLive, errorDetails, false, logSize, 0);
        };
    } else {
        loadFullBtn.style.display = 'none';
    }

    fetch(logUrl)
        .then(response => {
            // If log not found (404), show message
            if (!response.ok && response.status === 404) {
                console.log('Build log not found (404)');
                const logContent = document.getElementById('buildLogContent');
                document.getElementById('buildLogLoader').style.display = 'none';
                logContent.style.display = 'block';

                if (errorDetails) {
                    logContent.textContent = 'No build log available (no previous build attempt).';
                } else {
                    logContent.textContent = `Build Status: ${status}\n\nNo build log available for this status.`;
                }

                // Return a marker to indicate we handled this case
                return { handled: true };
            }

            // For other errors, throw
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }

            // Return response and a flag indicating this needs further processing
            return { response: response, handled: false };
        })
        .then(result => {
            // If we already handled the 404 case, skip further processing
            if (result && result.handled) {
                return;
            }

            const response = result.response;
            const logContent = document.getElementById('buildLogContent');
            document.getElementById('buildLogLoader').style.display = 'none';
            logContent.style.display = 'block';

            // Always use non-streaming (nostream=1) to avoid hangs
            return response.text().then(text => {
                // Add banner if showing tail only
                let displayText = text;
                if (isTailOnly) {
                    const sizeMB = (logSize / (1024 * 1024)).toFixed(2);
                    const shownKB = ((logSize - startByte) / 1024).toFixed(0);
                    const banner = `[Log is ${sizeMB} MB - showing last ${shownKB} KB. Click "Load Full Log" button above to see complete log]\n\n`;
                    displayText = banner + text;
                }

                const lineCount = displayText.split('\n').length;

                // For active builds, disable highlighting on large logs for performance
                // For completed builds, always apply highlighting
                const shouldHighlight = !isActive || lineCount < 100;

                if (shouldHighlight) {
                    logContent.innerHTML = highlightLogText(displayText);
                } else {
                    logContent.textContent = displayText;
                }

                // Scroll to first error if found (only if we applied highlighting), otherwise scroll to bottom
                setTimeout(() => {
                    if (shouldHighlight) {
                        const firstError = logContent.querySelector('.log-error');
                        if (firstError) {
                            firstError.scrollIntoView({ behavior: 'auto', block: 'center' });
                            return;
                        }
                    }
                    logContent.scrollTop = logContent.scrollHeight;
                }, 100);
            });
        })
        .catch(error => {
            console.error('Error loading build log:', error);
            document.getElementById('buildLogLoader').style.display = 'none';
            document.getElementById('buildLogError').style.display = 'block';
            document.getElementById('buildLogErrorMsg').textContent = error.message;
        });
}

// Log search functionality
let logSearchMatches = [];
let logSearchCurrentIndex = -1;
let logSearchOriginalText = '';
let logSearchTerm = '';

function performLogSearch(searchTerm) {
    const logContent = document.getElementById('buildLogContent');

    // Get current text (either from original or current content)
    const currentText = logContent.textContent;
    logSearchOriginalText = currentText;
    logSearchTerm = searchTerm;

    logSearchMatches = [];
    logSearchCurrentIndex = -1;

    if (!searchTerm) {
        // Clear search highlights but restore syntax highlighting
        logContent.innerHTML = highlightLogText(currentText);
        document.getElementById('logSearchCount').textContent = '0/0';
        return;
    }

    const text = currentText;
    const lowerText = text.toLowerCase();
    const lowerSearch = searchTerm.toLowerCase();

    // Find all matches
    let pos = 0;
    while ((pos = lowerText.indexOf(lowerSearch, pos)) !== -1) {
        logSearchMatches.push(pos);
        pos += searchTerm.length;
    }

    if (logSearchMatches.length > 0) {
        // Start from bottom if backward search is enabled
        const isBackward = document.getElementById('logSearchBackward').checked;
        logSearchCurrentIndex = isBackward ? logSearchMatches.length - 1 : 0;
        highlightLogMatches(searchTerm);
        scrollToCurrentMatch();
    }

    if (logSearchMatches.length > 0) {
        const currentPos = logSearchCurrentIndex + 1;
        document.getElementById('logSearchCount').textContent = `${currentPos}/${logSearchMatches.length}`;
    } else {
        document.getElementById('logSearchCount').textContent = '0/0';
    }
}

function highlightLogMatches(searchTerm) {
    const logContent = document.getElementById('buildLogContent');
    const text = logSearchOriginalText || logContent.textContent;

    // First get syntax-highlighted HTML
    let html = highlightLogText(text);

    // Then add search match highlighting on top
    // Replace search term with marked version (case-insensitive)
    const searchRegex = new RegExp(searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
    let matchCount = 0;

    html = html.replace(searchRegex, (match) => {
        const matchClass = matchCount === logSearchCurrentIndex ? 'log-search-current' : 'log-search-match';
        matchCount++;
        return `<mark class="${matchClass}">${match}</mark>`;
    });

    // Preserve scroll position
    const scrollPos = logContent.scrollTop;
    logContent.innerHTML = html;
    logContent.scrollTop = scrollPos;
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function scrollToCurrentMatch() {
    const logContent = document.getElementById('buildLogContent');
    const currentMark = logContent.querySelector('.log-search-current');
    if (currentMark) {
        // Scroll to center the match
        const markTop = currentMark.offsetTop;
        logContent.scrollTop = markTop - logContent.clientHeight / 2;
    }
}

function navigateLogSearch(direction) {
    if (logSearchMatches.length === 0) return;

    logSearchCurrentIndex += direction;

    // Wrap around
    if (logSearchCurrentIndex < 0) {
        logSearchCurrentIndex = logSearchMatches.length - 1;
    } else if (logSearchCurrentIndex >= logSearchMatches.length) {
        logSearchCurrentIndex = 0;
    }

    const searchTerm = document.getElementById('logSearchInput').value;
    highlightLogMatches(searchTerm);
    scrollToCurrentMatch();

    document.getElementById('logSearchCount').textContent =
        `${logSearchCurrentIndex + 1}/${logSearchMatches.length}`;
}

// Search event listeners
document.getElementById('logSearchInput').addEventListener('input', function(e) {
    performLogSearch(e.target.value);
});

document.getElementById('logSearchNext').addEventListener('click', function() {
    navigateLogSearch(1);
});

document.getElementById('logSearchPrev').addEventListener('click', function() {
    navigateLogSearch(-1);
});

document.getElementById('logSearchClear').addEventListener('click', function() {
    document.getElementById('logSearchInput').value = '';
    const logContent = document.getElementById('buildLogContent');
    if (logSearchOriginalText) {
        logContent.textContent = logSearchOriginalText;
    }
    logSearchMatches = [];
    logSearchCurrentIndex = -1;
    logSearchOriginalText = '';
    document.getElementById('logSearchCount').textContent = '0/0';
});

// Jump to next error
let currentErrorIndex = -1;
document.getElementById('logJumpToError').addEventListener('click', function() {
    const logContent = document.getElementById('buildLogContent');
    const errors = logContent.querySelectorAll('.log-error');

    if (errors.length === 0) {
        return;
    }

    currentErrorIndex = (currentErrorIndex + 1) % errors.length;
    errors[currentErrorIndex].scrollIntoView({ behavior: 'auto', block: 'center' });

    // Briefly highlight the current error
    const prevHighlighted = logContent.querySelector('.log-error-current');
    if (prevHighlighted) {
        prevHighlighted.classList.remove('log-error-current');
    }
    errors[currentErrorIndex].classList.add('log-error-current');
});

// Jump to end button
document.getElementById('logJumpToBottom').addEventListener('click', function() {
    const logContent = document.getElementById('buildLogContent');
    logContent.scrollTop = logContent.scrollHeight;
});

// Show/hide "Jump to End" button based on scroll position
let logScrollTimeout;
document.getElementById('buildLogContent').addEventListener('scroll', function() {
    // Debounce the scroll event for better performance
    clearTimeout(logScrollTimeout);
    logScrollTimeout = setTimeout(() => {
        const logContent = this;
        const jumpToBottomBtn = document.getElementById('logJumpToBottom');

        // Check if user is near the bottom (within 100px)
        const isNearBottom = (logContent.scrollHeight - logContent.scrollTop - logContent.clientHeight) < 100;

        // Show button only when not at bottom
        if (isNearBottom) {
            jumpToBottomBtn.style.display = 'none';
        } else {
            jumpToBottomBtn.style.display = 'inline-block';
        }
    }, 100); // 100ms debounce
});

// Share log link
document.getElementById('logShareLink').addEventListener('click', function() {
    console.log('[SHARE LOG] Button clicked');
    console.log('[SHARE LOG] currentLogParams:', currentLogParams);

    if (!currentLogParams) {
        console.error('[SHARE LOG] currentLogParams is not set!');
        alert('Error: Log parameters not available. Please try reopening the log.');
        return;
    }

    const { project, repo, arch, pkg, status } = currentLogParams;
    console.log('[SHARE LOG] Extracted params:', { project, repo, arch, pkg, status });

    // Create link to project page with parameters to auto-open the log modal
    const params = new URLSearchParams({
        show_log: 'true',
        package: pkg,
        repository: repo,
        arch: arch,
        status: status
    });
    const fullUrl = `${window.location.origin}/projects/${encodeURIComponent(project)}?${params.toString()}`;
    console.log('[SHARE LOG] Full URL:', fullUrl);

    // Copy to clipboard with fallback for HTTP (non-secure) contexts
    function copyToClipboard(text) {
        // Try modern Clipboard API first (requires HTTPS)
        if (navigator.clipboard && navigator.clipboard.writeText) {
            return navigator.clipboard.writeText(text);
        }

        // Fallback for HTTP: use older execCommand method
        return new Promise((resolve, reject) => {
            const textArea = document.createElement('textarea');
            textArea.value = text;

            // Make it visible but off-screen for better browser compatibility
            textArea.style.position = 'absolute';
            textArea.style.left = '-9999px';
            textArea.style.top = '0';
            textArea.style.opacity = '0';
            textArea.setAttribute('readonly', '');

            document.body.appendChild(textArea);

            // For iOS compatibility
            if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
                const range = document.createRange();
                range.selectNodeContents(textArea);
                const selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
                textArea.setSelectionRange(0, 999999);
            } else {
                textArea.select();
                textArea.focus();
            }

            try {
                const successful = document.execCommand('copy');
                console.log('[SHARE LOG] execCommand result:', successful);
                document.body.removeChild(textArea);

                if (successful) {
                    resolve();
                } else {
                    reject(new Error('execCommand returned false'));
                }
            } catch (err) {
                console.error('[SHARE LOG] execCommand exception:', err);
                document.body.removeChild(textArea);
                reject(err);
            }
        });
    }

    copyToClipboard(fullUrl).then(() => {
        console.log('[SHARE LOG] Successfully copied to clipboard');
        // Show success notification
        const notification = document.createElement('div');
        notification.style.cssText = 'position: fixed; top: 20px; right: 20px; background: #28a745; color: white; padding: 15px 20px; border-radius: 5px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); z-index: 10000; font-size: 14px; max-width: 500px; word-break: break-all;';
        notification.innerHTML = `<i class="fas fa-check-circle me-2"></i> Build log link copied to clipboard!<br><small class="mt-1 d-block" style="opacity: 0.9;">${fullUrl}</small>`;
        document.body.appendChild(notification);

        setTimeout(() => {
            notification.style.transition = 'opacity 0.3s';
            notification.style.opacity = '0';
            setTimeout(() => {
                document.body.removeChild(notification);
            }, 300);
        }, 3000);
    }).catch(err => {
        console.error('Failed to copy link:', err);
        // Show a modal with selectable text as fallback
        const modal = document.createElement('div');
        modal.style.cssText = 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 10001; max-width: 80%;';
        modal.innerHTML = `
            <h5 style="margin-top: 0; color: #333;">Copy Build Log Link</h5>
            <p style="color: #666; margin-bottom: 10px;">Click the text below to select it, then press Ctrl+C (Cmd+C on Mac) to copy:</p>
            <input type="text" value="${fullUrl.replace(/"/g, '&quot;')}" readonly
                   style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; font-size: 12px;"
                   onclick="this.select()">
            <button onclick="this.parentElement.remove()"
                    style="margin-top: 15px; padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer;">
                Close
            </button>
        `;
        document.body.appendChild(modal);

        // Auto-select the input
        const input = modal.querySelector('input');
        input.select();
        input.focus();
    });
});

// Clear search when modal is closed
document.getElementById('buildLogModal').addEventListener('hidden.bs.modal', function() {
    document.getElementById('logSearchInput').value = '';
    logSearchMatches = [];
    logSearchCurrentIndex = -1;
    logSearchOriginalText = '';
    currentErrorIndex = -1;
    document.getElementById('logSearchCount').textContent = '0/0';
});

// Auto-open build log modal from URL parameters (for shared links)
window.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('show_log') === 'true') {
        const pkg = urlParams.get('package');
        const repo = urlParams.get('repository');
        const arch = urlParams.get('arch');
        const status = urlParams.get('status');

        if (pkg && repo && arch && status) {
            const project = '{{ project_name }}';

            // Open the modal after a short delay to ensure page is fully loaded
            setTimeout(() => {
                showBuildLog(project, repo, arch, pkg, status, null);
                const modal = new bootstrap.Modal(document.getElementById('buildLogModal'));
                modal.show();

                // Remove the URL parameters after opening to clean up the URL
                const cleanUrl = window.location.origin + window.location.pathname;
                window.history.replaceState({}, document.title, cleanUrl);
            }, 500);
        }
    }
});
</script>
{% endblock %}