{% extends "base.html" %}

{#
  Supply chain audit indicators.

  Flags render green (pass), red (fail) or neutral grey (not audited yet).
  Registration has a fourth state, 2, which renders yellow: the chain does carry
  a registration, but its *source* reference - the git commit, not the rpm-md
  binary checksum the build is keyed on - is too weak to verify against. The
  binary checksum cannot be the weak one: it is the lookup key, so a build
  either has a full digest or was never polled at all. 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.
#}

{#
  Severity vocabulary of the security_issues column, worst first.

  Two of them, because the column has two producers. The chain monitor writes
  what the contract's SecurityLevel flag says (low, moderate, important,
  critical), and the import API lets a caller push the older low/medium/high/
  critical wording. Both are listed so neither is dropped on the floor: a
  severity this list does not name used to render as green "none known", which
  states the opposite of the truth.

  Anything still unrecognized is shown too, in a neutral badge, and ranked
  ahead of everything we can rank: an unplaceable severity might be the worst
  one there is, and the badge is a warning rather than a score, so the safe
  reading is the loud one. See SEVERITY_ORDER in the JS below, which has to
  stay in step with this list.
#}
{% set severity_levels = ['critical', 'important', 'high', 'moderate', 'medium', 'low'] %}
{% macro audit_flag(state, icon, label, ok_text, fail_text, pending_text='not audited yet', warning_text='weak source reference') -%}
    {%- if state is none -%}
    <i class="fas {{ icon }} audit-icon text-secondary opacity-50" title="{{ label }}: {{ pending_text }}"></i>
    {%- elif state == 2 -%}
    <i class="fas {{ icon }} audit-icon text-warning" title="{{ label }}: {{ warning_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 %}

{#
  The severity is the whole answer, so nothing here counts anything.

  A build has exactly one security level: the contract derives it from the
  nearest report at or after that build, get_product_build() returns the one
  number, and security_issues_for() mirrors it as {level: 1}. The column is a
  dict only because it predates the chain being its only writer; the values are
  carried but never shown, because "1 low (1 total)" was arithmetic about a
  number that cannot vary. A level is present when its value is truthy, which is
  what keeps a stored zero from reading as a report.
#}
{% 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 -%}
        {#- Unrankable severities first, then the known ones worst first, so the
            first hit is always the one to put on the badge -#}
        {%- set ordered = (issues | reject('in', severity_levels) | sort | list) + severity_levels -%}
        {%- set ns = namespace(present=[]) -%}
        {%- for level in ordered -%}
            {%- if issues.get(level) -%}
                {%- set ns.present = ns.present + [level] -%}
            {%- endif -%}
        {%- endfor -%}
        {%- if not ns.present -%}
        <i class="fas fa-shield audit-icon text-success" title="Known Security Issues: none known"></i>
        {%- else -%}
        {#- The badge names the worst severity; the title names all of them -#}
        <span class="badge audit-severity severity-{{ ns.present[0] if ns.present[0] in severity_levels else 'unranked' }}"
              title="Known Security Issues: {{ ns.present | join(', ') }}">
            <i class="fas fa-shield"></i> {{ ns.present[0] }}
        </span>
        {%- endif -%}
    {%- endif -%}
{%- endmacro %}

{% macro audit_flag_detail(state, icon, ok_text, fail_text, pending_text='Not audited yet', warning_text='Weak source reference') -%}
    {%- if state is none -%}
    <i class="fas {{ icon }} text-secondary opacity-50"></i> <span class="text-muted">{{ pending_text }}</span>
    {%- elif state == 2 -%}
    <i class="fas {{ icon }} text-warning"></i> {{ warning_text }}
    {%- 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 (issues | reject('in', severity_levels) | sort | list) + severity_levels -%}
            {%- if issues.get(level) -%}
                {%- set ns.any = true -%}
                <span class="badge audit-severity severity-{{ level if level in severity_levels else 'unranked' }} me-1">{{ level }}</span>
            {%- endif -%}
        {%- endfor -%}
        {%- if not ns.any -%}
        <i class="fas fa-shield text-success"></i> None known
        {%- endif -%}
    {%- endif -%}
{%- endmacro %}

{#
  The 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).
#}
{#
  Shown in place of nothing when the monitor has stopped because it cannot read
  the contract. The flags below are not cleared - they were true when they were
  written - so this is the only thing on the page that says how old they are.
#}
{% macro contract_incompatible_notice(status, compact=false) -%}
<div class="alert alert-danger {{ 'py-2 px-3 mb-2 small' if compact else 'mb-3' }}" role="alert">
    <i class="fas fa-triangle-exclamation"></i>
    <strong>Supply chain audit stopped:</strong>
    the registry contract speaks interface level {{ status.contract_level }}, this
    version of OBS Git Explorer speaks level {{ status.monitor_level }}.
    {%- if status.remedy %} To fix: {{ status.remedy }}.{% endif %}
    <div class="{{ 'mt-1' if compact else 'mt-2' }} {{ '' if compact else 'small' }}">
        The audit flags shown are the last ones read before the mismatch and are
        <strong>no longer being checked</strong>. They are left alone rather than
        cleared, because they were true when they were recorded — but treat them as
        out of date until this is resolved.
    </div>
</div>
{%- endmacro %}

{#
  data-audit-box-for is how the live refresh finds this box again after the
  page has been served: the chain monitor rewrites these flags out of band,
  seconds to minutes later, and without it the only way to see the new state
  is a reload. See refreshAuditState() in the JS at the bottom.
#}
{% macro supply_chain_audit_box(build, chain_network=None) -%}
<div class="card supply-chain-box mt-3" data-audit-box-for="{{ build.full_name }}">
    <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>
        {%- if chain_network and chain_network.contract_status %}
        {{ contract_incompatible_notice(chain_network.contract_status, compact=true) }}
        {%- endif %}
        <dl class="row mb-0 small">
            {#
              Registration is the gate: the other three lines are all recorded
              against a registered build, so before registration they can only
              say "not audited yet" and are noise. State none is "not registered
              yet"; a false or weak (2) registration is still a registration, so
              those keep the full box.

              State 2 is only ever about the source reference. The binary
              checksum is the key the build was looked up under, so it is a full
              rpm-md digest by construction and cannot be the weak one - saying
              just "weak checksum" left the reader to guess which of the two.
            #}
            {%- set registered = build.registered_product is not none %}
            <dt class="col-sm-4">Registered Product Build</dt>
            <dd class="col-sm-8 {{ 'mb-1' if registered else 'mb-0' }}">{{ audit_flag_detail(build.registered_product, 'fa-clipboard-check', 'Registered', 'Invalid registration', 'Not registered yet', 'Registered, weak source reference') }}</dd>
            {%- if registered %}

            <dt class="col-sm-4">Recency</dt>
            <dd class="col-sm-8 mb-1">{{ audit_flag_detail(build.is_current, 'fa-flag', 'yes', 'no', 'Not audited yet') }}</dd>

            <dt class="col-sm-4">Build Reproduced</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-1">{{ security_issues_detail(build.security_issues) }}</dd>

            {#
              When the contract was last written to about this build, taken
              from the block its most recent event was in - nothing the
              contract stores carries a timestamp, so there is no other
              source. Distinct from the flags above in that it is a fact about
              the chain rather than a judgement about the build, hence the
              muted rendering.

              Unset means "no write seen", never "never written": the log feed
              only dates what it was watching for, plus whatever the first-run
              backward scan reached, so a build registered long before this
              instance existed can be legitimately blank.
            #}
            <dt class="col-sm-4">Last On-Chain Write</dt>
            <dd class="col-sm-8 mb-0">
                {%- if build.last_chain_write %}
                <i class="fas fa-clock text-secondary"></i>
                <span title="Block time of the most recent event the monitor saw for this build">{{ build.last_chain_write | int | timestamp_to_datetime }}</span>
                {%- else %}
                <i class="fas fa-clock text-secondary opacity-50"></i>
                <span class="text-muted" title="No write to the contract has been seen for this build. The monitor only dates events it was watching for, so a registration from before it started can show nothing here.">Not seen yet</span>
                {%- endif %}
            </dd>
            {%- endif %}
        </dl>
        {#
          Where the three flags above came from. Passed in rather than read from
          the context so the macro keeps working wherever it is called, and only
          present once the optional chain monitor has published its network, so
          a deployment without it looks exactly as before.
        #}
        {%- if chain_network %}
        <div class="supply-chain-source border-top mt-2 pt-2 small text-muted">
            <i class="fab fa-ethereum"></i> {{ chain_network.network | capitalize }}
            {%- if chain_network.chain_id %} <span class="opacity-75">(chain id {{ chain_network.chain_id }})</span>{% endif %} &middot; Contract:
            {% if chain_network.explorer_url -%}
            <a href="{{ chain_network.explorer_url }}" target="_blank" rel="noopener"
               class="text-decoration-none" title="View the registry contract in a block explorer"><code class="text-break">{{ chain_network.contract }}</code></a>
            {%- else -%}
            <code class="text-break">{{ chain_network.contract }}</code>
            {%- endif %}
        </div>
        {%- endif %}
    </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.
       moderate and important are the contract's words for the same two rungs
       the older medium and high name, so they share a colour: the ramp has
       four steps whichever vocabulary the value came from. */
    .severity-low { background-color: #8a6d00; }
    .severity-medium,
    .severity-moderate { background-color: #b35c00; }
    .severity-high,
    .severity-important { background-color: #c0392b; }
    .severity-critical { background-color: #7b1113; }
    /* A severity neither vocabulary names. Grey rather than a ramp colour,
       because placing it on the ramp would be a claim about how bad it is */
    .severity-unranked { background-color: #495057; }
</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 %}

                {#
                  Page level as well as inside each box: the mismatch is about
                  the contract, so it affects every build on the page, and the
                  box is only visible once a product is expanded. Not
                  dismissible - it stays true until someone fixes the
                  deployment.
                #}
                {% if chain_network and chain_network.contract_status %}
                {{ contract_incompatible_notice(chain_network.contract_status) }}
                {% 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" data-audit-icons-for="{{ build.full_name }}">
                                                                    {{ audit_flag(build.registered_product, 'fa-clipboard-check', 'Registered Product Build', 'registered', 'invalid registration', 'not registered yet', 'registered, but the source reference (the git commit) is too weak to verify against - the binary checksum is unaffected') }}
                                                                    {{ audit_flag(build.rebuild_reproducible, 'fa-arrows-rotate', 'Build Reproduced', '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, chain_network) }}

                                                                    <!-- 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>
                    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>
                <p>
                    It is read from a smart contract on an ethereum network, which records each
                    build under its rpm-md repository checksum. That same checksum is taken from
                    the build's SBOM, which is what lets the two be matched up.
                    <em>Recency</em> tells whether this build is the one the chain
                    currently registers for its product and build kind, shown
                    <span class="text-success">green "yes"</span> when it is and
                    <span class="text-danger">red "no"</span> when a newer build has taken
                    its place. It reads the contract's <code>current_product_build()</code>
                    view directly.
                    <em>Build Reproduced</em> reflects the attestation an independent
                    validator recorded after rebuilding the product.
                </p>
                <p class="mb-1">
                    Two different checksums are involved, and only one of them can be weak:
                </p>
                <ul class="small">
                    <li>
                        The <strong>binary checksum</strong> — the rpm-md repository digest of the
                        built repository. It is the key the build is registered and looked up
                        under, taken from the SBOM, so it is a full digest by construction and is
                        either found on the chain or not.
                    </li>
                    <li>
                        The <strong>source reference</strong> — the git commit the product was
                        built from, recorded alongside the registration. This is the one that can
                        be weak, and it is what <em>Registered Product Build</em> reports on.
                    </li>
                </ul>
                <p>
                    <em>Registered Product Build</em> shows:
                    <span class="text-success">green</span> when the registration carries a full
                    SHA-256 source commit that agrees with the SBOM,
                    <span class="text-warning">yellow</span> when it is registered but the
                    <strong>source reference</strong> is too weak to verify against — a SHA-1
                    commit, a branch name, or the digest of the empty string used as a placeholder
                    — which says nothing against the build, only that the source side cannot be
                    checked,
                    <span class="text-danger">red</span> when the source commit on the chain
                    positively contradicts the one in the SBOM, and
                    <span class="text-secondary">grey</span> when not registered yet.
                    It gates the rest of the box: the other three flags are all recorded against a
                    registered build, so until one is registered they are left out rather than
                    shown as three grey "not audited yet" rows.
                </p>
                <p class="mb-1">
                    <em>Highest Known Security Issue</em> is the severity the security team has
                    reported against this build. A report names the build an issue was found in,
                    and the contract carries it backwards over every earlier build of the same
                    product, so a report filed today can change what an older build shows. The
                    contract's four levels, least to most severe:
                </p>
                <ul class="small">
                    <li>
                        <span class="badge audit-severity severity-low">low</span>
                        — minor issues, no workaround needed.
                    </li>
                    <li>
                        <span class="badge audit-severity severity-moderate">moderate</span>
                        — issues with a workaround available.
                    </li>
                    <li>
                        <span class="badge audit-severity severity-important">important</span>
                        — serious issues, update strongly recommended.
                    </li>
                    <li>
                        <span class="badge audit-severity severity-critical">critical</span>
                        — exploitable issues, the build must not be used.
                    </li>
                </ul>
                <p class="small">
                    <span class="text-success"><i class="fas fa-shield"></i> None known</span> means
                    the chain was asked and reported nothing against this build — either no report
                    exists for the product, or every report is about a build registered
                    <em>before</em> this one, and a report never applies forwards.
                    <span class="text-secondary"><i class="fas fa-shield"></i> None known yet</span>
                    in grey is the different, weaker statement that no answer has been recorded.
                    Only one severity is ever shown, because the chain records the highest level in
                    effect rather than a count of issues. A badge in
                    <span class="badge audit-severity severity-unranked">grey</span> is a severity
                    from neither vocabulary this page knows; it is shown rather than hidden,
                    because it might be the worst one there is.
                </p>
                <p>
                    <em>Last On-Chain Write</em> is when the contract was last written to about
                    this build — its registration, its attestation or a security report naming
                    it. Nothing the contract stores carries a timestamp, so this is the time of
                    the block the event was in, which is the chain's own clock rather than this
                    server's.
                    <span class="text-muted">Not seen yet</span> means no such write has been
                    observed, which is <em>not</em> the same as none having happened: events are
                    only dated from the point the monitor started watching, plus a bounded look
                    back over recent history, so a build registered long before that can stay
                    blank while being perfectly well registered.
                </p>
                {%- if chain_network %}
                <p>
                    The network and contract the box footer names are the ones these flags were
                    read from. Following that link shows the same registry in a public block
                    explorer, so the state shown here can be checked against the chain directly.
                </p>
                {%- endif %}
                <p class="text-muted small">
                    A grey marker means no answer has been recorded yet, which is not the same as
                    a negative one: it also covers a build the contract has not been asked about
                    yet, and a network that could not be reached.
                </p>
                <p class="mb-0 text-muted small">
                    The contract publishes the interface level it implements, and this page refuses
                    to read a level it was not built for rather than risk misreading it. When the
                    two disagree the monitor stops and a red warning appears here and on the page:
                    the flags are then frozen at their last known state and nobody is checking them
                    any more.
                </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);

// The chain the supply chain audit flags came from, or null when the optional
// chain monitor has never run. Same value the supply_chain_audit_box() macro
// gets server side, for the Debug/Source rows rendered in the browser.
//
// Mutated, not replaced, by the live refresh below: contract_status can turn
// from null into a warning while the page is open, and the red banner has to
// appear without a reload.
const CHAIN_NETWORK = {{ chain_network | tojson | safe }};

// The stamp of the audit state this page was rendered from. Handed back to
// /api/products/audit-state on every poll, so the unchanged answer costs three
// small reads rather than a scan of every product
let CHAIN_AUDIT_TOKEN = {{ chain_audit_token | tojson | safe }};

// 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 when
    // it is pure hex, otherwise it names a branch. Examples:
    //   https://src.opensuse.org/products/PackageHub#leap-16.0
    //   https://src.opensuse.org/products/SLES?trackingbranch=main#<sha>
    // Returns: { baseUrl, trackingBranch, commitHash, otherRef, repoName }
    //
    // otherRef carries a fragment that is neither a commit nor usable as the
    // branch, because ?trackingbranch= already named one. It exists so that
    // whatever the SBOM put in the fragment always ends up on screen: silently
    // dropping it is what hid the commit of products that carry both.
    if (!vcsRef) return null;

    const hashIndex = vcsRef.indexOf('#');
    const fragment = hashIndex !== -1 ? vcsRef.substring(hashIndex + 1).trim() : 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;
    let otherRef = null;
    if (fragment) {
        // Pure hex of at least git's own minimum abbreviation. Wider than
        // exactly 40 or 64 on purpose: an abbreviated commit is still a commit,
        // and the branch names in use (leap-16.0, slfo-1.1, factory, main) all
        // contain characters that are not hex digits
        if (/^[a-fA-F0-9]{7,64}$/.test(fragment)) {
            commitHash = fragment;
        } else if (!trackingBranch) {
            // Not a digest - the fragment names the branch
            trackingBranch = decodeURIComponent(fragment);
        } else {
            otherRef = 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, otherRef, repoName: null };
    }

    return { baseUrl, trackingBranch, commitHash, otherRef, 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) {
        // Abbreviated only when there is something to abbreviate, so a short
        // ref is not shown with a misleading ellipsis. The title has it in full
        const shortHash = vcs.commitHash.length > 8
            ? `${vcs.commitHash.substring(0, 8)}...`
            : 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(shortHash)}</code></a></small>`;
    } else if (vcs.otherRef) {
        // Neither a commit nor the branch, but it is what the SBOM pinned the
        // product to, so it gets a link rather than disappearing. /src/commit/
        // resolves any ref in Gitea, unlike /commit/
        html += `<br><small class="text-muted">Ref: ` +
                `<a href="${escapeHtml(repoUrl)}/src/commit/${encodeURIComponent(vcs.otherRef)}" target="_blank" class="text-decoration-none">` +
                `<code>${escapeHtml(vcs.otherRef)}</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', warningText = 'Weak source reference') {
    if (state === null || state === undefined) {
        return `<i class="fas ${icon} text-secondary opacity-50"></i> <span class="text-muted">${pendingText}</span>`;
    }
    if (state === 2) {
        return `<i class="fas ${icon} text-warning"></i> ${warningText}`;
    }
    return state
        ? `<i class="fas ${icon} text-success"></i> ${okText}`
        : `<i class="fas ${icon} text-danger"></i> ${failText}`;
}

// Worst severity first. Rendered from the same list the Jinja macros use, so
// the two cannot drift: both vocabularies of the security_issues column are in
// it, see the comment on severity_levels at the top of this template
const SEVERITY_ORDER = {{ severity_levels | tojson }};

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>';
    }
    // Severities the list does not name go first and get a neutral badge: they
    // might be the worst of the lot, and hiding them would read as "none known"
    const unranked = Object.keys(issues).filter(level => !SEVERITY_ORDER.includes(level)).sort();
    const badges = unranked.concat(SEVERITY_ORDER)
        .filter(level => issues[level])
        .map(level => {
            const css = SEVERITY_ORDER.includes(level) ? level : 'unranked';
            return `<span class="badge audit-severity severity-${css} me-1">${escapeHtml(level)}</span>`;
        });
    return badges.length
        ? badges.join('')
        : '<i class="fas fa-shield text-success"></i> None known';
}

// JS counterparts of the audit_flag() / security_issues_icon() macros: the
// compact icon row in the catalogue table, as opposed to the detail lines
// above. Only the live refresh renders these - the Debug/Source rows the JS
// injects have no audit column - but the wording has to stay identical to the
// macros, because the two end up side by side in the same table.
function auditFlagIconHtml(state, icon, label, okText, failText,
                           pendingText = 'not audited yet',
                           warningText = 'weak source reference') {
    const title = (text) => escapeHtml(`${label}: ${text}`);
    if (state === null || state === undefined) {
        return `<i class="fas ${icon} audit-icon text-secondary opacity-50" title="${title(pendingText)}"></i>`;
    }
    if (state === 2) {
        return `<i class="fas ${icon} audit-icon text-warning" title="${title(warningText)}"></i>`;
    }
    return state
        ? `<i class="fas ${icon} audit-icon text-success" title="${title(okText)}"></i>`
        : `<i class="fas ${icon} audit-icon text-danger" title="${title(failText)}"></i>`;
}

function securityIssuesIconHtml(issues) {
    if (issues === null || issues === undefined) {
        return '<i class="fas fa-shield audit-icon text-secondary opacity-50" title="Known Security Issues: none known yet"></i>';
    }
    // Unrankable severities first, then the known ones worst first, so the
    // first hit is always the one to put on the badge - same order as the macro
    const unranked = Object.keys(issues).filter(level => !SEVERITY_ORDER.includes(level)).sort();
    const present = unranked.concat(SEVERITY_ORDER).filter(level => issues[level]);
    if (!present.length) {
        return '<i class="fas fa-shield audit-icon text-success" title="Known Security Issues: none known"></i>';
    }
    const worst = present[0];
    const css = SEVERITY_ORDER.includes(worst) ? worst : 'unranked';
    return `<span class="badge audit-severity severity-${css}" ` +
           `title="${escapeHtml(`Known Security Issues: ${present.join(', ')}`)}">` +
           `<i class="fas fa-shield"></i> ${escapeHtml(worst)}</span>`;
}

// The whole contents of one .audit-icons cell
function auditIconsHtml(build) {
    return [
        auditFlagIconHtml(build.registered_product, 'fa-clipboard-check',
                          'Registered Product Build', 'registered', 'invalid registration',
                          'not registered yet',
                          'registered, but the source reference (the git commit) is too weak ' +
                          'to verify against - the binary checksum is unaffected'),
        auditFlagIconHtml(build.rebuild_reproducible, 'fa-arrows-rotate',
                          'Build Reproduced', 'reproducible', 'not reproducible'),
        securityIssuesIconHtml(build.security_issues),
    ].join('\n');
}

// The chain footer of the audit box. Empty string when no chain monitor has
// published a network, matching the conditional footer in the macro
function chainNetworkFooterHtml() {
    if (!CHAIN_NETWORK || !CHAIN_NETWORK.network) {
        return '';
    }
    const name = CHAIN_NETWORK.network.charAt(0).toUpperCase() + CHAIN_NETWORK.network.slice(1);
    const chainId = CHAIN_NETWORK.chain_id
        ? ` <span class="opacity-75">(chain id ${escapeHtml(String(CHAIN_NETWORK.chain_id))})</span>` : '';
    const contract = `<code class="text-break">${escapeHtml(CHAIN_NETWORK.contract || '')}</code>`;
    const address = CHAIN_NETWORK.explorer_url
        ? `<a href="${escapeHtml(CHAIN_NETWORK.explorer_url)}" target="_blank" rel="noopener" ` +
          `class="text-decoration-none" title="View the registry contract in a block explorer">${contract}</a>`
        : contract;
    return `
                <div class="supply-chain-source border-top mt-2 pt-2 small text-muted">
                    <i class="fab fa-ethereum"></i> ${escapeHtml(name)}${chainId} &middot; Contract: ${address}
                </div>`;
}

// JS counterpart of the contract_incompatible_notice() macro, compact form
function contractIncompatibleNoticeHtml() {
    const status = CHAIN_NETWORK && CHAIN_NETWORK.contract_status;
    if (!status) {
        return '';
    }
    const remedy = status.remedy ? ` To fix: ${escapeHtml(status.remedy)}.` : '';
    return `
                <div class="alert alert-danger py-2 px-3 mb-2 small" role="alert">
                    <i class="fas fa-triangle-exclamation"></i>
                    <strong>Supply chain audit stopped:</strong>
                    the registry contract speaks interface level ${escapeHtml(String(status.contract_level))},
                    this version of OBS Git Explorer speaks level ${escapeHtml(String(status.monitor_level))}.${remedy}
                    <div class="mt-1">
                        The audit flags shown are the last ones read before the mismatch and are
                        <strong>no longer being checked</strong>. They are left alone rather than
                        cleared, because they were true when they were recorded &mdash; but treat them as
                        out of date until this is resolved.
                    </div>
                </div>`;
}

// JS counterpart of the supply_chain_audit_box() macro
// Twin of the "Last On-Chain Write" row in supply_chain_audit_box().
//
// The value is a unix timestamp - the time of the block the build's most
// recent event was in, which is the only date the contract can be pinned to,
// since nothing it stores carries one.
//
// Null is "no write seen", not "never written", and the tooltip has to say so:
// the monitor only dates events it was watching for, so a build registered
// before it started can be blank forever without anything being wrong.
function lastChainWriteHtml(written) {
    if (!written) {
        return '<i class="fas fa-clock text-secondary opacity-50"></i> ' +
               '<span class="text-muted" title="No write to the contract has been seen for this build. ' +
               'The monitor only dates events it was watching for, so a registration from before it ' +
               'started can show nothing here.">Not seen yet</span>';
    }
    const shown = escapeHtml(new Date(written * 1000).toLocaleString());
    return '<i class="fas fa-clock text-secondary"></i> ' +
           `<span title="Block time of the most recent event the monitor saw for this build">${shown}</span>`;
}

function supplyChainAuditBoxHtml(product) {
    // Mirrors supply_chain_audit_box(): the other three lines are recorded
    // against a registered build, so hide them until the build is registered.
    const registered = product.registered_product !== null && product.registered_product !== undefined;
    const auditedRows = !registered ? '' : `
<dt class="col-sm-4">Recency</dt>
                    <dd class="col-sm-8 mb-1">${auditFlagDetailHtml(product.is_current, 'fa-flag', 'yes', 'no', 'Not audited yet')}</dd>

<dt class="col-sm-4">Build Reproduced</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-1">${securityIssuesDetailHtml(product.security_issues)}</dd>

                    <dt class="col-sm-4">Last On-Chain Write</dt>
                    <dd class="col-sm-8 mb-0">${lastChainWriteHtml(product.last_chain_write)}</dd>`;
    return `
        <div class="card supply-chain-box mt-3" data-audit-box-for="${escapeHtml(product.full_name || '')}">
            <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>${contractIncompatibleNoticeHtml()}
                <dl class="row mb-0 small">
                    <dt class="col-sm-4">Registered Product Build</dt>
                    <dd class="col-sm-8 ${registered ? 'mb-1' : 'mb-0'}">${auditFlagDetailHtml(product.registered_product, 'fa-clipboard-check', 'Registered', 'Invalid registration', 'Not registered yet', 'Registered, weak source reference')}</dd>${auditedRows}
                </dl>${chainNetworkFooterHtml()}
            </div>
        </div>
    `;
}

// ---------------------------------------------------------------------------
// Live refresh of the Supply Chain Audit state
//
// The flags are rendered server side and then go stale in place: the chain
// monitor writes them out of band, seconds to minutes after the page was
// served. With the contract now emitting events the monitor can notice a
// registration within seconds, and a page that only updates on reload would
// throw that away.
//
// Only the audit icons and the audit boxes are re-rendered. Nothing else on
// the page can change without the catalogue itself changing, and replacing
// rows would fight with the filters, the expanded details and the scroll
// position.
// ---------------------------------------------------------------------------

// Matched to the monitor's event_interval: polling faster cannot show
// anything newer, it just asks the same question more often
const AUDIT_REFRESH_INTERVAL_MS = 30000;
const AUDIT_REFRESH_MAX_INTERVAL_MS = 300000;

let auditRefreshFailures = 0;
let auditRefreshTimer = null;
// Set when a tick was skipped because the tab was hidden, so it can be made
// up the moment somebody looks at it again
let auditRefreshDeferred = false;

// Re-render one build's icons and box from the state the API just returned.
// Missing elements are normal: the page holds whichever subset of products it
// rendered, and the API always returns all of them.
function applyAuditStateTo(fullName, build) {
    const icons = document.querySelector(`[data-audit-icons-for="${CSS.escape(fullName)}"]`);
    if (icons) {
        icons.innerHTML = auditIconsHtml(build);
    }
    const box = document.querySelector(`[data-audit-box-for="${CSS.escape(fullName)}"]`);
    if (box) {
        box.outerHTML = supplyChainAuditBoxHtml(Object.assign({full_name: fullName}, build));
    }
}

function applyAuditState(data) {
    // The contract status is part of the box, and it is the one thing here
    // that can appear while the monitor is going quiet rather than because it
    // is working, so it has to be in place before anything is re-rendered
    if (CHAIN_NETWORK) {
        CHAIN_NETWORK.contract_status =
            (data.chain_network && data.chain_network.contract_status) || null;
    }
    const builds = data.builds || {};
    Object.keys(builds).forEach(fullName => applyAuditStateTo(fullName, builds[fullName]));

    // The cached Debug/Source rows are re-injected from this copy when the
    // checkbox is toggled, so it has to be updated too or toggling the rows
    // off and on would put the stale flags back
    if (debugSourceProductsCache) {
        debugSourceProductsCache.forEach(group => group.products.forEach(product => {
            const build = builds[product.full_name];
            if (build) {
                Object.assign(product, build);
            }
        }));
    }
}

function refreshAuditState() {
    auditRefreshTimer = null;
    if (document.hidden) {
        // Nobody is looking. Come back when the tab does rather than polling
        // a page in a background tab for the rest of the day
        auditRefreshDeferred = true;
        return;
    }
    fetch(`/api/products/audit-state?token=${encodeURIComponent(CHAIN_AUDIT_TOKEN)}`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            auditRefreshFailures = 0;
            CHAIN_AUDIT_TOKEN = data.token;
            if (data.changed) {
                applyAuditState(data);
            }
        })
        .catch(error => {
            // Backing off rather than giving up: this is a nicety, and the
            // flags on the page are the ones the server last served, not
            // wrong ones. A restarting web app should not be hammered
            auditRefreshFailures += 1;
            console.warn('[auditState] refresh failed, backing off:', error);
        })
        .finally(scheduleAuditRefresh);
}

function scheduleAuditRefresh() {
    if (auditRefreshTimer !== null) {
        return;
    }
    const delay = Math.min(AUDIT_REFRESH_INTERVAL_MS * Math.pow(2, auditRefreshFailures),
                           AUDIT_REFRESH_MAX_INTERVAL_MS);
    auditRefreshTimer = window.setTimeout(refreshAuditState, delay);
}

document.addEventListener('visibilitychange', function() {
    if (!document.hidden && auditRefreshDeferred) {
        // Straight away rather than after another full interval: the tab has
        // been sitting on flags that could be arbitrarily old
        auditRefreshDeferred = false;
        refreshAuditState();
    }
});

// Only worth doing where there is a monitor to hear from. Without one every
// flag on the page is grey and stays grey, and polling would be pure noise -
// a deployment that does not run the optional service behaves exactly as it
// did before
if (CHAIN_NETWORK && CHAIN_NETWORK.network) {
    scheduleAuditRefresh();
}

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 %}