{% extends "base.html" %}

{#
  Supply chain audit indicators.

  Tri-state flags render green (pass), red (fail) or neutral grey (not audited
  yet). Colour is never the only signal - every indicator carries a title with
  the spelled out state, and the security badge also names the worst severity
  and the issue count.

  The *_icon macros are the compact form for the build table, the *_detail
  macros the spelled out form used by supply_chain_audit_box(), the box shown
  inside Product Information.

  Icon names must exist in FontAwesome 6.0.0 (the version base.html loads) -
  later v6 names such as fa-shield-halved are not in it and render as nothing.
#}
{% macro audit_flag(state, icon, label, ok_text, fail_text, pending_text='not audited yet') -%}
    {%- if state is none -%}
    <i class="fas {{ icon }} audit-icon text-secondary opacity-50" title="{{ label }}: {{ pending_text }}"></i>
    {%- elif state -%}
    <i class="fas {{ icon }} audit-icon text-success" title="{{ label }}: {{ ok_text }}"></i>
    {%- else -%}
    <i class="fas {{ icon }} audit-icon text-danger" title="{{ label }}: {{ fail_text }}"></i>
    {%- endif -%}
{%- endmacro %}

{% macro security_issues_icon(issues) -%}
    {%- if issues is none -%}
    <i class="fas fa-shield audit-icon text-secondary opacity-50" title="Known Security Issues: none known yet"></i>
    {%- else -%}
        {#- Severities ordered worst first, so the first hit is the one to show -#}
        {%- set severity_levels = ['critical', 'high', 'medium', 'low'] -%}
        {%- set ns = namespace(worst=none, worst_count=0, total=0, breakdown=[]) -%}
        {%- for level in severity_levels -%}
            {%- set count = issues.get(level, 0) -%}
            {%- set ns.total = ns.total + count -%}
            {%- if count > 0 -%}
                {%- if ns.worst is none -%}
                    {%- set ns.worst = level -%}
                    {%- set ns.worst_count = count -%}
                {%- endif -%}
                {%- set ns.breakdown = ns.breakdown + [count ~ ' ' ~ level] -%}
            {%- endif -%}
        {%- endfor -%}
        {%- if ns.worst is none -%}
        <i class="fas fa-shield audit-icon text-success" title="Known Security Issues: none known"></i>
        {%- else -%}
        {#- The badge names the worst severity and its count; the title has the full breakdown -#}
        <span class="badge audit-severity severity-{{ ns.worst }}"
              title="Known Security Issues: {{ ns.breakdown | join(', ') }} ({{ ns.total }} total)">
            <i class="fas fa-shield"></i> {{ ns.worst_count }} {{ ns.worst }}
        </span>
        {%- endif -%}
    {%- endif -%}
{%- endmacro %}

{% macro audit_flag_detail(state, icon, ok_text, fail_text, pending_text='Not audited yet') -%}
    {%- if state is none -%}
    <i class="fas {{ icon }} text-secondary opacity-50"></i> <span class="text-muted">{{ pending_text }}</span>
    {%- elif state -%}
    <i class="fas {{ icon }} text-success"></i> {{ ok_text }}
    {%- else -%}
    <i class="fas {{ icon }} text-danger"></i> {{ fail_text }}
    {%- endif -%}
{%- endmacro %}

{% macro security_issues_detail(issues) -%}
    {%- if issues is none -%}
    <i class="fas fa-shield text-secondary opacity-50"></i> <span class="text-muted">None known yet</span>
    {%- else -%}
        {%- set ns = namespace(any=false) -%}
        {%- for level in ['critical', 'high', 'medium', 'low'] -%}
            {%- if issues.get(level, 0) > 0 -%}
                {%- set ns.any = true -%}
                <span class="badge audit-severity severity-{{ level }} me-1">{{ issues.get(level) }} {{ level }}</span>
            {%- endif -%}
        {%- endfor -%}
        {%- if not ns.any -%}
        <i class="fas fa-shield text-success"></i> None known
        {%- endif -%}
    {%- endif -%}
{%- endmacro %}

{#
  The three audit indicators get their own box inside Product Information, with a
  help button opening the shared #supplyChainInfoModal defined at the end of the
  page (one modal for the whole page - Bootstrap's data-api toggling is
  delegated, so it also works for the JS injected Debug/Source rows).
#}
{% macro supply_chain_audit_box(build) -%}
<div class="card supply-chain-box mt-3">
    <div class="card-body p-3">
        <h6 class="mb-2">
            <i class="fas fa-link"></i> Supply Chain Audit
            <button type="button" class="btn btn-link btn-sm p-0 ms-1 align-baseline text-decoration-none"
                    data-bs-toggle="modal" data-bs-target="#supplyChainInfoModal"
                    title="About the supply chain audit data" aria-label="About the supply chain audit data">
                <i class="fas fa-circle-question"></i>
            </button>
        </h6>
        <dl class="row mb-0 small">
            <dt class="col-sm-4">Registered Product</dt>
            <dd class="col-sm-8 mb-1">{{ audit_flag_detail(build.registered_product, 'fa-clipboard-check', 'Registered', 'Not registered', 'Not registered yet') }}</dd>

            <dt class="col-sm-4">Rebuild Reproducible</dt>
            <dd class="col-sm-8 mb-1">{{ audit_flag_detail(build.rebuild_reproducible, 'fa-arrows-rotate', 'Reproducible', 'Not reproducible') }}</dd>

            <dt class="col-sm-4">Highest Known Security Issue</dt>
            <dd class="col-sm-8 mb-0">{{ security_issues_detail(build.security_issues) }}</dd>
        </dl>
    </div>
</div>
{%- endmacro %}

{% block extra_head %}
<style>
    /* Supply chain audit column */
    .audit-icons .audit-icon {
        font-size: 1.05rem;
        margin-right: 0.4rem;
        cursor: help;
    }
    .audit-severity {
        color: #fff;
        cursor: help;
        font-weight: 500;
    }
    /* Supply chain audit box inside Product Information - sits on a bg-light cell */
    .supply-chain-box {
        background-color: #fff;
        border-color: #dee2e6;
        max-width: 640px;
    }
    /* Severity ramp - each step is also spelled out in the badge text */
    .severity-low { background-color: #8a6d00; }
    .severity-medium { background-color: #b35c00; }
    .severity-high { background-color: #c0392b; }
    .severity-critical { background-color: #7b1113; }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow">
            <div class="card-header bg-gradient border-0">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="mb-0"><i class="fas fa-cubes"></i> Products</h2>
                        <p class="text-muted mb-0">SPDX Product Data</p>
                    </div>
                    <a href="/products/packages" class="btn btn-outline-light">
                        <i class="fas fa-search"></i> Search All Packages
                    </a>
                </div>
            </div>
            <div class="card-body">
                {% if cache_rebuilding %}
                <div class="alert alert-info alert-dismissible fade show" role="alert">
                    <h5 class="alert-heading">
                        <i class="fas fa-sync-alt fa-spin"></i> Database Rebuilding
                    </h5>
                    <p class="mb-0">
                        The cache daemon is currently rebuilding the database. Product data will appear here once the SPDX scan completes.
                        This process may take several minutes depending on the number of SPDX files.
                    </p>
                    <hr>
                    <p class="mb-0 small text-muted">
                        <i class="fas fa-info-circle"></i> Projects and basic OBS data are being indexed first. SPDX product data will follow.
                        Check the daemon logs for progress.
                    </p>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                {% endif %}

                {% if grouped_products %}
                <div class="mb-3">
                    <p class="text-muted mb-2">
                        <strong>{{ grouped_products | length }}</strong> product-version(s), <strong>{{ total_product_count }}</strong> total build(s)
                    </p>
                </div>

                <!-- Search Tabs -->
                <div class="mb-4">
                    <!-- Loading Overlay -->
                    <div id="searchLoadingOverlay" class="position-relative" style="min-height: 200px;">
                        <div class="position-absolute top-50 start-50 translate-middle text-center" style="z-index: 10;">
                            <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="text-muted">Initializing search interface...</p>
                        </div>
                    </div>

                    <div id="searchInterface" style="display: none;">
                        <ul class="nav nav-tabs" id="searchTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="catalog-tab" data-bs-toggle="tab" data-bs-target="#catalog-pane" type="button" role="tab" aria-controls="catalog-pane" aria-selected="true">
                                    <i class="fas fa-cubes"></i> Product Catalog
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="binary-search-tab" data-bs-toggle="tab" data-bs-target="#binary-search-pane" type="button" role="tab" aria-controls="binary-search-pane" aria-selected="false">
                                    <i class="fas fa-box"></i> Search Binary Packages
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="file-search-tab" data-bs-toggle="tab" data-bs-target="#file-search-pane" type="button" role="tab" aria-controls="file-search-pane" aria-selected="false">
                                    <i class="fas fa-file"></i> Search Installed Files
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="vcs-search-tab" data-bs-toggle="tab" data-bs-target="#vcs-search-pane" type="button" role="tab" aria-controls="vcs-search-pane" aria-selected="false">
                                    <i class="fas fa-code-branch"></i> Search VCS Repository
                                </button>
                            </li>
                        </ul>

                        <div class="tab-content border border-top-0 p-3" id="searchTabContent">
                        <!-- Binary Search Tab -->
                        <div class="tab-pane fade" id="binary-search-pane" role="tabpanel" aria-labelledby="binary-search-tab">
                            <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fas fa-box"></i></span>
                                <input type="text" id="binarySearch" class="form-control"
                                       placeholder="Page is loading..."
                                       onkeypress="if(event.key === 'Enter') searchBinaries()"
                                       disabled>
                                <button class="btn btn-outline-secondary" type="button" onclick="clearBinarySearch()" disabled>
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>

                            <!-- Binary Search Results -->
                            <div id="binarySearchResults" style="display: none;">
                                <div class="card border-info">
                                    <div class="card-header bg-info text-white">
                                        <h6 class="mb-0">
                                            <i class="fas fa-box"></i> Package Search Results
                                            <span id="searchResultCount" class="badge bg-light text-dark ms-2"></span>
                                        </h6>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                                            <table class="table table-sm table-striped mb-0">
                                                <thead class="table-light sticky-top">
                                                    <tr>
                                                        <th style="width: 12%;">Package Name</th>
                                                        <th style="width: 6%;">Arch</th>
                                                        <th style="width: 15%;">Package Filename</th>
                                                        <th style="width: 22%;">VCS</th>
                                                        <th style="width: 15%;">Build Area</th>
                                                        <th style="width: 30%;">Found in Products</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="binarySearchResultsBody">
                                                    <!-- Results populated by JavaScript -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- File Search Tab -->
                        <div class="tab-pane fade" id="file-search-pane" role="tabpanel" aria-labelledby="file-search-tab">
                            <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fas fa-file"></i></span>
                                <input type="text" id="fileSearch" class="form-control"
                                       placeholder="Page is loading..."
                                       onkeypress="if(event.key === 'Enter') searchFiles()"
                                       disabled>
                                <button class="btn btn-outline-secondary" type="button" onclick="clearFileSearch()" disabled>
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>

                            <!-- File Search Results -->
                            <div id="fileSearchResults" style="display: none;">
                                <div class="card border-success">
                                    <div class="card-header bg-success text-white">
                                        <h6 class="mb-0">
                                            <i class="fas fa-file"></i> File Search Results
                                            <span id="fileSearchResultCount" class="badge bg-light text-dark ms-2"></span>
                                        </h6>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                                            <table class="table table-sm table-striped mb-0">
                                                <thead class="table-light sticky-top">
                                                    <tr>
                                                        <th style="width: 22%;">File Path</th>
                                                        <th style="width: 10%;">Package Name</th>
                                                        <th style="width: 6%;">Arch</th>
                                                        <th style="width: 13%;">Package Filename</th>
                                                        <th style="width: 16%;">VCS</th>
                                                        <th style="width: 13%;">Build Area</th>
                                                        <th style="width: 20%;">Found in Products</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="fileSearchResultsBody">
                                                    <!-- Results populated by JavaScript -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- VCS Search Tab -->
                        <div class="tab-pane fade" id="vcs-search-pane" role="tabpanel" aria-labelledby="vcs-search-tab">
                            <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fas fa-code-branch"></i></span>
                                <input type="text" id="vcsSearch" class="form-control"
                                       placeholder="Page is loading..."
                                       onkeypress="if(event.key === 'Enter') searchVCS()"
                                       disabled>
                                <button class="btn btn-outline-secondary" type="button" onclick="clearVCSSearch()" disabled>
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>

                            <!-- Help text -->
                            <div class="alert alert-info small mb-3">
                                <strong>Search formats:</strong>
                                <ul class="mb-0 mt-1">
                                    <li><code>org/repo@branch</code> - Search by organization, repository, and branch (e.g., <code>pool/glibc@slfo-1.2</code>)</li>
                                    <li><code>repo@branch</code> - Search by repository and branch (any organization)</li>
                                    <li><code>repo</code> - Search by repository name only</li>
                                    <li><code>a1b2c3d4...</code> - Search by commit hash (8+ characters)</li>
                                </ul>
                                <hr class="my-2">
                                <small class="text-muted"><i class="fas fa-lightbulb"></i> <strong>Tip:</strong> You can also navigate here from any package detail page by clicking the "Find in Products" button next to a branch. Both <code>@</code> and <code>#</code> separators are supported.</small>
                            </div>

                            <!-- VCS Search Results -->
                            <div id="vcsSearchResults" style="display: none;">
                                <div class="card border-warning">
                                    <div class="card-header bg-warning text-dark">
                                        <h6 class="mb-0">
                                            <i class="fas fa-code-branch"></i> VCS Repository Search Results
                                            <span id="vcsSearchResultCount" class="badge bg-light text-dark ms-2"></span>
                                        </h6>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                                            <table class="table table-sm table-striped mb-0">
                                                <thead class="table-light sticky-top">
                                                    <tr>
                                                        <th style="width: 12%;">Package Name</th>
                                                        <th style="width: 6%;">Arch</th>
                                                        <th style="width: 15%;">Package Filename</th>
                                                        <th style="width: 22%;">VCS</th>
                                                        <th style="width: 15%;">Build Area</th>
                                                        <th style="width: 30%;">Found in Products</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="vcsSearchResultsBody">
                                                    <!-- Results populated by JavaScript -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Product Catalog Tab -->
                        <div class="tab-pane fade show active" id="catalog-pane" role="tabpanel" aria-labelledby="catalog-tab">
                            {% if grouped_products %}
                            <!-- Filter Options -->
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="showDebugSourceProducts" onchange="toggleDebugSourceProducts()">
                                    <label class="form-check-label" for="showDebugSourceProducts">
                                        Load Debug and Source product media
                                    </label>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-hover" id="productCatalogTable">
                                    <thead>
                                        <tr>
                                            <th>Product-Version</th>
                                            <th>Builds</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for group in grouped_products %}
                                        {% set group_index = loop.index %}
                                        {# Older builds are rendered but hidden behind the "show older builds" button #}
                                        {% set visible_builds = 3 %}
                                        <!-- Product-Version Header -->
                                        <tr class="table-primary product-group-row">
                                            <td colspan="2" style="cursor: pointer;"
                                                onclick="toggleProductGroup('group-{{ loop.index }}')"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#group-{{ loop.index }}"
                                                aria-expanded="{{ 'true' if group.is_latest_version else 'false' }}">
                                                <strong><i class="fas fa-cube"></i> {{ group.product_version }}</strong>
                                                <span class="badge bg-secondary ms-2">{{ group.build_count }} build{{ 's' if group.build_count != 1 else '' }}</span>
                                                <i class="fas fa-chevron-{{ 'up' if group.is_latest_version else 'down' }} float-end" id="group-{{ loop.index }}-icon"></i>
                                            </td>
                                        </tr>
                                        <!-- Build List - the newest version of each product starts expanded -->
                                        <tr class="collapse product-group-details{{ ' show' if group.is_latest_version }}" id="group-{{ loop.index }}">
                                            <td colspan="2" class="p-0">
                                                <table class="table table-sm mb-0" id="group-{{ loop.index }}-table">
                                                    <thead class="table-light">
                                                        <tr>
                                                            <th style="width: 15%;">Build Number</th>
                                                            <th style="width: 25%;">Full Name</th>
                                                            <th style="width: 15%;">Supply Chain Audit</th>
                                                            <th style="width: 15%;">New Packages</th>
                                                            <th style="width: 15%;">Created At</th>
                                                            <th style="width: 15%;">Actions</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="group-{{ loop.index }}-tbody">
                                                        {% for build in group.builds %}
                                                        {% set build_hidden = loop.index > visible_builds %}
                                                        <tr class="build-row{{ ' build-extra d-none' if build_hidden }}">
                                                            <td>
                                                                <span class="badge bg-primary">Build {{ build.build_number }}</span>
                                                            </td>
                                                            <td>
                                                                <code class="small">{{ build.full_name }}</code>
                                                                {% if build.deprecated %}
                                                                <span class="badge bg-danger ms-1" title="This product is deprecated">deprecated</span>
                                                                {% endif %}
                                                            </td>
                                                            <td>
                                                                <span class="audit-icons">
                                                                    {{ audit_flag(build.registered_product, 'fa-clipboard-check', 'Registered Product', 'registered', 'not registered', 'not registered yet') }}
                                                                    {{ audit_flag(build.rebuild_reproducible, 'fa-arrows-rotate', 'Rebuild Reproducible', 'reproducible', 'not reproducible') }}
                                                                    {{ security_issues_icon(build.security_issues) }}
                                                                </span>
                                                            </td>
                                                            <td>
                                                                {% if build.prev_build_full_name %}
                                                                    {% if build.new_package_count > 0 %}
                                                                    <span class="badge bg-success"
                                                                          style="cursor: pointer;"
                                                                          onclick="toggleNewPackages('build-{{ group_index }}-{{ loop.index }}-new')"
                                                                          data-bs-toggle="collapse"
                                                                          data-bs-target="#build-{{ group_index }}-{{ loop.index }}-new"
                                                                          title="Click to show new packages">
                                                                        <i class="fas fa-plus"></i> {{ build.new_package_count }} new
                                                                    </span>
                                                                    {% elif build.new_package_count < 0 %}
                                                                    <span class="badge bg-warning text-dark"
                                                                          style="cursor: pointer;"
                                                                          onclick="toggleNewPackages('build-{{ group_index }}-{{ loop.index }}-new')"
                                                                          data-bs-toggle="collapse"
                                                                          data-bs-target="#build-{{ group_index }}-{{ loop.index }}-new"
                                                                          title="Click to show removed packages">
                                                                        <i class="fas fa-minus"></i> {{ build.new_package_count|abs }} removed
                                                                    </span>
                                                                    {% else %}
                                                                    <span class="badge bg-secondary" title="No package changes">
                                                                        <i class="fas fa-equals"></i> Same
                                                                    </span>
                                                                    {% endif %}
                                                                {% else %}
                                                                <span class="text-muted" title="No previous release to compare against">
                                                                    <i class="fas fa-box"></i> {{ build.package_count }} total
                                                                </span>
                                                                {% endif %}
                                                            </td>
                                                            <td>
                                                                <small class="text-muted">{{ build.spdx_created | int | timestamp_to_datetime }}</small>
                                                            </td>
                                                            <td>
                                                                <button class="btn btn-sm btn-outline-primary"
                                                                        onclick="toggleBuildDetails('build-{{ group_index }}-{{ loop.index }}')"
                                                                        data-bs-toggle="collapse"
                                                                        data-bs-target="#build-{{ group_index }}-{{ loop.index }}">
                                                                    <i class="fas fa-chevron-down"></i> Details
                                                                </button>
                                                            </td>
                                                        </tr>
                                                        <!-- New Packages Row -->
                                                        {% if build.prev_build_full_name %}
                                                        <tr class="collapse build-new-packages{{ ' build-extra d-none' if build_hidden }}" id="build-{{ group_index }}-{{ loop.index }}-new">
                                                            <td colspan="6" class="p-3 bg-light">
                                                                <div id="new-packages-content-{{ group_index }}-{{ loop.index }}">
                                                                    <div class="text-center">
                                                                        <i class="fas fa-spinner fa-spin"></i> Loading new packages...
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        {% endif %}
                                                        <!-- Product Details Row (product information always rendered, packages on demand) -->
                                                        <tr class="collapse build-details{{ ' build-extra d-none' if build_hidden }}" id="build-{{ group_index }}-{{ loop.index }}">
                                                            <td colspan="6" class="p-3 bg-light">
                                                                <div>
                                                                    <h6 class="mb-2"><i class="fas fa-circle-info"></i> Product Information</h6>
                                                                    <dl class="row mb-0 small">
                                                                        <dt class="col-sm-3">Full Name</dt>
                                                                        <dd class="col-sm-9"><code>{{ build.full_name }}</code></dd>

                                                                        <dt class="col-sm-3">Product</dt>
                                                                        <dd class="col-sm-9">{{ build.name }}{% if build.version %} {{ build.version }}{% endif %}</dd>

                                                                        <dt class="col-sm-3">Build Number</dt>
                                                                        <dd class="col-sm-9">{{ build.build_number or '-' }}</dd>

                                                                        <dt class="col-sm-3">Architecture{{ 's' if build.architectures | length > 1 else '' }}</dt>
                                                                        <dd class="col-sm-9">
                                                                            {% if build.architectures %}
                                                                                {% for arch in build.architectures %}
                                                                                <span class="badge bg-secondary">{{ arch }}</span>
                                                                                {% endfor %}
                                                                            {% else %}
                                                                                {{ build.architecture or '-' }}
                                                                            {% endif %}
                                                                        </dd>

                                                                        <dt class="col-sm-3">Status</dt>
                                                                        <dd class="col-sm-9">
                                                                            {% if build.deprecated %}
                                                                            <span class="badge bg-danger"><i class="fas fa-ban"></i> Deprecated</span>
                                                                            {% else %}
                                                                            <span class="badge bg-success"><i class="fas fa-check"></i> Active</span>
                                                                            {% endif %}
                                                                        </dd>

                                                                        <dt class="col-sm-3">Total Packages</dt>
                                                                        <dd class="col-sm-9">{{ build.package_count }}</dd>

                                                                        <dt class="col-sm-3">Previous Release</dt>
                                                                        <dd class="col-sm-9">
                                                                            {% if build.prev_build_full_name %}
                                                                            <code>{{ build.prev_build_full_name }}</code>
                                                                            <span class="text-muted">({{ build.new_package_count }} package change{{ 's' if build.new_package_count | abs != 1 else '' }})</span>
                                                                            {% else %}
                                                                            <span class="text-muted">-</span>
                                                                            {% endif %}
                                                                        </dd>

                                                                        <dt class="col-sm-3">RPMMD Primary Hash</dt>
                                                                        <dd class="col-sm-9">
                                                                            {% if build.rpmmd_primary_hash %}
                                                                            {% if build.rpmmd_primary_hash_type %}<span class="badge bg-secondary">{{ build.rpmmd_primary_hash_type }}</span>{% endif %}
                                                                            <code class="text-break">{{ build.rpmmd_primary_hash }}</code>
                                                                            {% else %}
                                                                            <span class="text-muted">-</span>
                                                                            {% endif %}
                                                                        </dd>

                                                                        {% for ref in build.external_refs %}
                                                                        {% if ref.ref_type == 'vcs' %}
                                                                        <dt class="col-sm-3">VCS</dt>
                                                                        <dd class="col-sm-9">
                                                                            <span class="product-vcs-link" data-vcs="{{ ref.ref_value }}">
                                                                                <code class="text-break">{{ ref.ref_value }}</code>
                                                                            </span>
                                                                        </dd>
                                                                        {% elif ref.ref_type == 'obs-disturl' %}
                                                                        <dt class="col-sm-3">OBS DistURL</dt>
                                                                        <dd class="col-sm-9"><code class="text-break">{{ ref.ref_value }}</code></dd>
                                                                        {% endif %}
                                                                        {% endfor %}

                                                                        <dt class="col-sm-3">SPDX File</dt>
                                                                        <dd class="col-sm-9"><code>{{ build.file_name }}</code></dd>

                                                                        <dt class="col-sm-3">Created At</dt>
                                                                        <dd class="col-sm-9">{{ build.spdx_created | int | timestamp_to_datetime }}</dd>
                                                                    </dl>

                                                                    {{ supply_chain_audit_box(build) }}

                                                                    <!-- Package list is only fetched when explicitly requested -->
                                                                    <div class="mt-3">
                                                                        <button class="btn btn-sm btn-outline-secondary"
                                                                                id="build-{{ group_index }}-{{ loop.index }}-packages-btn"
                                                                                onclick="toggleBuildPackages('{{ group_index }}-{{ loop.index }}')">
                                                                            <i class="fas fa-chevron-down"></i> Packages ({{ build.package_count }})
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                                <div class="collapse mt-3" id="build-{{ group_index }}-{{ loop.index }}-packages-section">
                                                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                                                        <h6 class="mb-0">All Packages (<span id="build-{{ group_index }}-{{ loop.index }}-total">{{ build.package_count }}</span>)</h6>
                                                                        <input type="text" class="form-control form-control-sm"
                                                                               style="max-width: 300px;"
                                                                               placeholder="🔍 Search packages..."
                                                                               onkeyup="filterBuildPackages('{{ group_index }}-{{ loop.index }}', this.value)">
                                                                    </div>
                                                                    <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                                                                        <table class="table table-sm table-striped" id="build-{{ group_index }}-{{ loop.index }}-packages">
                                                                            <thead class="table-light sticky-top">
                                                                                <tr>
                                                                                    <th style="width: 20%;">Package Name</th>
                                                                                    <th style="width: 8%;">Arch</th>
                                                                                    <th style="width: 22%;">Filename</th>
                                                                                    <th style="width: 25%;">VCS</th>
                                                                                    <th style="width: 25%;">Build Area</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody id="build-{{ group_index }}-{{ loop.index }}-packages-tbody">
                                                                                <!-- Rendered by JavaScript -->
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                                                        <div>
                                                                            <small class="text-muted" id="build-{{ group_index }}-{{ loop.index }}-page-info">Page 1</small>
                                                                        </div>
                                                                        <div>
                                                                            <button class="btn btn-sm btn-outline-secondary" id="build-{{ group_index }}-{{ loop.index }}-prev" onclick="changeBuildPage('{{ group_index }}-{{ loop.index }}', -1)">
                                                                                <i class="fas fa-chevron-left"></i> Previous
                                                                            </button>
                                                                            <button class="btn btn-sm btn-outline-secondary" id="build-{{ group_index }}-{{ loop.index }}-next" onclick="changeBuildPage('{{ group_index }}-{{ loop.index }}', 1)">
                                                                                Next <i class="fas fa-chevron-right"></i>
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                    <!-- Package data loaded lazily via API -->
                                                                    <script type="application/json" id="build-{{ group_index }}-{{ loop.index }}-metadata">
                                                                        {
                                                                            "full_name": {{ build.full_name | tojson }},
                                                                            "prev_full_name": {{ build.prev_build_full_name | tojson }},
                                                                            "package_count": {{ build.package_count }}
                                                                        }
                                                                    </script>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                    {% if group.build_count > visible_builds %}
                                                    {# In a tfoot so it stays below the Debug/Source rows appended to the tbody #}
                                                    <tfoot>
                                                        <tr id="group-{{ group_index }}-more-row">
                                                            <td colspan="6" class="text-center bg-light">
                                                                <button class="btn btn-sm btn-outline-primary"
                                                                        onclick="showAllGroupBuilds('{{ group_index }}')">
                                                                    <i class="fas fa-chevron-down"></i>
                                                                    Show {{ group.build_count - visible_builds }} older build{{ 's' if group.build_count - visible_builds != 1 else '' }}
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    </tfoot>
                                                    {% endif %}
                                                </table>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% else %}
                            <div class="text-center py-5">
                                {% if cache_rebuilding %}
                                <i class="fas fa-sync-alt fa-spin fa-3x text-muted mb-3"></i>
                                <h4>Database Rebuilding</h4>
                                <p class="text-muted">The cache daemon is currently rebuilding the database.</p>
                                <p class="text-muted">
                                    Product data will appear here automatically once the SPDX scan completes.<br>
                                    <small>Please wait a few minutes and refresh this page.</small>
                                </p>
                                {% else %}
                                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                <h4>No Products Found</h4>
                                <p class="text-muted">No SPDX product data available in cache.</p>
                                <p class="text-muted">
                                    Configure SPDX scanning in <code>config.ini</code> under <code>[spdx]</code> section.<br>
                                    Then restart the cache daemon to populate SPDX data.
                                </p>
                                {% endif %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    </div> <!-- Close searchInterface -->
                </div> <!-- Close mb-4 -->
                {% else %}
                <!-- No products available -->
                <div class="text-center py-5">
                    {% if cache_rebuilding %}
                    <i class="fas fa-sync-alt fa-spin fa-3x text-muted mb-3"></i>
                    <h4>Database Rebuilding</h4>
                    <p class="text-muted">The cache daemon is currently rebuilding the database.</p>
                    <p class="text-muted">
                        Product data will appear here automatically once the SPDX scan completes.<br>
                        <small>Please wait a few minutes and refresh this page.</small>
                    </p>
                    {% else %}
                    <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                    <h4>No Products Found</h4>
                    <p class="text-muted">No SPDX product data available in cache.</p>
                    <p class="text-muted">
                        Configure SPDX scanning in <code>config.ini</code> under <code>[spdx]</code> section.<br>
                        Then restart the cache daemon to populate SPDX data.
                    </p>
                    {% endif %}
                </div>
                {% endif %}

                <!-- Immediate URL parameter handler (runs before DOMContentLoaded) -->
                <script>
                (function() {
                    // Check URL parameters immediately
                    const urlParams = new URLSearchParams(window.location.search);
                    const vcsSearchParam = urlParams.get('vcs_search');

                    if (vcsSearchParam) {
                        // Switch active tab classes immediately (before Bootstrap tabs are
                        // initialized) - Product Catalog is the default tab
                        document.getElementById('catalog-tab')?.classList.remove('active');
                        document.getElementById('catalog-pane')?.classList.remove('show', 'active');

                        document.getElementById('vcs-search-tab')?.classList.add('active');
                        document.getElementById('vcs-search-pane')?.classList.add('show', 'active');

                        // Set aria-selected attributes
                        document.getElementById('catalog-tab')?.setAttribute('aria-selected', 'false');
                        document.getElementById('vcs-search-tab')?.setAttribute('aria-selected', 'true');

                        // Pre-fill the search input (decode URL encoding)
                        const vcsSearchInput = document.getElementById('vcsSearch');
                        if (vcsSearchInput) {
                            vcsSearchInput.value = decodeURIComponent(vcsSearchParam);
                        }
                    }
                })();
                </script>

            </div>
        </div>
    </div>
</div>

<!-- Shared by every Supply Chain Audit box on the page, including the JS injected ones -->
<div class="modal fade" id="supplyChainInfoModal" tabindex="-1" aria-labelledby="supplyChainInfoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="supplyChainInfoModalLabel">
                    <i class="fas fa-link"></i> Supply Chain Audit
                    <span class="badge bg-warning text-dark ms-1">WIP</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="mb-0">
                    This information is stored independently of the build, distribution and
                    notification infrastructure. It cannot be blocked, because it is distributed
                    peer to peer, and the current state cannot be hidden.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
// Hostname mappings for VCS URLs
const HOSTNAME_MAPPINGS = {{ hostname_mappings | tojson | safe }};
console.log('[HOSTNAME_MAPPINGS] Loaded mappings:', HOSTNAME_MAPPINGS);

// Function to map hostname in URL
function mapHostname(url) {
    if (!url || !HOSTNAME_MAPPINGS) {
        console.log('[mapHostname] No URL or no mappings:', {url, HOSTNAME_MAPPINGS});
        return url;
    }

    try {
        const urlObj = new URL(url);
        const hostname = urlObj.hostname;
        console.log('[mapHostname] Input URL:', url, 'Hostname:', hostname);

        if (HOSTNAME_MAPPINGS[hostname]) {
            const newHostname = HOSTNAME_MAPPINGS[hostname];
            console.log('[mapHostname] Mapping', hostname, '->', newHostname);
            urlObj.hostname = newHostname;
            const result = urlObj.toString();
            console.log('[mapHostname] Result:', result);
            return result;
        }
        console.log('[mapHostname] No mapping found for hostname:', hostname);
        return url;
    } catch (e) {
        // Invalid URL, return as-is
        console.error('[mapHostname] Error:', e, 'URL:', url);
        return url;
    }
}

// Build package index from grouped products
const groupedProductsData = {{ grouped_products | tojson | safe }};
const packageIndex = {};

// Flatten grouped products for indexing
const buildsData = [];
groupedProductsData.forEach(group => {
    group.builds.forEach(build => {
        buildsData.push(build);
    });
});

// Index all packages with their build info
// Group by package_name:arch:commit_hash to avoid mixing different versions
buildsData.forEach(build => {
    const buildInfo = {
        name: build.name,
        version: build.version,
        build_number: build.build_number,
        full_name: build.full_name
    };

    if (build.packages) {
        build.packages.forEach(pkg => {
            // Use commit_hash in key to separate different versions of the same package
            const key = `${pkg.package_name}:${pkg.arch || 'noarch'}:${pkg.commit_hash || ''}`;

            if (!packageIndex[key]) {
                packageIndex[key] = {
                    package_name: pkg.package_name,
                    arch: pkg.arch,
                    filename: pkg.filename,
                    vcs_url: pkg.vcs_url,
                    vcs_org: pkg.vcs_org,
                    tracking_branch: pkg.tracking_branch,
                    commit_hash: pkg.commit_hash,
                    disturl: pkg.disturl,
                    products: []
                };
            }

            // Add this build to the package's product list
            packageIndex[key].products.push(buildInfo);
        });
    }
});

async function searchBinaries() {
    const input = document.getElementById('binarySearch');
    const searchTerm = input.value.trim();
    const resultsDiv = document.getElementById('binarySearchResults');
    const resultsBody = document.getElementById('binarySearchResultsBody');
    const resultCount = document.getElementById('searchResultCount');

    if (searchTerm.length < 2) {
        resultsDiv.style.display = 'none';
        return;
    }

    // Show loading state
    resultsDiv.style.display = 'block';
    resultCount.textContent = 'Searching...';
    resultsBody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-3"><span class="spinner-border spinner-border-sm me-2"></span>Searching packages...</td></tr>';

    try {
        // Call API to search packages
        const response = await fetch(`/api/products/search-packages?q=${encodeURIComponent(searchTerm)}`);
        if (!response.ok) {
            throw new Error('Search failed');
        }

        const data = await response.json();
        const matches = data.packages || [];

        // Display results
        if (matches.length > 0) {
            resultCount.textContent = `${matches.length} package${matches.length !== 1 ? 's' : ''}`;

            let html = '';
            matches.forEach(pkg => {
                html += '<tr>';
                html += `<td><code>${escapeHtml(pkg.package_name)}</code></td>`;
                html += '<td>';
                if (pkg.arch) {
                    html += `<code class="small">${escapeHtml(pkg.arch)}</code>`;
                } else {
                    html += '<span class="text-muted">-</span>';
                }
                html += '</td>';
                html += '<td>';
                if (pkg.filename) {
                    html += `<small class="text-muted">${escapeHtml(pkg.filename)}</small>`;
                } else {
                    html += '<span class="text-muted">-</span>';
                }
                html += '</td>';
                html += '<td>';
                if (pkg.vcs_url) {
                    html += '<div>';
                    // Repository name links to internal /packages/ URL
                    const repoName = pkg.vcs_url.split('/').pop();
                    const internalUrl = `/packages/${encodeURIComponent(repoName)}${pkg.vcs_org ? `?org=${encodeURIComponent(pkg.vcs_org)}` : ''}`;
                    html += `<a href="${internalUrl}" class="text-decoration-none small">`;
                    html += `<i class="fas fa-code-branch"></i> ${escapeHtml(repoName)}`;
                    html += '</a>';
                    if (pkg.tracking_branch) {
                        html += `<br><small class="text-muted">Branch: <a href="${escapeHtml(mapHostname(pkg.vcs_url))}/src/branch/${escapeHtml(pkg.tracking_branch)}" target="_blank" class="text-decoration-none"><code>${escapeHtml(pkg.tracking_branch)}</code></a></small>`;
                    }
                    if (pkg.commit_hash) {
                        html += `<br><small class="text-muted">Commit: <a href="${escapeHtml(mapHostname(pkg.vcs_url))}/commit/${escapeHtml(pkg.commit_hash)}" target="_blank" class="text-decoration-none" title="${escapeHtml(pkg.commit_hash)}"><code>${escapeHtml(pkg.commit_hash.substring(0, 8))}...</code></a></small>`;
                    }
                    html += '</div>';
                } else {
                    html += '<span class="text-muted">-</span>';
                }
                html += '</td>';
                html += '<td>';
                if (pkg.disturl) {
                    html += formatDisturl(pkg.disturl, pkg.vcs_org);
                } else {
                    html += '<span class="text-muted">-</span>';
                }
                html += '</td>';
                html += '<td>';
                // Show all products containing this package (deduplicated by product name + version)
                const uniqueProducts = new Map();
                if (pkg.products) {
                    pkg.products.forEach((product) => {
                        const key = `${product.name}:${product.version || ''}`;
                        if (!uniqueProducts.has(key)) {
                            uniqueProducts.set(key, product);
                        }
                    });
                }

                let productIdx = 0;
                uniqueProducts.forEach((product) => {
                    if (productIdx > 0) html += '<br>';
                    html += `<a href="#" class="text-decoration-none" onclick="jumpToProduct('${escapeHtml(product.full_name)}', '${escapeHtml(pkg.filename || '')}'); return false;">`;
                    html += `<strong>${escapeHtml(product.name)}</strong>`;
                    if (product.version) {
                        html += ` <span class="text-muted">v${escapeHtml(product.version)}</span>`;
                    }
                    html += '</a>';
                    productIdx++;
                });
                html += '</td>';
                html += '</tr>';
            });

            resultsBody.innerHTML = html;
        } else {
            resultCount.textContent = '0 packages';
            resultsBody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-3">No packages found matching your search</td></tr>';
        }
    } catch (error) {
        console.error('Search error:', error);
        resultCount.textContent = 'Error';
        resultsBody.innerHTML = '<tr><td colspan="6" class="text-center text-danger py-3">Search failed. Please try again.</td></tr>';
    }
}

function clearBinarySearch() {
    document.getElementById('binarySearch').value = '';
    document.getElementById('binarySearchResults').style.display = 'none';
}

function searchFiles() {
    const input = document.getElementById('fileSearch');
    const searchTerm = input.value.trim();
    const resultsDiv = document.getElementById('fileSearchResults');
    const resultsBody = document.getElementById('fileSearchResultsBody');
    const resultCount = document.getElementById('fileSearchResultCount');

    if (searchTerm.length < 2) {
        resultsDiv.style.display = 'none';
        return;
    }

    // Show loading
    resultsDiv.style.display = 'block';
    resultCount.textContent = 'Searching...';
    resultsBody.innerHTML = '<tr><td colspan="7" class="text-center py-3"><i class="fas fa-spinner fa-spin"></i> Searching...</td></tr>';

    // Call API to search files in database
    fetch(`/api/products/files?q=${encodeURIComponent(searchTerm)}`)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                resultsBody.innerHTML = `<tr><td colspan="7" class="text-center text-danger py-3">${escapeHtml(data.error)}</td></tr>`;
                resultCount.textContent = 'Error';
                return;
            }

            const results = data.results || [];
            const count = data.count || 0;

            if (count > 0) {
                resultCount.textContent = `${count} file${count !== 1 ? 's' : ''}`;

                let html = '';
                results.forEach(result => {
                    const packages = result.packages || [];
                    const firstPkg = packages[0] || {};

                    html += '<tr>';
                    html += `<td><code class="small">${escapeHtml(result.file_path)}</code></td>`;
                    html += `<td><code>${escapeHtml(firstPkg.package_name || '-')}</code></td>`;
                    html += '<td>';
                    if (firstPkg.arch) {
                        html += `<code class="small">${escapeHtml(firstPkg.arch)}</code>`;
                    } else {
                        html += '<span class="text-muted">-</span>';
                    }
                    html += '</td>';
                    html += '<td>';
                    html += `<small class="text-muted">${escapeHtml(result.rpm_filename)}</small>`;
                    html += '</td>';
                    html += '<td>';
                    if (firstPkg.vcs_url) {
                        html += '<div>';
                        // Repository name links to internal /packages/ URL
                        const repoName = firstPkg.vcs_url.split('/').pop();
                        const internalUrl = `/packages/${encodeURIComponent(repoName)}${firstPkg.vcs_org ? `?org=${encodeURIComponent(firstPkg.vcs_org)}` : ''}`;
                        html += `<a href="${internalUrl}" class="text-decoration-none small">`;
                        html += `<i class="fas fa-code-branch"></i> ${escapeHtml(repoName)}`;
                        html += '</a>';
                        if (firstPkg.tracking_branch) {
                            html += `<br><small class="text-muted">Branch: <a href="${escapeHtml(mapHostname(firstPkg.vcs_url))}/src/branch/${escapeHtml(firstPkg.tracking_branch)}" target="_blank" class="text-decoration-none"><code>${escapeHtml(firstPkg.tracking_branch)}</code></a></small>`;
                        }
                        if (firstPkg.commit_hash) {
                            html += `<br><small class="text-muted">Commit: <a href="${escapeHtml(mapHostname(firstPkg.vcs_url))}/commit/${escapeHtml(firstPkg.commit_hash)}" target="_blank" class="text-decoration-none" title="${escapeHtml(firstPkg.commit_hash)}"><code>${escapeHtml(firstPkg.commit_hash.substring(0, 8))}...</code></a></small>`;
                        }
                        html += '</div>';
                    } else {
                        html += '<span class="text-muted">-</span>';
                    }
                    html += '</td>';
                    html += '<td>';
                    if (firstPkg.disturl) {
                        html += formatDisturl(firstPkg.disturl, firstPkg.vcs_org);
                    } else {
                        html += '<span class="text-muted">-</span>';
                    }
                    html += '</td>';
                    html += '<td>';
                    // Show all products containing this RPM (deduplicated by product name + version)
                    const uniqueProducts = new Map();
                    packages.forEach((pkg) => {
                        const key = `${pkg.product_name}:${pkg.product_version || ''}`;
                        if (!uniqueProducts.has(key)) {
                            uniqueProducts.set(key, pkg);
                        }
                    });

                    let productIdx = 0;
                    uniqueProducts.forEach((pkg) => {
                        if (productIdx > 0) html += '<br>';
                        html += `<small><a href="#" class="text-decoration-none" onclick="jumpToProduct('${escapeHtml(pkg.product_full_name || '')}', '${escapeHtml(result.rpm_filename || '')}'); return false;">`;
                        html += `<strong>${escapeHtml(pkg.product_name)}</strong>`;
                        if (pkg.product_version) {
                            html += ` <span class="text-muted">v${escapeHtml(pkg.product_version)}</span>`;
                        }
                        html += '</a></small>';
                        productIdx++;
                    });
                    html += '</td>';
                    html += '</tr>';
                });

                resultsBody.innerHTML = html;
            } else {
                resultCount.textContent = '0 files';
                resultsBody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-3">No files found matching your search</td></tr>';
            }
        })
        .catch(error => {
            console.error('File search error:', error);
            resultCount.textContent = 'Error';
            resultsBody.innerHTML = '<tr><td colspan="7" class="text-center text-danger py-3">Error searching files</td></tr>';
        });
}

function clearFileSearch() {
    document.getElementById('fileSearch').value = '';
    document.getElementById('fileSearchResults').style.display = 'none';
}

function searchVCS() {
    const input = document.getElementById('vcsSearch');
    const searchTerm = input.value.trim();
    const resultsDiv = document.getElementById('vcsSearchResults');
    const resultsBody = document.getElementById('vcsSearchResultsBody');
    const resultCount = document.getElementById('vcsSearchResultCount');

    if (searchTerm.length < 2) {
        resultsDiv.style.display = 'none';
        return;
    }

    // Show loading
    resultsDiv.style.display = 'block';
    resultCount.textContent = 'Searching...';
    resultsBody.innerHTML = '<tr><td colspan="6" class="text-center py-3"><i class="fas fa-spinner fa-spin"></i> Searching...</td></tr>';

    // Call API to search VCS
    fetch(`/api/products/vcs-search?q=${encodeURIComponent(searchTerm)}`)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                resultsBody.innerHTML = `<tr><td colspan="6" class="text-center text-danger py-3">${escapeHtml(data.error)}</td></tr>`;
                resultCount.textContent = 'Error';
                return;
            }

            const packages = data.packages || [];
            const count = data.count || 0;

            if (count > 0) {
                resultCount.textContent = `${count} package${count !== 1 ? 's' : ''}`;

                let html = '';
                packages.forEach(pkg => {
                    html += '<tr>';
                    html += `<td><code>${escapeHtml(pkg.package_name)}</code></td>`;
                    html += '<td>';
                    if (pkg.arch) {
                        html += `<code class="small">${escapeHtml(pkg.arch)}</code>`;
                    } else {
                        html += '<span class="text-muted">-</span>';
                    }
                    html += '</td>';
                    html += '<td>';
                    if (pkg.filename) {
                        html += `<small class="text-muted">${escapeHtml(pkg.filename)}</small>`;
                    } else {
                        html += '<span class="text-muted">-</span>';
                    }
                    html += '</td>';
                    html += '<td>';
                    if (pkg.vcs_url) {
                        html += '<div>';
                        // Repository name links to internal /packages/ URL
                        const repoName = pkg.vcs_url.split('/').pop();
                        const internalUrl = `/packages/${encodeURIComponent(repoName)}${pkg.vcs_org ? `?org=${encodeURIComponent(pkg.vcs_org)}` : ''}`;
                        html += `<a href="${internalUrl}" class="text-decoration-none small">`;
                        html += `<i class="fas fa-code-branch"></i> ${escapeHtml(repoName)}`;
                        html += '</a>';
                        if (pkg.tracking_branch) {
                            html += `<br><small class="text-muted">Branch: <a href="${escapeHtml(mapHostname(pkg.vcs_url))}/src/branch/${escapeHtml(pkg.tracking_branch)}" target="_blank" class="text-decoration-none"><code>${escapeHtml(pkg.tracking_branch)}</code></a></small>`;
                        }
                        if (pkg.commit_hash) {
                            html += `<br><small class="text-muted">Commit: <a href="${escapeHtml(mapHostname(pkg.vcs_url))}/commit/${escapeHtml(pkg.commit_hash)}" target="_blank" class="text-decoration-none" title="${escapeHtml(pkg.commit_hash)}"><code>${escapeHtml(pkg.commit_hash.substring(0, 8))}...</code></a></small>`;
                        }
                        html += '</div>';
                    } else {
                        html += '<span class="text-muted">-</span>';
                    }
                    html += '</td>';
                    html += '<td>';
                    if (pkg.disturl) {
                        html += formatDisturl(pkg.disturl, pkg.vcs_org);
                    } else {
                        html += '<span class="text-muted">-</span>';
                    }
                    html += '</td>';
                    html += '<td>';
                    // Show product containing this package
                    const product = pkg.product || {};
                    html += `<a href="#" class="text-decoration-none" onclick="jumpToProduct('${escapeHtml(product.full_name || '')}', '${escapeHtml(pkg.filename || '')}'); return false;">`;
                    html += `<strong>${escapeHtml(product.name)}</strong>`;
                    if (product.version) {
                        html += ` <span class="text-muted">v${escapeHtml(product.version)}</span>`;
                    }
                    html += '</a>';
                    html += '</td>';
                    html += '</tr>';
                });

                resultsBody.innerHTML = html;
            } else {
                resultCount.textContent = '0 packages';
                resultsBody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-3">No packages found matching your VCS criteria</td></tr>';
            }
        })
        .catch(error => {
            console.error('VCS search error:', error);
            resultCount.textContent = 'Error';
            resultsBody.innerHTML = '<tr><td colspan="6" class="text-center text-danger py-3">Error searching VCS repositories</td></tr>';
        });
}

function clearVCSSearch() {
    document.getElementById('vcsSearch').value = '';
    document.getElementById('vcsSearchResults').style.display = 'none';
}

function jumpToProduct(fullName, packageFilename) {
    if (!fullName) {
        console.error('[jumpToProduct] No full_name provided');
        return;
    }

    console.log('[jumpToProduct] Jumping to build:', fullName, 'Package:', packageFilename);

    // Find the build in groupedProductsData
    let foundGroupIndex = null;
    let foundBuildIndex = null;

    groupedProductsData.forEach((group, groupIdx) => {
        group.builds.forEach((build, buildIdx) => {
            if (build.full_name === fullName) {
                foundGroupIndex = groupIdx + 1; // 1-based index
                foundBuildIndex = buildIdx + 1; // 1-based index
            }
        });
    });

    if (!foundGroupIndex || !foundBuildIndex) {
        console.error('[jumpToProduct] Build not found:', fullName);
        return;
    }

    const buildId = `build-${foundGroupIndex}-${foundBuildIndex}`;
    const groupId = `group-${foundGroupIndex}`;

    console.log('[jumpToProduct] Found build:', buildId, 'in group:', groupId);

    // Switch to Product Catalog tab
    const catalogTab = document.getElementById('catalog-tab');
    if (catalogTab) {
        const bsTab = new bootstrap.Tab(catalogTab);
        bsTab.show();
    }

    // Expand the group if not already expanded
    const groupElement = document.getElementById(groupId);
    if (groupElement && !groupElement.classList.contains('show')) {
        const groupToggle = document.querySelector(`[data-bs-target="#${groupId}"]`);
        if (groupToggle) {
            groupToggle.click();
        }
    }

    // The target may be one of the older builds that are hidden by default
    showAllGroupBuilds(foundGroupIndex);

    // Wait for group to expand, then expand the build
    setTimeout(() => {
        const buildElement = document.getElementById(buildId);
        if (buildElement && !buildElement.classList.contains('show')) {
            const buildToggle = document.querySelector(`[data-bs-target="#${buildId}"]`);
            if (buildToggle) {
                buildToggle.click();
            }
        }

        // Wait for build to expand, then scroll and fill search
        setTimeout(async () => {
            // Scroll to the build
            const buildRow = document.querySelector(`[data-bs-target="#${buildId}"]`);
            if (buildRow) {
                buildRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }

            // Fill in the package filename in the search field
            if (packageFilename) {
                const buildIndex = `${foundGroupIndex}-${foundBuildIndex}`;

                // Packages are loaded on demand - open that section first
                const packagesSection = document.getElementById(`build-${buildIndex}-packages-section`);
                if (packagesSection && !packagesSection.classList.contains('show')) {
                    await toggleBuildPackages(buildIndex);
                } else {
                    await initializeBuildPackages(buildIndex);
                }

                const searchInput = document.querySelector(`#${buildId} input[placeholder*="Search packages"]`);
                if (searchInput) {
                    searchInput.value = packageFilename;
                    // Trigger the filter function
                    filterBuildPackages(buildIndex, packageFilename);
                    console.log('[jumpToProduct] Filled search field with:', packageFilename);
                }
            }
        }, 350); // Wait for collapse animation
    }, 350); // Wait for collapse animation
}

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

function parseDisturl(disturl, vcsOrg) {
    // Parse disturl format: obs://build.opensuse.org/PROJECT/REPOSITORY/HASH-PACKAGE
    // Returns: { org: "ORG", project: "PROJECT", package: "PACKAGE" }
    // Uses vcsOrg from VCS URL if available, otherwise extracts from project
    if (!disturl || !disturl.startsWith('obs://')) {
        return null;
    }

    try {
        // Remove obs:// prefix and split by /
        const parts = disturl.substring(6).split('/');

        if (parts.length < 4) {
            return null;
        }

        // parts[0] = instance (e.g., build.opensuse.org)
        // parts[1] = project (e.g., openSUSE:Backports:SLE-16.1)
        // parts[2] = repository (e.g., standard)
        // parts[3] = hash-package (e.g., 4d2f00d54aade3a65ca2ac15633d87e6-0ad)

        const project = parts[1];
        const hashPackage = parts[3];

        // Use VCS org if provided, otherwise extract from project name
        let org = vcsOrg;
        if (!org) {
            const colonIndex = project.indexOf(':');
            org = colonIndex !== -1 ? project.substring(0, colonIndex) : project;
        }

        // Extract package name from hash-package
        // Format: HASH-PACKAGENAME where HASH is typically 32 hex chars
        const dashIndex = hashPackage.indexOf('-');
        const packageName = dashIndex !== -1 ? hashPackage.substring(dashIndex + 1) : hashPackage;

        return {
            org: org,
            project: project,
            package: packageName,
            url: `/packages/${encodeURIComponent(packageName)}?org=${encodeURIComponent(org)}&project=${encodeURIComponent(project)}`
        };
    } catch (e) {
        console.error('Error parsing disturl:', disturl, e);
        return null;
    }
}

function formatDisturl(disturl, vcsOrg) {
    const parsed = parseDisturl(disturl, vcsOrg);
    if (parsed) {
        return `<a href="${parsed.url}" class="text-decoration-none" title="View in ${escapeHtml(parsed.project)}">` +
               `<i class="fas fa-link"></i> <small>${escapeHtml(parsed.project)}/${escapeHtml(parsed.package)}</small>` +
               `</a>`;
    } else {
        return `<small class="text-muted" title="${escapeHtml(disturl)}">${escapeHtml(disturl.split('/').pop())}</small>`;
    }
}

function parseVcsRef(vcsRef) {
    // Parse a product-level VCS reference. The fragment is a commit hash only
    // when it is a SHA-1 or SHA-256 digest, otherwise it names a branch - same
    // rule as scmsync2gitea_ui_url() in app.py. Examples:
    //   https://src.opensuse.org/products/PackageHub#leap-16.0
    //   https://src.opensuse.org/products/SLES?trackingbranch=main#<sha>
    // Returns: { baseUrl, trackingBranch, commitHash, repoName }
    if (!vcsRef) return null;

    const hashIndex = vcsRef.indexOf('#');
    const fragment = hashIndex !== -1 ? vcsRef.substring(hashIndex + 1) : null;
    let baseUrl = hashIndex !== -1 ? vcsRef.substring(0, hashIndex) : vcsRef;

    let trackingBranch = null;
    const queryIndex = baseUrl.indexOf('?');
    if (queryIndex !== -1) {
        const query = baseUrl.substring(queryIndex + 1);
        baseUrl = baseUrl.substring(0, queryIndex);
        query.split('&').forEach(param => {
            const [key, value] = param.split('=');
            if (key === 'trackingbranch' && value) {
                trackingBranch = decodeURIComponent(value);
            }
        });
    }

    let commitHash = null;
    if (fragment) {
        if (/^[a-fA-F0-9]{40}$/.test(fragment) || /^[a-fA-F0-9]{64}$/.test(fragment)) {
            commitHash = fragment;
        } else if (!trackingBranch) {
            // Not a digest - the fragment names the branch
            trackingBranch = decodeURIComponent(fragment);
        }
    }

    let repoName = null;
    try {
        const pathParts = new URL(baseUrl).pathname.replace(/^\/+|\/+$/g, '').split('/');
        repoName = pathParts[pathParts.length - 1] || null;
    } catch (e) {
        // Not an absolute URL - fall back to showing the raw value
        return { baseUrl, trackingBranch, commitHash, repoName: null };
    }

    return { baseUrl, trackingBranch, commitHash, repoName };
}

function formatProductVcs(vcsRef) {
    const vcs = parseVcsRef(vcsRef);
    if (!vcs) return '<span class="text-muted">-</span>';

    if (!vcs.repoName) {
        // Could not parse as a URL - keep the plain text
        return `<code class="text-break">${escapeHtml(vcsRef)}</code>`;
    }

    const repoUrl = mapHostname(vcs.baseUrl);
    let html = `<a href="${escapeHtml(repoUrl)}" target="_blank" class="text-decoration-none" title="Open repository">` +
               `<i class="fas fa-code-branch"></i> <code class="text-break">${escapeHtml(vcs.baseUrl)}</code></a>`;

    if (vcs.trackingBranch) {
        html += `<br><small class="text-muted">Branch: ` +
                `<a href="${escapeHtml(repoUrl)}/src/branch/${encodeURIComponent(vcs.trackingBranch)}" target="_blank" class="text-decoration-none">` +
                `<code>${escapeHtml(vcs.trackingBranch)}</code></a></small>`;
    }

    if (vcs.commitHash) {
        html += `<br><small class="text-muted">Commit: ` +
                `<a href="${escapeHtml(repoUrl)}/commit/${encodeURIComponent(vcs.commitHash)}" target="_blank" class="text-decoration-none" title="${escapeHtml(vcs.commitHash)}">` +
                `<code>${escapeHtml(vcs.commitHash.substring(0, 8))}...</code></a></small>`;
    }

    return html;
}

// Track sort state for each group
const groupSortState = {};

function toggleProductGroup(id) {
    const element = document.getElementById(id);
    const icon = document.getElementById(`${id}-icon`);

    element.addEventListener('shown.bs.collapse', function() {
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-up');

        // Set initial sort state to full_name when first opened
        const groupIndex = id.replace('group-', '');
        if (!groupSortState[groupIndex]) {
            groupSortState[groupIndex] = {
                field: 'full_name',
                ascending: true
            };
            // Update icon to show it's sorted by full_name
            const nameIcon = document.getElementById(`group-${groupIndex}-sort-full_name`);
            if (nameIcon) {
                nameIcon.className = 'fas fa-sort-up';
            }
        }
    }, { once: true });

    element.addEventListener('hidden.bs.collapse', function() {
        icon.classList.remove('fa-chevron-up');
        icon.classList.add('fa-chevron-down');
    }, { once: true });
}

// State for lazy loading Debug/Source products
let debugSourceProductsLoaded = false;
let debugSourceProductsCache = null;

function toggleDebugSourceProducts() {
    const checkbox = document.getElementById('showDebugSourceProducts');
    const showDebugSource = checkbox.checked;

    if (showDebugSource && !debugSourceProductsLoaded) {
        // First time showing - load from API
        console.log('[toggleDebugSourceProducts] Loading Debug/Source products from API...');

        // Disable checkbox while loading
        checkbox.disabled = true;

        fetch('/api/products/debug-source')
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log(`[toggleDebugSourceProducts] Loaded ${data.grouped_products.length} Debug/Source product groups`);
                debugSourceProductsCache = data.grouped_products;
                injectDebugSourceProducts(data.grouped_products);
                debugSourceProductsLoaded = true;
                checkbox.disabled = false;
            })
            .catch(error => {
                console.error('[toggleDebugSourceProducts] Error loading Debug/Source products:', error);
                alert('Failed to load Debug/Source products. Please try again.');
                checkbox.checked = false;
                checkbox.disabled = false;
            });
    } else if (showDebugSource && debugSourceProductsLoaded) {
        // Already loaded - just show them
        console.log('[toggleDebugSourceProducts] Showing cached Debug/Source products');
        showCachedDebugSourceProducts();
    } else {
        // Hide them
        console.log('[toggleDebugSourceProducts] Hiding Debug/Source products');
        hideCachedDebugSourceProducts();
    }
}

// JS counterparts of the audit_flag_detail() / security_issues_detail() Jinja
// macros, for the client-side rendered Debug/Source product rows. Keep the
// wording and icons in sync with the macros at the top of this template.
function auditFlagDetailHtml(state, icon, okText, failText, pendingText = 'Not audited yet') {
    if (state === null || state === undefined) {
        return `<i class="fas ${icon} text-secondary opacity-50"></i> <span class="text-muted">${pendingText}</span>`;
    }
    return state
        ? `<i class="fas ${icon} text-success"></i> ${okText}`
        : `<i class="fas ${icon} text-danger"></i> ${failText}`;
}

function securityIssuesDetailHtml(issues) {
    if (issues === null || issues === undefined) {
        return '<i class="fas fa-shield text-secondary opacity-50"></i> <span class="text-muted">None known yet</span>';
    }
    // Worst severity first, same order as the macro
    const badges = ['critical', 'high', 'medium', 'low']
        .filter(level => (issues[level] || 0) > 0)
        .map(level => `<span class="badge audit-severity severity-${level} me-1">${issues[level]} ${level}</span>`);
    return badges.length
        ? badges.join('')
        : '<i class="fas fa-shield text-success"></i> None known';
}

// JS counterpart of the supply_chain_audit_box() macro
function supplyChainAuditBoxHtml(product) {
    return `
        <div class="card supply-chain-box mt-3">
            <div class="card-body p-3">
                <h6 class="mb-2">
                    <i class="fas fa-link"></i> Supply Chain Audit
                    <button type="button" class="btn btn-link btn-sm p-0 ms-1 align-baseline text-decoration-none"
                            data-bs-toggle="modal" data-bs-target="#supplyChainInfoModal"
                            title="About the supply chain audit data" aria-label="About the supply chain audit data">
                        <i class="fas fa-circle-question"></i>
                    </button>
                </h6>
                <dl class="row mb-0 small">
                    <dt class="col-sm-4">Registered Product</dt>
                    <dd class="col-sm-8 mb-1">${auditFlagDetailHtml(product.registered_product, 'fa-clipboard-check', 'Registered', 'Not registered', 'Not registered yet')}</dd>

                    <dt class="col-sm-4">Rebuild Reproducible</dt>
                    <dd class="col-sm-8 mb-1">${auditFlagDetailHtml(product.rebuild_reproducible, 'fa-arrows-rotate', 'Reproducible', 'Not reproducible')}</dd>

                    <dt class="col-sm-4">Highest Known Security Issue</dt>
                    <dd class="col-sm-8 mb-0">${securityIssuesDetailHtml(product.security_issues)}</dd>
                </dl>
            </div>
        </div>
    `;
}

function injectDebugSourceProducts(groupedProducts) {
    // For each Debug/Source group, find the matching group in the DOM and append products
    groupedProducts.forEach(group => {
        // Find the product group header by name
        const groupHeaders = document.querySelectorAll('.product-group-row strong');
        let matchingGroupIndex = null;

        groupHeaders.forEach((header, idx) => {
            const groupName = header.textContent.trim().split('\n')[0].replace('💿 ', '').trim();
            if (groupName === group.name) {
                matchingGroupIndex = idx + 1; // Groups are 1-indexed
            }
        });

        if (matchingGroupIndex === null) {
            console.warn(`[injectDebugSourceProducts] Could not find group: ${group.name}`);
            return;
        }

        const tbody = document.getElementById(`group-${matchingGroupIndex}-tbody`);
        if (!tbody) {
            console.warn(`[injectDebugSourceProducts] Could not find tbody for group ${matchingGroupIndex}`);
            return;
        }

        // Find the next product index (count existing products in this group)
        const existingProducts = tbody.querySelectorAll('.product-variant-row').length;

        // Append each Debug/Source product to the group's tbody
        group.products.forEach((product, productIdx) => {
            const globalProductIndex = existingProducts + productIdx + 1;
            const productId = `product-${matchingGroupIndex}-${globalProductIndex}`;

            // Create product variant row
            const variantRow = document.createElement('tr');
            variantRow.className = 'product-variant-row';
            variantRow.setAttribute('data-full-name', product.full_name);
            variantRow.setAttribute('data-version', product.version);
            variantRow.setAttribute('data-build-number', product.build_number);
            variantRow.setAttribute('data-product-index', globalProductIndex);
            variantRow.setAttribute('data-is-debug-source', 'true');

            variantRow.innerHTML = `
                <td><code>${product.full_name}</code></td>
                <td>${product.version}</td>
                <td><span class="badge bg-primary">${product.build_number}</span></td>
                <td>${product.package_count} packages</td>
                <td>
                    <button class="btn btn-sm btn-outline-primary"
                            onclick="toggleProductDetails('${productId}')"
                            data-bs-toggle="collapse"
                            data-bs-target="#${productId}">
                        <i class="fas fa-chevron-down"></i> Details
                    </button>
                </td>
            `;

            // Create product details row
            const detailsRow = document.createElement('tr');
            detailsRow.className = 'collapse product-variant-details';
            detailsRow.id = productId;
            detailsRow.setAttribute('data-is-debug-source', 'true');

            // Build packages table HTML
            let packagesHtml = '';
            if (product.packages && product.packages.length > 0) {
                const packagesJson = JSON.stringify(product.packages).replace(/'/g, '&apos;');
                packagesHtml = `
                    <div class="d-flex justify-content-between align-items-center mt-4 mb-2">
                        <h6 class="mb-0">Packages (<span id="${productId}-total">${product.packages.length}</span>)</h6>
                        <input type="text" class="form-control form-control-sm"
                               style="max-width: 300px;"
                               placeholder="🔍 Search binaries..."
                               onkeyup="filterProductPackages('${matchingGroupIndex}-${globalProductIndex}', this.value)">
                    </div>
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-sm table-hover">
                            <thead class="sticky-top bg-white">
                                <tr>
                                    <th>Binary Package</th>
                                </tr>
                            </thead>
                            <tbody id="${productId}-packages">
                                ${product.packages.map(pkg => `
                                    <tr class="package-row">
                                        <td><code>${pkg}</code></td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                    <script type="application/json" id="${productId}-packages-data">${packagesJson}<\/script>
                `;
            }

            detailsRow.innerHTML = `
                <td colspan="6">
                    <div class="card bg-light border-0">
                        <div class="card-body">
                            <h5>Product Information</h5>
                            <dl class="row mb-3 small">
                                <dt class="col-sm-3">Full Name</dt>
                                <dd class="col-sm-9"><code>${escapeHtml(product.full_name)}</code></dd>

                                <dt class="col-sm-3">Status</dt>
                                <dd class="col-sm-9">${product.deprecated
                                    ? '<span class="badge bg-danger"><i class="fas fa-ban"></i> Deprecated</span>'
                                    : '<span class="badge bg-success"><i class="fas fa-check"></i> Active</span>'}</dd>

                                <dt class="col-sm-3">Total Packages</dt>
                                <dd class="col-sm-9">${product.package_count}</dd>

                                <dt class="col-sm-3">RPMMD Primary Hash</dt>
                                <dd class="col-sm-9">${product.rpmmd_primary_hash
                                    ? `${product.rpmmd_primary_hash_type ? `<span class="badge bg-secondary">${escapeHtml(product.rpmmd_primary_hash_type)}</span> ` : ''}<code class="text-break">${escapeHtml(product.rpmmd_primary_hash)}</code>`
                                    : '<span class="text-muted">-</span>'}</dd>

                                <dt class="col-sm-3">SPDX File</dt>
                                <dd class="col-sm-9"><code>${escapeHtml(product.file_name)}</code></dd>

                                <dt class="col-sm-3">Created At</dt>
                                <dd class="col-sm-9">${new Date((product.spdx_created || product.file_mtime) * 1000).toLocaleString()}</dd>
                            </dl>
                            ${supplyChainAuditBoxHtml(product)}
                            ${packagesHtml}
                        </div>
                    </div>
                </td>
            `;

            // Append both rows to tbody
            tbody.appendChild(variantRow);
            tbody.appendChild(detailsRow);
        });

        // Update the variant count badge for this group
        // The badge is in the group header row (previous sibling of the collapse row)
        const collapseRow = document.getElementById(`group-${matchingGroupIndex}`);
        if (collapseRow) {
            const headerRow = collapseRow.previousElementSibling;
            const badge = headerRow?.querySelector('.badge');
            if (badge) {
                const currentCount = parseInt(badge.textContent);
                const newCount = currentCount + group.products.length;
                badge.textContent = `${newCount} variant${newCount !== 1 ? 's' : ''}`;
            }
        }
    });

    console.log('[injectDebugSourceProducts] Injection complete');
}

function showCachedDebugSourceProducts() {
    const debugSourceRows = document.querySelectorAll('.product-variant-row[data-is-debug-source="true"], .product-variant-details[data-is-debug-source="true"]');
    debugSourceRows.forEach(row => {
        row.style.display = '';
    });
    console.log(`[showCachedDebugSourceProducts] Showed ${debugSourceRows.length / 2} Debug/Source variants`);
}

function hideCachedDebugSourceProducts() {
    const debugSourceRows = document.querySelectorAll('.product-variant-row[data-is-debug-source="true"], .product-variant-details[data-is-debug-source="true"]');
    debugSourceRows.forEach(row => {
        row.style.display = 'none';

        // If this is a details row that's expanded, collapse it
        if (row.classList.contains('product-variant-details') && row.classList.contains('show')) {
            const collapseInstance = bootstrap.Collapse.getInstance(row);
            if (collapseInstance) {
                collapseInstance.hide();
            }
        }
    });
    console.log(`[hideCachedDebugSourceProducts] Hid ${debugSourceRows.length / 2} Debug/Source variants`);
}

// Only the newest builds of a product are visible initially. The older ones are
// rendered too, just hidden, so revealing them needs no fetch and keeps every
// build reachable by id (jumpToProduct relies on that).
function showAllGroupBuilds(groupIndex) {
    const tbody = document.getElementById(`group-${groupIndex}-tbody`);
    if (tbody) {
        tbody.querySelectorAll('tr.build-extra').forEach(row => {
            row.classList.remove('d-none', 'build-extra');
        });
    }

    const moreRow = document.getElementById(`group-${groupIndex}-more-row`);
    if (moreRow) {
        moreRow.classList.add('d-none');
    }
}

function sortGroupProducts(groupIndex, sortBy) {
    const tbody = document.getElementById(`group-${groupIndex}-tbody`);
    if (!tbody) return;

    const rows = Array.from(tbody.querySelectorAll('tr[data-product-index]'));

    // Initialize sort state for this group if needed
    if (!groupSortState[groupIndex]) {
        groupSortState[groupIndex] = {};
    }

    // Toggle sort direction if clicking the same column
    const currentSort = groupSortState[groupIndex];
    let ascending = true;
    if (currentSort.field === sortBy) {
        ascending = !currentSort.ascending;
    }

    // Sort rows
    rows.sort((a, b) => {
        let aVal, bVal;

        if (sortBy === 'full_name') {
            aVal = a.getAttribute('data-full-name');
            bVal = b.getAttribute('data-full-name');
        } else if (sortBy === 'version') {
            aVal = a.getAttribute('data-version');
            bVal = b.getAttribute('data-version');
        } else if (sortBy === 'build_number') {
            aVal = a.getAttribute('data-build-number');
            bVal = b.getAttribute('data-build-number');
        }

        if (aVal < bVal) return ascending ? -1 : 1;
        if (aVal > bVal) return ascending ? 1 : -1;
        return 0;
    });

    // Clear tbody and re-append sorted rows
    tbody.innerHTML = '';
    rows.forEach(row => tbody.appendChild(row));

    // Update sort state
    groupSortState[groupIndex] = {
        field: sortBy,
        ascending: ascending
    };

    // Update sort icons
    ['full_name', 'version', 'build_number'].forEach(field => {
        const icon = document.getElementById(`group-${groupIndex}-sort-${field}`);
        if (icon) {
            icon.className = 'fas fa-sort';
            if (field === sortBy) {
                icon.className = ascending ? 'fas fa-sort-up' : 'fas fa-sort-down';
            }
        }
    });
}

async function toggleNewPackages(id) {
    console.log(`[toggleNewPackages] Called with id: ${id}`);
    const element = document.getElementById(id);

    if (!element) {
        console.error(`[toggleNewPackages] Element not found: ${id}`);
        return;
    }

    // Close the corresponding "All Packages" details if open
    const detailsId = id.replace('-new', '');
    const detailsElement = document.getElementById(detailsId);
    if (detailsElement && detailsElement.classList.contains('show')) {
        const bsCollapse = bootstrap.Collapse.getInstance(detailsElement);
        if (bsCollapse) {
            bsCollapse.hide();
        }
    }

    // Check if we need to load data
    const loadedAttr = element.getAttribute('data-loaded');
    console.log(`[toggleNewPackages] Already loaded: ${loadedAttr}`);
    if (loadedAttr === 'true') {
        return; // Already loaded
    }

    // Get metadata
    const buildIndex = id.replace('build-', '').replace('-new', '');
    console.log(`[toggleNewPackages] Build index: ${buildIndex}`);

    const metadataElement = document.getElementById(`build-${buildIndex}-metadata`);
    if (!metadataElement) {
        console.error(`[toggleNewPackages] No metadata found for build ${buildIndex}`);
        return;
    }

    const metadata = JSON.parse(metadataElement.textContent);
    console.log(`[toggleNewPackages] Metadata:`, metadata);

    const contentElement = document.getElementById(`new-packages-content-${buildIndex}`);
    if (!contentElement) {
        console.error(`[toggleNewPackages] No content element found for new packages ${buildIndex}`);
        return;
    }

    // Show loading indicator
    contentElement.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading new packages...</div>';

    try {
        // Fetch ONLY new packages from API (much faster!)
        let url = `/api/products/build-packages?full_name=${encodeURIComponent(metadata.full_name)}`;
        if (metadata.prev_full_name) {
            url += `&prev_full_name=${encodeURIComponent(metadata.prev_full_name)}`;
            url += `&only_new=true`;  // Only fetch new packages, not all packages
        }

        console.log(`[toggleNewPackages] Fetching: ${url}`);
        const startTime = performance.now();

        const response = await fetch(url);
        console.log(`[toggleNewPackages] Response status: ${response.status}`);

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

        const data = await response.json();
        const fetchTime = ((performance.now() - startTime) / 1000).toFixed(2);
        console.log(`[toggleNewPackages] Data received in ${fetchTime}s:`, data);

        const newPackages = data.new_packages || [];
        console.log(`[toggleNewPackages] Rendering ${newPackages.length} new packages`);

        // Render new packages table
        renderNewPackagesTable(contentElement, newPackages, data.new_package_count || 0);

        // Process disturl links
        contentElement.querySelectorAll('.new-pkg-disturl-link').forEach(linkElement => {
            const disturl = linkElement.getAttribute('data-disturl');
            const vcsOrg = linkElement.getAttribute('data-vcs-org');
            if (disturl && typeof formatDisturl === 'function') {
                linkElement.innerHTML = formatDisturl(disturl, vcsOrg);
            }
        });

        // Mark as loaded
        element.setAttribute('data-loaded', 'true');
        console.log(`[toggleNewPackages] Completed successfully`);
    } catch (error) {
        console.error(`[toggleNewPackages] Error for build ${buildIndex}:`, error);
        contentElement.innerHTML = `<div class="text-center text-danger"><i class="fas fa-exclamation-triangle"></i> Error loading new packages: ${escapeHtml(error.message)}</div>`;
    }
}

function renderNewPackagesTable(container, newPackages, count) {
    const isPositive = count > 0;
    const iconClass = isPositive ? 'fa-plus-circle text-success' : 'fa-equals text-secondary';
    const titleText = isPositive ? `New Packages in this Build (${count})` : 'No Package Changes';

    let html = `
        <h6 class="${isPositive ? 'text-success' : 'text-secondary'}">
            <i class="fas ${iconClass}"></i> ${titleText}
        </h6>`;

    if (newPackages.length === 0) {
        html += '<p class="text-muted">No new packages compared to previous build.</p>';
    } else {
        html += `
        <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
            <table class="table table-sm table-striped table-bordered">
                <thead class="table-success sticky-top">
                    <tr>
                        <th style="width: 20%;">Package Name</th>
                        <th style="width: 8%;">Arch</th>
                        <th style="width: 22%;">Filename</th>
                        <th style="width: 25%;">VCS</th>
                        <th style="width: 25%;">Build Area</th>
                    </tr>
                </thead>
                <tbody>`;

        newPackages.forEach(pkg => {
            html += '<tr>';
            html += `<td><code>${escapeHtml(pkg.package_name || '')}</code></td>`;
            html += '<td>';
            if (pkg.arch) {
                html += `<code class="small">${escapeHtml(pkg.arch)}</code>`;
            } else {
                html += '<span class="text-muted">-</span>';
            }
            html += '</td>';
            html += '<td>';
            if (pkg.filename) {
                html += `<small class="text-muted">${escapeHtml(pkg.filename)}</small>`;
            } else {
                html += '<span class="text-muted">-</span>';
            }
            html += '</td>';
            html += '<td>';
            if (pkg.vcs_url) {
                html += '<div>';
                const repoName = pkg.vcs_url.split('/').pop();
                const internalUrl = `/packages/${encodeURIComponent(repoName)}${pkg.vcs_org ? `?org=${encodeURIComponent(pkg.vcs_org)}` : ''}`;
                html += `<a href="${internalUrl}" class="text-decoration-none small">`;
                html += `<i class="fas fa-code-branch"></i> ${escapeHtml(repoName)}`;
                html += '</a>';
                if (pkg.tracking_branch) {
                    html += `<br><small class="text-muted">Branch: <a href="${escapeHtml(mapHostname(pkg.vcs_url))}/src/branch/${escapeHtml(pkg.tracking_branch)}" target="_blank" class="text-decoration-none"><code>${escapeHtml(pkg.tracking_branch)}</code></a></small>`;
                }
                if (pkg.commit_hash) {
                    html += `<br><small class="text-muted">Commit: <a href="${escapeHtml(mapHostname(pkg.vcs_url))}/commit/${escapeHtml(pkg.commit_hash)}" target="_blank" class="text-decoration-none" title="${escapeHtml(pkg.commit_hash)}"><code>${escapeHtml(pkg.commit_hash.substring(0, 8))}...</code></a></small>`;
                }
                html += '</div>';
            } else {
                html += '<span class="text-muted">-</span>';
            }
            html += '</td>';
            html += '<td>';
            if (pkg.disturl) {
                html += `<span class="new-pkg-disturl-link" data-disturl="${escapeHtml(pkg.disturl)}" data-vcs-org="${escapeHtml(pkg.vcs_org || '')}"></span>`;
            } else {
                html += '<span class="text-muted">-</span>';
            }
            html += '</td>';
            html += '</tr>';
        });

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

    container.innerHTML = html;
}

function toggleBuildDetails(id) {
    const element = document.getElementById(id);
    const button = document.querySelector(`[data-bs-target="#${id}"] i`);

    // Close the corresponding "New Packages" section if open
    const newPackagesId = id + '-new';
    const newPackagesElement = document.getElementById(newPackagesId);
    if (newPackagesElement && newPackagesElement.classList.contains('show')) {
        const bsCollapse = bootstrap.Collapse.getInstance(newPackagesElement);
        if (bsCollapse) {
            bsCollapse.hide();
        }
    }

    element.addEventListener('shown.bs.collapse', function onShown() {
        button.classList.remove('fa-chevron-down');
        button.classList.add('fa-chevron-up');

        // Product information is rendered server-side - packages stay unloaded
        // until the user clicks the "Packages" button inside the details.

        // Remove this listener after first execution
        element.removeEventListener('shown.bs.collapse', onShown);
    });

    element.addEventListener('hidden.bs.collapse', function() {
        button.classList.remove('fa-chevron-up');
        button.classList.add('fa-chevron-down');
    });
}

function toggleBuildPackages(buildIndex) {
    const section = document.getElementById(`build-${buildIndex}-packages-section`);
    const button = document.getElementById(`build-${buildIndex}-packages-btn`);
    if (!section) return;

    const icon = button ? button.querySelector('i') : null;
    const collapse = bootstrap.Collapse.getOrCreateInstance(section, { toggle: false });

    if (section.classList.contains('show')) {
        collapse.hide();
        if (icon) {
            icon.classList.remove('fa-chevron-up');
            icon.classList.add('fa-chevron-down');
        }
        return;
    }

    collapse.show();
    if (icon) {
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-up');
    }

    // Lazy load the package list on first expand
    return initializeBuildPackages(buildIndex);
}

// Pagination state for each build
const buildPaginationState = {};
const PACKAGES_PER_PAGE = 100;

async function initializeBuildPackages(buildIndex) {
    // Check if already loaded
    if (buildPaginationState[buildIndex]) {
        renderBuildPackages(buildIndex);
        return;
    }

    const metadataElement = document.getElementById(`build-${buildIndex}-metadata`);
    if (!metadataElement) {
        console.error(`No metadata found for build ${buildIndex}`);
        return;
    }

    const metadata = JSON.parse(metadataElement.textContent);
    const tbody = document.getElementById(`build-${buildIndex}-packages-tbody`);
    const totalElement = document.getElementById(`build-${buildIndex}-total`);

    // Show loading indicator with package count
    const packageCount = metadata.package_count || 0;
    const loadingMsg = packageCount > 10000
        ? `Loading ${packageCount.toLocaleString()} packages... (this may take a moment)`
        : `Loading ${packageCount.toLocaleString()} packages...`;

    tbody.innerHTML = `<tr><td colspan="5" class="text-center"><i class="fas fa-spinner fa-spin"></i> ${loadingMsg}</td></tr>`;
    if (totalElement) {
        totalElement.textContent = '...';
    }

    try {
        const startTime = performance.now();

        // Fetch only first page of packages from API (100 packages)
        const url = `/api/products/build-packages?full_name=${encodeURIComponent(metadata.full_name)}&limit=100&offset=0`;

        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        const data = await response.json();
        const packages = data.packages || [];
        const totalCount = data.package_count || 0;

        const fetchTime = ((performance.now() - startTime) / 1000).toFixed(1);
        console.log(`[Packages] Loaded page 1 (${packages.length} of ${totalCount}) in ${fetchTime}s`);

        // Initialize state with server-side pagination
        buildPaginationState[buildIndex] = {
            allPackages: [], // Not used with server-side pagination
            filteredPackages: packages,
            currentPage: 1,
            totalCount: totalCount,
            filter: '',
            metadata: metadata,
            serverSidePagination: true
        };

        renderBuildPackages(buildIndex);
    } catch (error) {
        console.error(`Error loading packages for build ${buildIndex}:`, error);
        tbody.innerHTML = `<tr><td colspan="5" class="text-center text-danger"><i class="fas fa-exclamation-triangle"></i> Error loading packages: ${escapeHtml(error.message)}</td></tr>`;
        if (totalElement) {
            totalElement.textContent = '0';
        }
    }
}

function renderBuildPackages(buildIndex) {
    const state = buildPaginationState[buildIndex];
    if (!state) return;

    const tbody = document.getElementById(`build-${buildIndex}-packages-tbody`);
    const pageInfo = document.getElementById(`build-${buildIndex}-page-info`);
    const prevButton = document.getElementById(`build-${buildIndex}-prev`);
    const nextButton = document.getElementById(`build-${buildIndex}-next`);
    const totalElement = document.getElementById(`build-${buildIndex}-total`);

    let totalPackages, totalPages, startIndex, endIndex, packagesToShow;

    if (state.serverSidePagination) {
        // Server-side pagination
        totalPackages = state.totalCount;
        totalPages = Math.ceil(totalPackages / PACKAGES_PER_PAGE);
        startIndex = (state.currentPage - 1) * PACKAGES_PER_PAGE;
        endIndex = Math.min(startIndex + state.filteredPackages.length, totalPackages);
        packagesToShow = state.filteredPackages; // Already the right page from server
    } else {
        // Client-side pagination (old behavior for compatibility)
        totalPackages = state.filteredPackages.length;
        totalPages = Math.ceil(totalPackages / PACKAGES_PER_PAGE);
        startIndex = (state.currentPage - 1) * PACKAGES_PER_PAGE;
        endIndex = Math.min(startIndex + PACKAGES_PER_PAGE, totalPackages);
        packagesToShow = state.filteredPackages.slice(startIndex, endIndex);
    }

    // Update total count
    if (totalElement) {
        totalElement.textContent = totalPackages;
    }

    // Render packages
    let html = '';
    packagesToShow.forEach(pkg => {
        html += '<tr>';
        html += `<td><code>${escapeHtml(pkg.package_name || '')}</code></td>`;
        html += '<td>';
        if (pkg.arch) {
            html += `<code class="small">${escapeHtml(pkg.arch)}</code>`;
        } else {
            html += '<span class="text-muted">-</span>';
        }
        html += '</td>';
        html += '<td>';
        if (pkg.filename) {
            html += `<small class="text-muted">${escapeHtml(pkg.filename)}</small>`;
        } else {
            html += '<span class="text-muted">-</span>';
        }
        html += '</td>';
        html += '<td>';
        if (pkg.vcs_url) {
            html += '<div>';
            // Repository name links to internal /packages/ URL
            const repoName = pkg.vcs_url.split('/').pop();
            const internalUrl = `/packages/${encodeURIComponent(repoName)}${pkg.vcs_org ? `?org=${encodeURIComponent(pkg.vcs_org)}` : ''}`;
            html += `<a href="${internalUrl}" class="text-decoration-none small">`;
            html += `<i class="fas fa-code-branch"></i> ${escapeHtml(repoName)}`;
            html += '</a>';
            if (pkg.tracking_branch) {
                html += `<br><small class="text-muted">Branch: <a href="${escapeHtml(mapHostname(pkg.vcs_url))}/src/branch/${escapeHtml(pkg.tracking_branch)}" target="_blank" class="text-decoration-none"><code>${escapeHtml(pkg.tracking_branch)}</code></a></small>`;
            }
            if (pkg.commit_hash) {
                html += `<br><small class="text-muted">Commit: <a href="${escapeHtml(mapHostname(pkg.vcs_url))}/commit/${escapeHtml(pkg.commit_hash)}" target="_blank" class="text-decoration-none" title="${escapeHtml(pkg.commit_hash)}"><code>${escapeHtml(pkg.commit_hash.substring(0, 8))}...</code></a></small>`;
            }
            html += '</div>';
        } else {
            html += '<span class="text-muted">-</span>';
        }
        html += '</td>';
        html += '<td>';
        if (pkg.disturl) {
            html += `<span class="disturl-link" data-disturl="${escapeHtml(pkg.disturl)}" data-vcs-org="${escapeHtml(pkg.vcs_org || '')}"></span>`;
        } else {
            html += '<span class="text-muted">-</span>';
        }
        html += '</td>';
        html += '</tr>';
    });
    tbody.innerHTML = html;

    // Process disturl links
    tbody.querySelectorAll('.disturl-link').forEach(element => {
        const disturl = element.getAttribute('data-disturl');
        const vcsOrg = element.getAttribute('data-vcs-org');
        if (disturl) {
            element.innerHTML = formatDisturl(disturl, vcsOrg);
        }
    });

    // Update pagination info
    if (totalPackages > 0) {
        pageInfo.textContent = `Page ${state.currentPage} of ${totalPages} (showing ${startIndex + 1}-${endIndex} of ${totalPackages})`;
    } else {
        pageInfo.textContent = 'No packages found';
    }

    // Update button states
    prevButton.disabled = state.currentPage === 1;
    nextButton.disabled = state.currentPage >= totalPages || totalPackages === 0;
}

async function changeBuildPage(buildIndex, delta) {
    const state = buildPaginationState[buildIndex];
    if (!state) return;

    const totalPages = Math.ceil((state.serverSidePagination ? state.totalCount : state.filteredPackages.length) / PACKAGES_PER_PAGE);
    const newPage = state.currentPage + delta;

    if (newPage >= 1 && newPage <= totalPages) {
        state.currentPage = newPage;

        // If using server-side pagination, fetch new page from server
        if (state.serverSidePagination) {
            const tbody = document.getElementById(`build-${buildIndex}-packages-tbody`);
            tbody.innerHTML = '<tr><td colspan="5" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading page...</td></tr>';

            try {
                const offset = (newPage - 1) * PACKAGES_PER_PAGE;
                let url = `/api/products/build-packages?full_name=${encodeURIComponent(state.metadata.full_name)}&limit=${PACKAGES_PER_PAGE}&offset=${offset}`;

                if (state.filter) {
                    url += `&search=${encodeURIComponent(state.filter)}`;
                }

                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}`);
                }

                const data = await response.json();
                state.filteredPackages = data.packages || [];
                renderBuildPackages(buildIndex);
            } catch (error) {
                console.error(`Error loading page ${newPage}:`, error);
                tbody.innerHTML = `<tr><td colspan="5" class="text-center text-danger">Error loading page: ${error.message}</td></tr>`;
            }
        } else {
            // Client-side pagination
            renderBuildPackages(buildIndex);
        }
    }
}

async function filterBuildPackages(buildIndex, searchText) {
    const state = buildPaginationState[buildIndex];
    if (!state) return;

    const filter = searchText.trim();
    state.filter = filter;
    state.currentPage = 1; // Reset to first page

    if (state.serverSidePagination) {
        // Server-side search
        const tbody = document.getElementById(`build-${buildIndex}-packages-tbody`);
        tbody.innerHTML = '<tr><td colspan="5" class="text-center"><i class="fas fa-spinner fa-spin"></i> Searching...</td></tr>';

        try {
            let url = `/api/products/build-packages?full_name=${encodeURIComponent(state.metadata.full_name)}&limit=${PACKAGES_PER_PAGE}&offset=0`;

            if (filter) {
                url += `&search=${encodeURIComponent(filter)}`;
            }

            const response = await fetch(url);
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }

            const data = await response.json();
            state.filteredPackages = data.packages || [];
            state.totalCount = data.package_count || 0;
            renderBuildPackages(buildIndex);
        } catch (error) {
            console.error(`Error searching packages:`, error);
            tbody.innerHTML = `<tr><td colspan="5" class="text-center text-danger">Error searching: ${error.message}</td></tr>`;
        }
    } else {
        // Client-side search (old behavior)
        const filterLower = filter.toLowerCase();
        if (filter === '') {
            state.filteredPackages = state.allPackages;
        } else {
            state.filteredPackages = state.allPackages.filter(pkg => {
                const searchableText = `${pkg.package_name || ''} ${pkg.filename || ''} ${pkg.arch || ''}`.toLowerCase();
                return searchableText.indexOf(filterLower) !== -1;
            });
        }
        renderBuildPackages(buildIndex);
    }
}

// Process disturl links on page load
document.addEventListener('DOMContentLoaded', function() {
    const disturlElements = document.querySelectorAll('.disturl-link');
    disturlElements.forEach(element => {
        const disturl = element.getAttribute('data-disturl');
        if (disturl) {
            element.innerHTML = formatDisturl(disturl);
        }
    });

    // Turn the product-level VCS references into repository/branch/commit links
    document.querySelectorAll('.product-vcs-link').forEach(element => {
        const vcsRef = element.getAttribute('data-vcs');
        if (vcsRef) {
            element.innerHTML = formatProductVcs(vcsRef);
        }
    });

    // The newest version of each product is expanded server-side, so it never
    // fires shown.bs.collapse - seed its sort state like toggleProductGroup does
    document.querySelectorAll('.product-group-details.show').forEach(element => {
        const groupIndex = element.id.replace('group-', '');
        if (!groupSortState[groupIndex]) {
            groupSortState[groupIndex] = { field: 'full_name', ascending: true };
            const nameIcon = document.getElementById(`group-${groupIndex}-sort-full_name`);
            if (nameIcon) {
                nameIcon.className = 'fas fa-sort-up';
            }
        }
    });

    // Packages are now loaded lazily when user clicks Details button
    // No need to initialize on page load

    // Hide loading overlay and show search interface
    const loadingOverlay = document.getElementById('searchLoadingOverlay');
    const searchInterface = document.getElementById('searchInterface');

    if (loadingOverlay) {
        loadingOverlay.style.display = 'none';
    }
    if (searchInterface) {
        searchInterface.style.display = 'block';
    }

    // Enable search fields after initialization is complete
    const binarySearchInput = document.getElementById('binarySearch');
    const fileSearchInput = document.getElementById('fileSearch');
    const vcsSearchInput = document.getElementById('vcsSearch');

    if (binarySearchInput) {
        binarySearchInput.disabled = false;
        binarySearchInput.placeholder = 'Search binary packages (press Enter)...';
    }
    if (fileSearchInput) {
        fileSearchInput.disabled = false;
        fileSearchInput.placeholder = 'Search files (press Enter)...';
    }
    if (vcsSearchInput) {
        vcsSearchInput.disabled = false;
        vcsSearchInput.placeholder = 'e.g., pool/glibc@slfo-1.2 or commit hash (press Enter)...';
    }

    // Enable clear buttons
    const clearButtons = document.querySelectorAll('#binarySearch ~ button, #fileSearch ~ button, #vcsSearch ~ button');
    clearButtons.forEach(btn => btn.disabled = false);

    // Check URL parameters for auto-search (tab was already switched in immediate script)
    const urlParams = new URLSearchParams(window.location.search);
    const vcsSearchParam = urlParams.get('vcs_search');

    if (vcsSearchParam) {
        // Value was already set in immediate script, just trigger search
        setTimeout(() => searchVCS(), 100);
    }
});
</script>
{% endblock %}