{% extends "base.html" %}

{% 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>
                {% if filter_project %}
                <li class="breadcrumb-item"><a href="/projects" class="project-link">Projects</a></li>
                <li class="breadcrumb-item"><a href="/projects/{{ filter_project }}" class="project-link">{{ filter_project }}</a></li>
                {% else %}
                <li class="breadcrumb-item"><a href="/packages" class="project-link">Git Pool Repositories</a></li>
                {% if gitea_org and gitea_org != 'pool' %}
                <li class="breadcrumb-item">{{ gitea_org }}</li>
                {% endif %}
                {% endif %}
                <li class="breadcrumb-item active" aria-current="page">{{ package_name }}</li>
            </ol>
        </nav>

        <!-- Git Repository 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="fab fa-git-square text-info"></i>
                    {% if gitea_org and gitea_org != 'pool' %}
                    <span class="text-muted small">{{ gitea_org }}/</span>
                    {% endif %}
                    {{ package_name }}
                </h2>
                <button class="btn btn-outline-info" id="markPackageBtn" data-package="{{ package_name }}">
                    <i class="far fa-star"></i> <span id="markBtnText">Mark</span>
                </button>
            </div>

            <div class="card-body">
                {% if filter_project %}
                <div class="alert alert-info mb-4">
                    <i class="fas fa-filter"></i>
                    <strong>Filtered View:</strong> Showing build results only for project
                    <a href="/projects/{{ filter_project }}" class="alert-link">{{ filter_project }}</a>
                    {% if tracking_branch %}
                    on branch <code class="text-dark">{{ tracking_branch }}</code>
                    {% endif %}
                    &nbsp;|&nbsp;
                    <a href="/packages/{{ package_name }}?org={{ gitea_org }}" class="alert-link">
                        <i class="fas fa-times-circle"></i> Clear filter
                    </a>
                </div>
                {% endif %}

                {% if repo_data %}
                    <!-- Description -->
                    {% if repo_data.description %}
                    <div class="mb-4">
                        <h5 class="text-muted mb-2">Description</h5>
                        <p>{{ repo_data.description }}</p>
                    </div>
                    {% endif %}

                    <!-- Gitea Link -->
                    <div class="mb-4">
                        <h5 class="text-muted mb-2">Repository</h5>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex gap-3">
                                <a href="{{ gitea_url }}" target="_blank" class="btn btn-sm btn-primary" title="View in Gitea">
                                    <i class="fab fa-git-alt"></i>
                                </a>
                                {% if open_issues is not none %}
                                <a href="{{ gitea_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="{{ gitea_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 %}
                                {% if forks_count > 0 %}
                                <button id="showForksBtn" class="btn btn-outline-info" data-package="{{ package_name }}" data-org="{{ gitea_org }}">
                                    <i class="fas fa-code-branch"></i> Show Forks
                                    <span class="badge bg-info">{{ forks_count }}</span>
                                </button>
                                {% endif %}
                            </div>
                            <div class="d-flex gap-3">
                                {% if repo_data.stars_count is not none %}
                                <div class="text-muted">
                                    <i class="fas fa-star text-warning"></i>
                                    <strong>{{ repo_data.stars_count }}</strong> Stars
                                </div>
                                {% endif %}
                                {% if repo_data.watchers_count is not none %}
                                <div class="text-muted">
                                    <i class="fas fa-eye text-primary"></i>
                                    <strong>{{ repo_data.watchers_count }}</strong> Watchers
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Branch Tabs with Build Results -->
                    {% if all_branches or build_results_by_branch %}
                    {% if tracking_branch %}
                        {# When filtering by project, show only the tracking branch #}
                        {% set branches_to_show = [tracking_branch] %}
                    {% elif default_branch_name and default_branch_name in all_branches %}
                        {# Reorder branches so default branch is first #}
                        {% set branches_to_show = [default_branch_name] + (all_branches | reject('equalto', default_branch_name) | list) %}
                    {% else %}
                        {# No default branch or default not in list, show all branches as-is #}
                        {% set branches_to_show = all_branches %}
                    {% endif %}
                    <div class="mb-4">
                        <h5 class="text-muted mb-2">
                            <i class="fas fa-cubes"></i> Branches & Build Results
                            {% if tracking_branch %}
                            <span class="badge bg-info ms-2">Tracking: {{ tracking_branch }}</span>
                            {% endif %}
                        </h5>
                        {% if not tracking_branch %}
                        <p class="text-muted small">Click on a branch to see which OBS projects build it</p>
                        {% endif %}

                        <!-- Branch Tabs -->
                        <ul class="nav nav-tabs nav-tabs-dark" id="branchTabs" role="tablist">
                            {% for branch_name in branches_to_show %}
                            {% set build_count = build_results_by_branch.get(branch_name, [])|length %}
                            {% set is_default = (branch_name == default_branch_name) %}
                            <li class="nav-item" role="presentation">
                                <button class="nav-link {% if loop.first %}active{% endif %}"
                                        id="tab-{{ branch_name|replace('/', '-')|replace('.', '-') }}"
                                        data-bs-toggle="tab"
                                        data-bs-target="#content-{{ branch_name|replace('/', '-')|replace('.', '-') }}"
                                        type="button"
                                        role="tab">
                                    <i class="fas fa-code-branch"></i> {{ branch_name }}
                                    {% if is_default %}
                                    <span class="badge bg-info ms-1" title="Default branch">default</span>
                                    {% endif %}
                                    {% if build_count > 0 %}
                                    <span class="badge bg-success ms-2">{{ build_count }}</span>
                                    {% else %}
                                    <span class="badge bg-secondary ms-2">0</span>
                                    {% endif %}
                                </button>
                            </li>
                            {% endfor %}
                            <!-- Add Unknown tab if it exists in build results -->
                            {% if build_results_by_branch.get('unknown') %}
                            <li class="nav-item" role="presentation">
                                <button class="nav-link"
                                        id="tab-unknown"
                                        data-bs-toggle="tab"
                                        data-bs-target="#content-unknown"
                                        type="button"
                                        role="tab">
                                    <i class="fas fa-question-circle"></i> Unknown
                                    <span class="badge bg-warning text-dark ms-2">{{ build_results_by_branch.get('unknown')|length }}</span>
                                </button>
                            </li>
                            {% endif %}
                        </ul>

                        <!-- Tab Content -->
                        <div class="tab-content border border-top-0 p-3" id="branchTabsContent">
                            {% for branch_name in branches_to_show %}
                            {% set builds = build_results_by_branch.get(branch_name, []) %}
                            {% set is_default = (branch_name == default_branch_name) %}
                            <div class="tab-pane fade {% if loop.first %}show active{% endif %}"
                                 id="content-{{ branch_name|replace('/', '-')|replace('.', '-') }}"
                                 role="tabpanel">

                                <!-- Branch Info Header -->
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <div>
                                        <h6 class="mb-1">
                                            <i class="fas fa-code-branch text-info"></i>
                                            <strong>{{ branch_name }}</strong>
                                            {% if is_default %}
                                            <span class="badge bg-info ms-2">Default Branch</span>
                                            {% endif %}
                                        </h6>
                                        {% if builds %}
                                        <p class="text-muted small mb-0">{{ builds|length }} build result(s) across multiple projects</p>
                                        {% else %}
                                        <p class="text-muted small mb-0">No OBS builds found for this branch</p>
                                        {% endif %}
                                    </div>
                                    <a href="{{ gitea_url }}/src/branch/{{ branch_name }}" target="_blank" class="btn btn-sm btn-outline-primary" title="View branch in Gitea">
                                        <i class="fab fa-git-alt"></i>
                                    </a>
                                </div>

                                <!-- Projects Building This Branch -->
                                {% if builds %}
                                {# Group builds by project #}
                                {% set projects = {} %}
                                {% for build in builds %}
                                    {% if build.project not in projects %}
                                        {% set _ = projects.update({build.project: []}) %}
                                    {% endif %}
                                    {% set _ = projects[build.project].append(build) %}
                                {% endfor %}

                                <div class="table-responsive">
                                    <table class="table table-sm table-hover mb-0">
                                        <thead>
                                            <tr>
                                                <th style="width: 40px;"></th>
                                                <th>Project</th>
                                                <th>Builds</th>
                                                <th>Status Summary</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for project, project_builds in projects.items() %}
                                            {% set project_id = (branch_name|replace('/', '-')|replace('.', '-') ~ '-proj-' ~ loop.index) %}
                                            {% set is_first_project = loop.first %}

                                            {# Count status types for this project #}
                                            {% set status_counts = {} %}
                                            {% for build in project_builds %}
                                                {% set status_parts = build.status.split(':', 1) %}
                                                {% set status = status_parts[0] %}
                                                {% if status in status_counts %}
                                                    {% set _ = status_counts.update({status: status_counts[status] + 1}) %}
                                                {% else %}
                                                    {% set _ = status_counts.update({status: 1}) %}
                                                {% endif %}
                                            {% endfor %}

                                            {# Project summary row (clickable) #}
                                            <tr style="cursor: pointer;" onclick="toggleProjectBuilds('{{ project_id }}')">
                                                <td>
                                                    <i id="icon-{{ project_id }}" class="fas fa-chevron-{% if loop.first %}down{% else %}right{% endif %}"></i>
                                                </td>
                                                <td>
                                                    <a href="/projects/{{ project }}" class="project-link" onclick="event.stopPropagation();">
                                                        {{ project }}
                                                    </a>
                                                </td>
                                                <td>
                                                    <span class="badge bg-secondary">{{ project_builds|length }}</span>
                                                </td>
                                                <td>
                                                    {% if status_counts.get('failed') or status_counts.get('unresolvable') or status_counts.get('broken') %}
                                                        {% set failed_count = (status_counts.get('failed', 0) + status_counts.get('unresolvable', 0) + status_counts.get('broken', 0)) %}
                                                        <span class="badge bg-danger me-1">{{ failed_count }} failed</span>
                                                    {% endif %}
                                                    {% if status_counts.get('building') or status_counts.get('scheduled') or status_counts.get('dispatching') %}
                                                        {% set building_count = (status_counts.get('building', 0) + status_counts.get('scheduled', 0) + status_counts.get('dispatching', 0)) %}
                                                        <span class="badge bg-primary me-1">{{ building_count }} building</span>
                                                    {% endif %}
                                                    {% if status_counts.get('succeeded') %}
                                                        <span class="badge bg-success me-1">{{ status_counts['succeeded'] }} succeeded</span>
                                                    {% endif %}
                                                </td>
                                            </tr>

                                            {# Detail rows for each build (hidden by default, except first project) #}
                                            {% for build in project_builds %}
                                            {% set unique_build_id = project_id ~ '-build-' ~ loop.index %}
                                            <tr class="project-detail-row{% if is_first_project %} show{% endif %}" id="{{ project_id }}-detail-{{ loop.index }}" style="background-color: #f8f9fa;">
                                                <td>
                                                    <button class="btn btn-sm btn-link p-0 expand-build-btn ms-2"
                                                            data-build-id="{{ unique_build_id }}"
                                                            data-project="{{ build.project }}"
                                                            data-repository="{{ build.repository }}"
                                                            data-arch="{{ build.arch }}"
                                                            data-package="{{ build.package }}"
                                                            title="Show binaries">
                                                        <i class="fas fa-chevron-right"></i>
                                                    </button>
                                                </td>
                                                <td class="ps-4">
                                                    <code>{{ build.package }}</code>
                                                </td>
                                                <td>{{ build.repository }} / {{ build.arch }}</td>
                                                <td>
                                                    {% set status_parts = build.status.split(':', 1) %}
                                                    {% set main_status = status_parts[0] %}
                                                    {% set status_detail = status_parts[1] if status_parts|length > 1 else (build.details or '') %}
                                                    <a href="#" class="text-decoration-none"
                                                       {% if build.details %}data-details="{{ build.details | e }}"{% endif %}
                                                       {% if status_detail %}title="{{ status_detail | e }}"{% endif %}
                                                       onclick="showBuildLogFromElement(this, '{{ build.project }}', '{{ build.repository }}', '{{ build.arch }}', '{{ build.package }}', '{{ main_status }}'); return false;">
                                                        {% if main_status == 'succeeded' %}
                                                        <span class="badge bg-success">{{ main_status }}</span>
                                                        {% elif main_status in ['failed', 'unresolvable', 'broken'] %}
                                                        <span class="badge bg-danger">{{ main_status }}</span>
                                                        {% elif main_status in ['scheduled', 'building', 'dispatching'] %}
                                                        <span class="badge bg-primary">{{ main_status }}</span>
                                                        {% else %}
                                                        <span class="badge bg-secondary">{{ main_status }}</span>
                                                        {% endif %}
                                                    </a>
                                                </td>
                                            </tr>
                                            <tr class="build-binaries-row" id="binaries-{{ unique_build_id }}" style="display: none;">
                                                <td colspan="4">
                                                    <div class="p-3 bg-light">
                                                        <div class="d-flex align-items-center">
                                                            <div class="spinner-border spinner-border-sm text-primary me-2" role="status">
                                                                <span class="visually-hidden">Loading...</span>
                                                            </div>
                                                            <span class="text-muted">Loading binaries...</span>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                {% else %}
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i>
                                    This branch exists in the Git repository but is not currently being built in any OBS project.
                                </div>
                                {% endif %}
                            </div>
                            {% endfor %}

                            <!-- Unknown Branch Tab Content -->
                            {% if build_results_by_branch.get('unknown') %}
                            {% set unknown_builds = build_results_by_branch.get('unknown') %}
                            <div class="tab-pane fade" id="content-unknown" role="tabpanel">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <div>
                                        <h6 class="mb-1">
                                            <i class="fas fa-question-circle text-warning"></i>
                                            <strong>Unknown Branch</strong>
                                        </h6>
                                        <p class="text-muted small mb-0">{{ unknown_builds|length }} build result(s) without branch information</p>
                                    </div>
                                </div>

                                {# Group unknown builds by project #}
                                {% set unknown_projects = {} %}
                                {% for build in unknown_builds %}
                                    {% if build.project not in unknown_projects %}
                                        {% set _ = unknown_projects.update({build.project: []}) %}
                                    {% endif %}
                                    {% set _ = unknown_projects[build.project].append(build) %}
                                {% endfor %}

                                <div class="table-responsive">
                                    <table class="table table-sm table-hover mb-0">
                                        <thead>
                                            <tr>
                                                <th style="width: 40px;"></th>
                                                <th>Project</th>
                                                <th>Builds</th>
                                                <th>Status Summary</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for project, project_builds in unknown_projects.items() %}
                                            {% set project_id = 'unknown-proj-' ~ loop.index %}
                                            {% set is_first_project = loop.first %}

                                            {# Count status types for this project #}
                                            {% set status_counts = {} %}
                                            {% for build in project_builds %}
                                                {% set status_parts = build.status.split(':', 1) %}
                                                {% set status = status_parts[0] %}
                                                {% if status in status_counts %}
                                                    {% set _ = status_counts.update({status: status_counts[status] + 1}) %}
                                                {% else %}
                                                    {% set _ = status_counts.update({status: 1}) %}
                                                {% endif %}
                                            {% endfor %}

                                            {# Project summary row #}
                                            <tr style="cursor: pointer;" onclick="toggleProjectBuilds('{{ project_id }}')">
                                                <td>
                                                    <i id="icon-{{ project_id }}" class="fas fa-chevron-{% if loop.first %}down{% else %}right{% endif %}"></i>
                                                </td>
                                                <td>
                                                    <a href="/projects/{{ project }}" class="project-link" onclick="event.stopPropagation();">
                                                        {{ project }}
                                                    </a>
                                                </td>
                                                <td>
                                                    <span class="badge bg-secondary">{{ project_builds|length }}</span>
                                                </td>
                                                <td>
                                                    {% if status_counts.get('failed') or status_counts.get('unresolvable') or status_counts.get('broken') %}
                                                        {% set failed_count = (status_counts.get('failed', 0) + status_counts.get('unresolvable', 0) + status_counts.get('broken', 0)) %}
                                                        <span class="badge bg-danger me-1">{{ failed_count }} failed</span>
                                                    {% endif %}
                                                    {% if status_counts.get('building') or status_counts.get('scheduled') or status_counts.get('dispatching') %}
                                                        {% set building_count = (status_counts.get('building', 0) + status_counts.get('scheduled', 0) + status_counts.get('dispatching', 0)) %}
                                                        <span class="badge bg-primary me-1">{{ building_count }} building</span>
                                                    {% endif %}
                                                    {% if status_counts.get('succeeded') %}
                                                        <span class="badge bg-success me-1">{{ status_counts['succeeded'] }} succeeded</span>
                                                    {% endif %}
                                                </td>
                                            </tr>

                                            {# Detail rows (hidden by default, except first project) #}
                                            {% for build in project_builds %}
                                            {% set unique_build_id = project_id ~ '-build-' ~ loop.index %}
                                            <tr class="project-detail-row{% if is_first_project %} show{% endif %}" id="{{ project_id }}-detail-{{ loop.index }}" style="background-color: #f8f9fa;">
                                                <td>
                                                    <button class="btn btn-sm btn-link p-0 expand-build-btn ms-2"
                                                            data-build-id="{{ unique_build_id }}"
                                                            data-project="{{ build.project }}"
                                                            data-repository="{{ build.repository }}"
                                                            data-arch="{{ build.arch }}"
                                                            data-package="{{ build.package }}"
                                                            title="Show binaries">
                                                        <i class="fas fa-chevron-right"></i>
                                                    </button>
                                                </td>
                                                <td class="ps-4">
                                                    <code>{{ build.package }}</code>
                                                </td>
                                                <td>{{ build.repository }} / {{ build.arch }}</td>
                                                <td>
                                                    {% set status_parts = build.status.split(':', 1) %}
                                                    {% set main_status = status_parts[0] %}
                                                    {% set status_detail = status_parts[1] if status_parts|length > 1 else (build.details or '') %}
                                                    <a href="#" class="text-decoration-none"
                                                       {% if build.details %}data-details="{{ build.details | e }}"{% endif %}
                                                       {% if status_detail %}title="{{ status_detail | e }}"{% endif %}
                                                       onclick="showBuildLogFromElement(this, '{{ build.project }}', '{{ build.repository }}', '{{ build.arch }}', '{{ build.package }}', '{{ main_status }}'); return false;">
                                                        {% if main_status == 'succeeded' %}
                                                        <span class="badge bg-success">{{ main_status }}</span>
                                                        {% elif main_status in ['failed', 'unresolvable', 'broken'] %}
                                                        <span class="badge bg-danger">{{ main_status }}</span>
                                                        {% elif main_status in ['scheduled', 'building', 'dispatching'] %}
                                                        <span class="badge bg-primary">{{ main_status }}</span>
                                                        {% else %}
                                                        <span class="badge bg-secondary">{{ main_status }}</span>
                                                        {% endif %}
                                                    </a>
                                                </td>
                                            </tr>
                                            <tr class="build-binaries-row" id="binaries-{{ unique_build_id }}" style="display: none;">
                                                <td colspan="4">
                                                    <div class="p-3 bg-light">
                                                        <div class="d-flex align-items-center">
                                                            <div class="spinner-border spinner-border-sm text-primary me-2" role="status">
                                                                <span class="visually-hidden">Loading...</span>
                                                            </div>
                                                            <span class="text-muted">Loading binaries...</span>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}

                    <!-- Updated/Created -->
                    <div class="mb-4">
                        <h5 class="text-muted mb-2">Timestamps</h5>
                        {% if repo_data.updated_at %}
                        <p class="text-muted mb-1">
                            <i class="fas fa-clock"></i> Last Updated: {{ repo_data.updated_at }}
                        </p>
                        {% endif %}
                        {% if repo_data.created_at %}
                        <p class="text-muted mb-0">
                            <i class="fas fa-calendar-plus"></i> Created: {{ repo_data.created_at }}
                        </p>
                        {% endif %}
                    </div>

                {% else %}
                    <!-- Repository not found or error -->
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                        Could not fetch repository details from Gitea.
                    </div>
                    <div class="mb-4">
                        <a href="{{ gitea_url }}" target="_blank" class="btn btn-sm btn-primary" title="View in Gitea">
                            <i class="fab fa-git-alt"></i>
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- Fork Build Results Section (hidden by default, shown on button click) -->
        <div id="forkResultsSection" class="card border-0 shadow mt-4" style="display: none;">
            <div class="card-header bg-gradient border-0">
                <h4 class="mb-0">
                    <i class="fas fa-code-branch"></i> Build Results from Forks
                    <button id="hideForksBtn" class="btn btn-sm btn-outline-secondary float-end">
                        <i class="fas fa-times"></i> Hide
                    </button>
                </h4>
            </div>
            <div class="card-body">
                <div id="forkResultsLoading" class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2 text-muted">Querying build results from {{ forks_count }} fork(s)...</p>
                </div>
                <div id="forkResultsContent" style="display: none;">
                    <!-- Will be populated by JavaScript -->
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Collapsed project detail rows - hidden by default */
table tbody tr.project-detail-row {
    display: none !important;
}

table tbody tr.project-detail-row.show {
    display: table-row !important;
}

/* 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>

<script>
// Set page title
{% if filter_project %}
document.title = '{{ filter_project }}/{{ package_name }}';
{% else %}
document.title = '{{ package_name }}';
{% endif %}

// 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');
}

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

// 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 packages from cookies
function getMarkedPackages() {
    const marked = getCookie(`markedPackages_${BACKEND_ID}`);
    return marked ? JSON.parse(decodeURIComponent(marked)) : [];
}

// Save marked packages to cookies
function saveMarkedPackages(packages) {
    setCookie(`markedPackages_${BACKEND_ID}`, encodeURIComponent(JSON.stringify(packages)));
}

// Update mark button state
function updateMarkButton() {
    const packageName = document.getElementById('markPackageBtn').getAttribute('data-package');
    const marked = getMarkedPackages();
    const isMarked = marked.includes(packageName);

    const btn = document.getElementById('markPackageBtn');
    const icon = btn.querySelector('i');
    const text = document.getElementById('markBtnText');

    if (isMarked) {
        icon.classList.remove('far');
        icon.classList.add('fas');
        text.textContent = 'Unmark';
        btn.classList.remove('btn-outline-info');
        btn.classList.add('btn-info');
    } else {
        icon.classList.remove('fas');
        icon.classList.add('far');
        text.textContent = 'Mark';
        btn.classList.remove('btn-info');
        btn.classList.add('btn-outline-info');
    }
}

// Toggle package mark
document.getElementById('markPackageBtn').addEventListener('click', function() {
    const packageName = this.getAttribute('data-package');
    let marked = getMarkedPackages();
    const index = marked.indexOf(packageName);

    if (index > -1) {
        marked.splice(index, 1);
    } else {
        marked.push(packageName);
    }

    saveMarkedPackages(marked);
    updateMarkButton();
});

// Initialize on page load
updateMarkButton();

// Expand/collapse build binaries
const expandedBuilds = new Set();

document.addEventListener('DOMContentLoaded', function() {
    // Add event listeners to all expand buttons
    document.querySelectorAll('.expand-build-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            const buildId = this.getAttribute('data-build-id');
            const project = this.getAttribute('data-project');
            const repository = this.getAttribute('data-repository');
            const arch = this.getAttribute('data-arch');
            const packageName = this.getAttribute('data-package');

            toggleBuildBinaries(buildId, project, repository, arch, packageName, this);
        });
    });

    // Add event listeners for fork build results
    const showForksBtn = document.getElementById('showForksBtn');
    const hideForksBtn = document.getElementById('hideForksBtn');
    const forkResultsSection = document.getElementById('forkResultsSection');

    if (showForksBtn) {
        showForksBtn.addEventListener('click', function() {
            const packageName = this.getAttribute('data-package');
            const org = this.getAttribute('data-org');

            // Show the section
            forkResultsSection.style.display = 'block';

            // Fetch fork build results
            fetchForkBuildResults(packageName, org);

            // Scroll to the section
            forkResultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
    }

    if (hideForksBtn) {
        hideForksBtn.addEventListener('click', function() {
            forkResultsSection.style.display = 'none';
        });
    }
});

// Toggle visibility of detailed builds for a project in main results
function toggleProjectBuilds(projectId) {
    const icon = document.getElementById(`icon-${projectId}`);
    const detailRows = document.querySelectorAll(`[id^="${projectId}-detail"]`);

    const isExpanded = icon.classList.contains('fa-chevron-down');

    if (isExpanded) {
        // Collapse
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-right');
        detailRows.forEach(row => row.classList.remove('show'));
    } else {
        // Expand
        icon.classList.remove('fa-chevron-right');
        icon.classList.add('fa-chevron-down');
        detailRows.forEach(row => row.classList.add('show'));
    }
}

// Toggle visibility of detailed builds for a fork project
function toggleForkProjectBuilds(groupId) {
    const icon = document.getElementById(`icon-${groupId}`);
    // Select both detail rows and binaries rows
    const detailRows = document.querySelectorAll(`[id^="${groupId}-detail-"]`);
    const binariesRows = document.querySelectorAll(`[id^="binaries-${groupId}-build-"]`);

    const isExpanded = icon.classList.contains('fa-chevron-down');

    if (isExpanded) {
        // Collapse
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-right');
        detailRows.forEach(row => row.style.display = 'none');
        binariesRows.forEach(row => row.style.display = 'none');
    } else {
        // Expand
        icon.classList.remove('fa-chevron-right');
        icon.classList.add('fa-chevron-down');
        detailRows.forEach(row => row.style.display = 'table-row');
        // Don't show binaries rows by default - they're only shown when chevron is clicked
    }
}

// Fetch build results from all forks
async function fetchForkBuildResults(packageName, org) {
    const loadingDiv = document.getElementById('forkResultsLoading');
    const contentDiv = document.getElementById('forkResultsContent');

    loadingDiv.style.display = 'block';
    contentDiv.style.display = 'none';
    contentDiv.innerHTML = '';

    try {
        const response = await fetch(`/api/packages/${encodeURIComponent(packageName)}/fork-builds?org=${encodeURIComponent(org)}`);
        const data = await response.json();

        loadingDiv.style.display = 'none';

        if (!data.success) {
            contentDiv.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle"></i> Error: ${data.error || 'Could not fetch fork build results'}
                </div>
            `;
            contentDiv.style.display = 'block';
            return;
        }

        if (data.forks.length === 0) {
            contentDiv.innerHTML = `
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i> No build results found in any of the ${data.total_forks_checked} fork(s).
                </div>
            `;
            contentDiv.style.display = 'block';
            return;
        }

        // Build HTML for fork results
        let html = `
            <div class="alert alert-success mb-4">
                <i class="fas fa-check-circle"></i> Found build results in ${data.forks_with_builds} out of ${data.total_forks_checked} fork(s)
            </div>
        `;

        data.forks.forEach((fork, forkIndex) => {
            // Group builds by project
            const projectGroups = {};
            fork.builds.forEach(build => {
                if (!projectGroups[build.project]) {
                    projectGroups[build.project] = [];
                }
                projectGroups[build.project].push(build);
            });

            html += `
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">
                            <i class="fas fa-code-branch"></i>
                            <a href="${fork.fork_url}" target="_blank" class="text-decoration-none">${fork.fork_owner}/${fork.fork_name}</a>
                            <span class="badge bg-primary ms-2">${fork.build_count} build(s)</span>
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm table-hover">
                                <thead>
                                    <tr>
                                        <th style="width: 40px;"></th>
                                        <th>Project</th>
                                        <th>Builds</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
            `;

            // For each project group
            Object.keys(projectGroups).forEach((project, projectIndex) => {
                const builds = projectGroups[project];
                const groupId = `fork${forkIndex}-project${projectIndex}`;

                // Count status types (split on : to get main status only)
                const statusCounts = {};
                builds.forEach(build => {
                    const mainStatus = build.status.split(':')[0];
                    statusCounts[mainStatus] = (statusCounts[mainStatus] || 0) + 1;
                });

                // Determine overall status badge - match exact logic from main branches table
                let statusBadges = '';

                // Failed (including unresolvable, broken)
                const failedCount = (statusCounts['failed'] || 0) + (statusCounts['unresolvable'] || 0) + (statusCounts['broken'] || 0);
                if (failedCount > 0) {
                    statusBadges += `<span class="badge bg-danger me-1">${failedCount} failed</span>`;
                }

                // Building (including scheduled, dispatching)
                const buildingCount = (statusCounts['building'] || 0) + (statusCounts['scheduled'] || 0) + (statusCounts['dispatching'] || 0);
                if (buildingCount > 0) {
                    statusBadges += `<span class="badge bg-primary me-1">${buildingCount} building</span>`;
                }

                // Succeeded
                if (statusCounts['succeeded']) {
                    statusBadges += `<span class="badge bg-success me-1">${statusCounts['succeeded']} succeeded</span>`;
                }

                // Project summary row (clickable to expand)
                html += `
                    <tr style="cursor: pointer;" onclick="toggleForkProjectBuilds('${groupId}')">
                        <td>
                            <i id="icon-${groupId}" class="fas fa-chevron-right"></i>
                        </td>
                        <td>
                            <a href="/projects/${project}" class="text-decoration-none" onclick="event.stopPropagation();">${project}</a>
                        </td>
                        <td>
                            <span class="badge bg-secondary">${builds.length}</span>
                        </td>
                        <td>${statusBadges}</td>
                    </tr>
                `;

                // Detailed builds rows (hidden by default) - EXACT match with main branches table
                builds.forEach((build, buildIndex) => {
                    const uniqueBuildId = `${groupId}-build-${buildIndex}`;
                    const mainStatus = build.status.split(':')[0];
                    const statusDetail = build.status.includes(':') ? build.status.split(':', 2)[1] : (build.details || '');

                    // Match exact status class logic from main branches table
                    let statusBadge = '';
                    if (mainStatus === 'succeeded') {
                        statusBadge = `<span class="badge bg-success">${mainStatus}</span>`;
                    } else if (['failed', 'unresolvable', 'broken'].includes(mainStatus)) {
                        statusBadge = `<span class="badge bg-danger">${mainStatus}</span>`;
                    } else if (['scheduled', 'building', 'dispatching'].includes(mainStatus)) {
                        statusBadge = `<span class="badge bg-primary">${mainStatus}</span>`;
                    } else {
                        statusBadge = `<span class="badge bg-secondary">${mainStatus}</span>`;
                    }

                    // Escape values for HTML attributes
                    const projectEsc = build.project.replace(/'/g, "\\'").replace(/"/g, '&quot;');
                    const repoEsc = build.repository.replace(/'/g, "\\'").replace(/"/g, '&quot;');
                    const archEsc = build.arch.replace(/'/g, "\\'").replace(/"/g, '&quot;');
                    const packageEsc = build.package.replace(/'/g, "\\'").replace(/"/g, '&quot;');
                    const statusEsc = mainStatus.replace(/'/g, "\\'");
                    const detailEsc = statusDetail ? statusDetail.replace(/'/g, "\\'").replace(/"/g, '&quot;') : '';
                    const buildDetails = build.details || null;
                    const buildDetailsEsc = buildDetails ? buildDetails.replace(/'/g, "\\'").replace(/"/g, '&quot;') : '';

                    // Build detail row with chevron button (EXACT match with main table structure)
                    html += `
                        <tr class="fork-project-detail" id="${groupId}-detail-${buildIndex}" style="display: none; background-color: #f8f9fa;">
                            <td>
                                <button class="btn btn-sm btn-link p-0 expand-build-btn ms-2"
                                        data-build-id="${uniqueBuildId}"
                                        data-project="${projectEsc}"
                                        data-repository="${repoEsc}"
                                        data-arch="${archEsc}"
                                        data-package="${packageEsc}"
                                        title="Show binaries">
                                    <i class="fas fa-chevron-right"></i>
                                </button>
                            </td>
                            <td class="ps-4">
                                <code>${build.package}</code>
                            </td>
                            <td>${build.repository} / ${build.arch}</td>
                            <td>
                                <a href="#" class="text-decoration-none"
                                   ${buildDetailsEsc ? `data-details="${buildDetailsEsc}"` : ''}
                                   ${detailEsc ? `title="${detailEsc}"` : ''}
                                   onclick="showBuildLogFromElement(this, '${projectEsc}', '${repoEsc}', '${archEsc}', '${packageEsc}', '${statusEsc}'); return false;">
                                    ${statusBadge}
                                </a>
                            </td>
                        </tr>
                        <tr class="build-binaries-row" id="binaries-${uniqueBuildId}" style="display: none;">
                            <td colspan="4">
                                <div class="p-3 bg-light">
                                    <div class="d-flex align-items-center">
                                        <div class="spinner-border spinner-border-sm text-primary me-2" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                        <span class="text-muted">Loading binaries...</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    `;
                });
            });

            html += `
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            `;
        });

        contentDiv.innerHTML = html;
        contentDiv.style.display = 'block';

        // Attach event listeners to expand buttons in fork results (dynamically added)
        contentDiv.querySelectorAll('.expand-build-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const buildId = this.getAttribute('data-build-id');
                const project = this.getAttribute('data-project');
                const repository = this.getAttribute('data-repository');
                const arch = this.getAttribute('data-arch');
                const packageName = this.getAttribute('data-package');

                toggleBuildBinaries(buildId, project, repository, arch, packageName, this);
            });
        });

    } catch (error) {
        console.error('Error fetching fork builds:', error);
        loadingDiv.style.display = 'none';
        contentDiv.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle"></i> Error loading fork build results: ${error.message}
            </div>
        `;
        contentDiv.style.display = 'block';
    }
}

// Retry fetching binaries (called from retry button)
function retryBuildBinaries(buildId, project, repository, arch, packageName) {
    const binariesRow = document.getElementById(`binaries-${buildId}`);
    if (binariesRow) {
        binariesRow.classList.remove('loaded');
        fetchBuildBinaries(buildId, project, repository, arch, packageName);
    }
}

function toggleBuildBinaries(buildId, project, repository, arch, packageName, btn) {
    console.log('[TOGGLE] toggleBuildBinaries called for buildId:', buildId);

    const binariesRow = document.getElementById(`binaries-${buildId}`);
    console.log('[TOGGLE] binariesRow found:', binariesRow);

    if (!binariesRow) {
        console.error('[TOGGLE] Could not find binaries row with ID:', `binaries-${buildId}`);
        return;
    }

    const icon = btn.querySelector('i');
    console.log('[TOGGLE] Icon element:', icon);

    if (expandedBuilds.has(buildId)) {
        // Collapse
        console.log('[TOGGLE] Collapsing buildId:', buildId);
        binariesRow.style.display = 'none';
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-right');
        expandedBuilds.delete(buildId);
    } else {
        // Expand
        console.log('[TOGGLE] Expanding buildId:', buildId);
        console.log('[TOGGLE] Before setting display, current value:', binariesRow.style.display);
        binariesRow.style.display = 'table-row';
        console.log('[TOGGLE] After setting display to table-row:', binariesRow.style.display);
        icon.classList.remove('fa-chevron-right');
        icon.classList.add('fa-chevron-down');
        expandedBuilds.add(buildId);

        // Fetch binaries if not already loaded
        if (!binariesRow.classList.contains('loaded')) {
            console.log('[TOGGLE] Row not loaded yet, fetching binaries...');
            fetchBuildBinaries(buildId, project, repository, arch, packageName);
        } else {
            console.log('[TOGGLE] Row already loaded, skipping fetch');
            const contentCell = binariesRow.querySelector('td');
            console.log('[TOGGLE] contentCell found:', contentCell);
            console.log('[TOGGLE] contentCell innerHTML length:', contentCell ? contentCell.innerHTML.length : 'N/A');
            console.log('[TOGGLE] contentCell innerHTML preview:', contentCell ? contentCell.innerHTML.substring(0, 300) : 'N/A');
        }
    }
}

async function fetchBuildBinaries(buildId, project, repository, arch, packageName) {
    const binariesRow = document.getElementById(`binaries-${buildId}`);
    console.log('[BINARIES] binariesRow element:', binariesRow);

    if (!binariesRow) {
        console.error('[BINARIES] Could not find binaries row with ID:', `binaries-${buildId}`);
        return;
    }

    const contentCell = binariesRow.querySelector('td');
    console.log('[BINARIES] contentCell element:', contentCell);

    if (!contentCell) {
        console.error('[BINARIES] Could not find TD element inside binaries row');
        return;
    }

    // Show loading spinner
    contentCell.innerHTML = '<div class="p-3 bg-light text-center"><i class="fas fa-spinner fa-spin"></i> Loading binaries...</div>';
    console.log('[BINARIES] Set loading spinner in contentCell');

    try {
        const url = `/obs/build/${encodeURIComponent(project)}/${encodeURIComponent(repository)}/${encodeURIComponent(arch)}/${encodeURIComponent(packageName)}/`;
        console.log('[BINARIES] Fetching from:', url);

        // Use AbortController with 30 second timeout
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 30000);

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

        console.log('[BINARIES] Response status:', response.status);

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        const xmlText = await response.text();
        console.log('[BINARIES] Received XML, length:', xmlText.length);
        console.log('[BINARIES] XML preview:', xmlText.substring(0, 500));

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

        // Check for XML parse errors
        const parseError = xmlDoc.querySelector('parsererror');
        if (parseError) {
            console.error('[BINARIES] XML parse error:', parseError.textContent);
            throw new Error('Invalid XML response from server');
        }

        const binaryElements = xmlDoc.querySelectorAll('binary');
        console.log('[BINARIES] Found binary elements:', binaryElements.length);

        const binaries = [];

        binaryElements.forEach(binary => {
            const filename = binary.getAttribute('filename');
            const size = binary.getAttribute('size');

            console.log('[BINARIES] Processing binary:', filename, 'size:', size);

            // Skip files starting with underscore
            if (filename && !filename.startsWith('_')) {
                binaries.push({ filename, size });
            }
        });

        console.log('[BINARIES] After filtering:', binaries.length, 'binaries');

        // Build HTML for binaries
        let html = '<div class="p-3 bg-light">';

        if (binaries.length > 0) {
            html += '<h6 class="mb-2"><i class="fas fa-file-archive"></i> Build Artifacts</h6>';
            html += '<ul class="list-unstyled mb-0">';

            binaries.forEach(binary => {
                const sizeKB = binary.size ? `(${(parseInt(binary.size) / 1024).toFixed(1)} KB)` : '';
                const downloadUrl = `/obs/build/${encodeURIComponent(project)}/${encodeURIComponent(repository)}/${encodeURIComponent(arch)}/${encodeURIComponent(packageName)}/${encodeURIComponent(binary.filename)}`;

                html += '<li class="mb-1">';
                html += `<i class="fas fa-file text-muted me-2"></i>`;
                html += `<a href="${downloadUrl}" class="project-link" download>${binary.filename}</a>`;
                html += ` <small class="text-muted">${sizeKB}</small>`;
                html += '</li>';
            });

            html += '</ul>';
        } else {
            html += '<p class="text-muted mb-0"><i class="fas fa-info-circle"></i> No build artifacts found</p>';
        }

        html += '</div>';

        console.log('[BINARIES] Generated HTML length:', html.length);
        console.log('[BINARIES] Generated HTML preview:', html.substring(0, 200));
        console.log('[BINARIES] Current binariesRow display:', binariesRow.style.display);

        contentCell.innerHTML = html;
        binariesRow.classList.add('loaded');

        console.log('[BINARIES] After setting innerHTML, binariesRow display:', binariesRow.style.display);
        console.log('[BINARIES] contentCell innerHTML set, first 200 chars:', contentCell.innerHTML.substring(0, 200));
        console.log('[BINARIES] Successfully loaded binaries');
    } catch (error) {
        console.error('[BINARIES] Error fetching binaries:', error);

        // Check if it's a timeout
        if (error.name === 'AbortError') {
            contentCell.innerHTML = `<div class="p-3 bg-light"><p class="text-danger mb-0"><i class="fas fa-exclamation-triangle"></i> Request timed out. The build backend is slow to respond. <button class="btn btn-sm btn-outline-primary ms-2" onclick="retryBuildBinaries('${buildId}', '${project}', '${repository}', '${arch}', '${packageName}')">Retry</button></p></div>`;
        } else {
            contentCell.innerHTML = `<div class="p-3 bg-light"><p class="text-danger mb-0"><i class="fas fa-exclamation-triangle"></i> Error loading binaries: ${error.message} <button class="btn btn-sm btn-outline-primary ms-2" onclick="retryBuildBinaries('${buildId}', '${project}', '${repository}', '${arch}', '${packageName}')">Retry</button></p></div>`;
        }
    }
}

// Wrapper to extract error details from data attribute
function showBuildLogFromElement(element, project, repo, arch, pkg, status) {
    const errorDetails = element.getAttribute('data-details') || null;
    console.log('[BUILD LOG] Status:', status);
    console.log('[BUILD LOG] Error details from attribute:', errorDetails);
    console.log('[BUILD LOG] Error details length:', errorDetails ? errorDetails.length : 'null');
    showBuildLog(project, repo, arch, pkg, status, errorDetails);
}

// Show build log modal (with error details support) - legacy alias
function showBuildLogModal(project, repository, arch, packageName, status, errorDetails = null) {
    // Show build log in modal
    showBuildLog(project, repository, arch, packageName, status, errorDetails);
}

// Main function to show build log (shared with package_detail.html pattern)
// Global variables to store current log parameters for sharing
let currentLogParams = null;

function showBuildLog(project, repo, arch, pkg, status, errorDetails = null) {
    console.log('[BUILD LOG] showBuildLog called with:', { project, repo, arch, pkg, status, errorDetails });

    // 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`;

    // Set modal title
    const isLive = ['building', 'dispatching', 'signing'].includes(status);
    const liveLabel = isLive ? ' <span class="badge bg-danger">LIVE</span>' : '';
    document.getElementById('logTitle').innerHTML = `${pkg} @ ${repo}/${arch} (${status})${liveLabel}`;

    // 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] showErrorDetails:', showErrorDetails, 'hasErrorDetails:', !!errorDetails);

    if (showErrorDetails && !errorDetails) {
        console.log('[BUILD LOG] Fetching error details from /_result');
        // Details not provided, fetch from /_result
        // Correct URL format: /obs/build/PROJECT/_result?package=PKG&repository=REPO&arch=ARCH
        const resultUrl = `/obs/build/${encodeURIComponent(project)}/_result?package=${encodeURIComponent(pkg)}&repository=${encodeURIComponent(repo)}&arch=${encodeURIComponent(arch)}`;
        console.log('[BUILD LOG] Result URL:', resultUrl);

        fetch(resultUrl)
            .then(response => response.text())
            .then(resultXml => {
                // Parse XML to extract details
                const parser = new DOMParser();
                const xmlDoc = parser.parseFromString(resultXml, 'text/xml');
                const statusElem = xmlDoc.querySelector('status');
                const details = statusElem ? statusElem.getAttribute('details') : null;

                // Now fetch the log (might be from a previous build)
                fetchBuildLogWithDetails(project, repo, arch, pkg, status, isLive, details);
            })
            .catch(error => {
                console.error('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
        fetchBuildLogWithDetails(project, repo, arch, pkg, status, isLive, errorDetails || null);
    }
}

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

    // Build log URL - use streaming for active builds, nostream for finished
    let logUrl = `/obs/build/${encodeURIComponent(project)}/${encodeURIComponent(repo)}/${encodeURIComponent(arch)}/${encodeURIComponent(pkg)}/_log`;
    if (!isLive) {
        logUrl += '?nostream=1&start=0';
    }
    console.log('Fetching log from:', logUrl, isLive ? '(streaming)' : '(static)');

    // Determine if this is an error or active build
    const isError = ['broken', 'unresolvable', 'failed'].includes(status);
    const isActive = ['building', 'dispatching', 'signing', 'scheduled'].includes(status);
    console.log('[FETCH LOG] isError:', isError, 'isActive:', isActive);

    // Show details in separate section if available
    const detailsBox = document.getElementById('buildErrorDetails');
    console.log('[FETCH LOG] detailsBox element:', detailsBox);
    console.log('[FETCH LOG] Has errorDetails:', !!errorDetails);
    if (errorDetails) {
        console.log('[FETCH LOG] Setting error details box content');
        document.getElementById('buildErrorDetailsContent').textContent = errorDetails;

        // Style differently for errors vs active builds
        if (isError) {
            detailsBox.className = 'alert alert-danger m-3';
            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';
            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 {
            // 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';
        console.log('[FETCH LOG] Error details box display set to:', detailsBox.style.display);
        console.log('[FETCH LOG] Error details box className:', detailsBox.className);
    } else {
        console.log('[FETCH LOG] No error details, hiding box');
        detailsBox.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';

            if (!isLive || !response.body) {
                // Non-streaming: just get text
                return response.text().then(text => {
                    logContent.innerHTML = highlightLogText(text);
                    // Scroll to first error if found, otherwise scroll to bottom
                    setTimeout(() => {
                        const firstError = logContent.querySelector('.log-error');
                        if (firstError) {
                            firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        } else {
                            logContent.scrollTop = logContent.scrollHeight;
                        }
                    }, 100);
                });
            }

            // Streaming: read chunks as they arrive
            const reader = response.body.getReader();
            const decoder = new TextDecoder();
            let wasAtBottom = true;
            let isFirstChunk = true;
            let accumulatedText = ''; // Accumulate raw text for highlighting

            // Track if user scrolls away from bottom
            logContent.addEventListener('scroll', function() {
                const isAtBottom = logContent.scrollHeight - logContent.scrollTop - logContent.clientHeight < 10;
                wasAtBottom = isAtBottom;
            });

            function readChunk() {
                reader.read().then(({ done, value }) => {
                    if (done) {
                        console.log('Stream complete');
                        // Remove LIVE badge when stream finishes
                        document.getElementById('logTitle').innerHTML = `${pkg} @ ${repo}/${arch} (${status})`;
                        return;
                    }

                    // Append chunk to accumulated text
                    const chunk = decoder.decode(value, { stream: true });
                    accumulatedText += chunk;

                    // Apply syntax highlighting to entire accumulated text
                    logContent.innerHTML = highlightLogText(accumulatedText);

                    // Auto-scroll to bottom if user was at bottom
                    if (wasAtBottom) {
                        logContent.scrollTop = logContent.scrollHeight;
                    }

                    // On first chunk, scroll to bottom
                    if (isFirstChunk) {
                        isFirstChunk = false;
                        setTimeout(() => {
                            logContent.scrollTop = logContent.scrollHeight;
                        }, 0);
                        setTimeout(() => {
                            logContent.scrollTop = logContent.scrollHeight;
                        }, 50);
                    }

                    // Read next chunk
                    readChunk();
                }).catch(error => {
                    console.error('Stream error:', error);
                    document.getElementById('buildLogError').style.display = 'block';
                    document.getElementById('buildLogErrorMsg').textContent = 'Stream interrupted: ' + error.message;
                });
            }

            readChunk();
        })
        .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: 'smooth', 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 bottom button
document.getElementById('logJumpToBottom').addEventListener('click', function() {
    const logContent = document.getElementById('buildLogContent');
    logContent.scrollTop = logContent.scrollHeight;
});

// Show/hide "Jump to Bottom" 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)
// Note: This redirects to the project page since we're on the package source detail page
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');
        const project = urlParams.get('project');

        if (pkg && repo && arch && status && project) {
            // Redirect to project page with the same parameters
            const params = new URLSearchParams({
                show_log: 'true',
                package: pkg,
                repository: repo,
                arch: arch,
                status: status
            });
            window.location.href = `/projects/${encodeURIComponent(project)}?${params.toString()}`;
        }
    }
});
</script>

<!-- 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 bottom" style="display: none;">
                            <i class="fas fa-arrow-down"></i> Jump to Bottom
                        </button>
                    </div>
                    <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>

{% endblock %}