{% if updates %}
<div class="toolbar" style="margin-top: 0;">
    <span id="pkg-count" style="color: var(--text-muted); font-size: 0.9em;">{{ total }} / {{ total }}</span>

    <div class="filter-group">
        <label><input type="checkbox" id="hide-trivial" onchange="applyFilters()">
            Hide trivial <span style="color: var(--text-muted);">[{{ trivial_count }}]</span></label>
    </div>
    <div class="filter-group">
        <label><input type="checkbox" id="hide-patch" onchange="applyFilters()">
            Hide patch <span style="color: var(--text-muted);">[{{ patch_count }}]</span></label>
    </div>

    {% for cat in ["graphics", "kernel", "system", "mesa", "xorg"] %}
    {% if cat_counts[cat] > 0 %}
    <div class="filter-group">
        <label><input type="checkbox" id="hl-{{ cat }}" onchange="applyFilters()">
            <span class="cat-badge cat-{{ cat }}">{{ cat }}</span>
            <span style="color: var(--text-muted);">[{{ cat_counts[cat] }}]</span></label>
    </div>
    {% endif %}
    {% endfor %}

    {% if cve_count is defined and cve_count > 0 %}
    <span class="security-badge security-high summary-filter{% if active_filter == 'cve' %} active{% endif %}"
          style="margin-left: auto; cursor: pointer;"
          onclick="toggleSummaryFilter('cve')" title="Show only packages with CVEs">
        CVE {{ cve_count }} package{{ "s" if cve_count != 1 else "" }}
    </span>
    {% endif %}

    {% if flagged_count is defined and flagged_count > 0 %}
    <span class="flagged-badge summary-filter{% if active_filter == 'flagged' %} active{% endif %}"
          style="cursor: pointer;"
          onclick="toggleSummaryFilter('flagged')" title="Show only flagged packages">
        {{ flagged_count }} flagged
    </span>
    {% endif %}

    {% if news_count is defined and news_count > 0 %}
    <span class="news-filter-badge summary-filter{% if active_filter == 'news' %} active{% endif %}"
          style="cursor: pointer;"
          onclick="toggleSummaryFilter('news')" title="Show only packages mentioned in news">
        {{ news_count }} in news
    </span>
    {% endif %}
</div>

<table class="preview-table">
<thead>
<tr>
    <th style="width: 15%;">Package</th>
    <th style="width: 25%;">Description</th>
    <th style="width: 18%;">Risk</th>
    <th style="width: 22%;">Version</th>
    <th style="width: 20%;">Age</th>
</tr>
</thead>
<tbody id="preview-tbody">
{% for pkg in updates %}
{% set risk_label = "critical" if pkg.risk_score >= 60 else ("high" if pkg.risk_score >= 40 else ("medium" if pkg.risk_score >= 20 else "low")) %}
<tr class="upgrade-row{% if pkg.in_news %} highlight-news{% endif %}"
    data-trivial="{{ 'true' if pkg.is_trivial else 'false' }}"
    data-patch="{{ 'true' if pkg.is_patch else 'false' }}"
    data-category="{{ pkg.category or '' }}"
    data-cve="{{ 'true' if pkg.security_severity else 'false' }}"
    data-flagged="{{ 'true' if pkg.is_flagged else 'false' }}"
    data-news="{{ 'true' if pkg.in_news else 'false' }}"
    data-risk="{{ risk_label }}">
    <td>
        <a href="https://archlinux.org/packages/?q={{ pkg.package_name }}" target="_blank"
           style="font-weight: bold;">{{ pkg.package_name }}</a>
        {% if pkg.in_news %}
            <br><span class="news-warning">IN NEWS</span>
        {% endif %}
        {% if pkg.url %}
            <br><span class="changelog-btn" onclick="toggleChangelog({{ loop.index }})">Package Info</span>
        {% endif %}
        {% if pkg.category %}
            <br>
            {% for cat in pkg.category.split() %}
                <span class="cat-badge cat-{{ cat }}">{{ cat }}</span>
            {% endfor %}
        {% endif %}
    </td>
    <td>{{ pkg.description or "N/A" }}</td>
    <td>
        <span class="risk-badge risk-{{ risk_label }}">{{ pkg.risk_score }}</span>
        {% if pkg.security_severity %}
            <a href="/security?q={{ pkg.package_name }}" class="security-badge security-{{ pkg.security_severity | lower }}"
               title="Active vulnerability — {{ pkg.security_severity }} severity advisory — view on Security page"
               >{{ pkg.security_severity }} CVE</a>
        {% endif %}
        {% if pkg.is_flagged %}
            <span class="flagged-badge"
                  title="Upstream has released a newer version — this package is out of date in the Arch repos"
                  >Outdated upstream</span>
        {% endif %}
    </td>
    <td>
        <span class="old">{{ pkg.old_version }}</span>
        <br>
        <span class="new">{{ pkg.new_version }}</span>
    </td>
    <td>
        {% if pkg.old_date %}<span class="version-date old" title="When this version was compiled by the packager">built {{ pkg.old_date }}</span>{% endif %}
        <br>
        {% if pkg.new_date %}<span class="version-date new" title="When you installed or last upgraded this package">since {{ pkg.new_date }}</span>{% endif %}
    </td>
</tr>
{% if pkg.url %}
<tr class="changelog-row" id="changelog-{{ loop.index }}">
    <td colspan="5">
        <div class="changelog-content">
            <strong>Upstream:</strong>
            <a href="{{ pkg.url }}" target="_blank">{{ pkg.url }}</a>
            {% if pkg.risk_flags %}
                <br><strong>Risk flags:</strong> {{ pkg.risk_flags }}
            {% endif %}
        </div>
    </td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
{% else %}
<div class="empty-state">
    <h3>No pending updates</h3>
    <p>Your system is up to date. Click Refresh to check again.</p>
</div>
{% endif %}