{% extends "base.html" %}

{% block title %}{% if active_format %}{{ active_format }} SBOMs for PyPI Packages{% else %}PyPI Packages with SBOMs{% endif %} — pypi-tea{% endblock %}

{% block meta %}
  <meta name="description" content="Browse {% if active_format %}{{ active_format }} {% endif %}SBOMs for Python packages on PyPI. {{ total }} packages with Software Bill of Materials available for download.">
  <meta name="keywords" content="SBOM, PyPI, CycloneDX, SPDX, Software Bill of Materials, Python, supply chain security{% if active_format %}, {{ active_format }}{% endif %}">
  <link rel="canonical" href="{{ canonical_url }}">

  <!-- Open Graph -->
  <meta property="og:title" content="{% if active_format %}{{ active_format }} SBOMs{% else %}PyPI Packages with SBOMs{% endif %} — pypi-tea">
  <meta property="og:description" content="Browse {% if active_format %}{{ active_format }} {% endif %}SBOMs for {{ total }} Python packages on PyPI.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{ canonical_url }}">
  <meta property="og:site_name" content="pypi-tea">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="{% if active_format %}{{ active_format }} SBOMs{% else %}PyPI Packages with SBOMs{% endif %}">
  <meta name="twitter:description" content="Browse {% if active_format %}{{ active_format }} {% endif %}SBOMs for {{ total }} Python packages on PyPI.">
{% endblock %}

{% block content %}
  <div class="wrap">
    <header class="page-head">
      <span class="eyebrow-chip">PyPI packages</span>
      <h1>{% if active_format %}{{ active_format }} SBOMs{% else %}Packages with SBOMs{% endif %}</h1>
      <p class="lede">{{ "{:,}".format(total) }} package{{ 's' if total != 1 else '' }} found</p>
    </header>

    <nav class="segmented toolbar" aria-label="Filter by SBOM format">
      <a href="/packages" data-ph-event="package_list_filtered" data-ph-filter-format="all"{% if not active_format %} aria-current="page"{% endif %}>All</a>
      <a href="/packages?format=CycloneDX" data-ph-event="package_list_filtered" data-ph-filter-format="CycloneDX"{% if active_format == 'CycloneDX' %} aria-current="page"{% endif %}>CycloneDX</a>
      <a href="/packages?format=SPDX" data-ph-event="package_list_filtered" data-ph-filter-format="SPDX"{% if active_format == 'SPDX' %} aria-current="page"{% endif %}>SPDX</a>
    </nav>

    {% if packages %}
    <div class="card">
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th scope="col">Package</th>
              <th scope="col">Version</th>
              <th scope="col">SBOM formats</th>
              <th scope="col"><span class="visually-hidden">Link</span></th>
            </tr>
          </thead>
          <tbody>
            {% for pkg in packages %}
            <tr>
              <td><a href="/package/{{ pkg.name }}/{{ pkg.version }}" class="pkg-link" data-ph-event="package_clicked" data-ph-source="package_list" data-ph-target-package="{{ pkg.name }}" data-ph-target-version="{{ pkg.version }}">{{ pkg.name }}</a></td>
              <td class="mono muted">{{ pkg.version }}</td>
              <td>
                <div class="tags">
                  {% for fmt in pkg.formats %}<span class="tag">{{ fmt }}</span>{% endfor %}
                </div>
              </td>
              <td class="num"><a href="/package/{{ pkg.name }}/{{ pkg.version }}" class="row-link" data-ph-event="package_clicked" data-ph-source="package_list" data-ph-target-package="{{ pkg.name }}" data-ph-target-version="{{ pkg.version }}">View SBOM &rarr;</a></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    {% if total_pages > 1 %}
    <nav class="pagination" aria-label="Pagination">
      {% if page > 1 %}
      <a href="/packages?page={{ page - 1 }}{% if active_format %}&format={{ active_format }}{% endif %}" class="btn btn-secondary" rel="prev" data-ph-event="package_list_paginated" data-ph-direction="previous">&larr; Previous</a>
      {% endif %}
      <span>Page {{ page }} of {{ total_pages }}</span>
      {% if page < total_pages %}
      <a href="/packages?page={{ page + 1 }}{% if active_format %}&format={{ active_format }}{% endif %}" class="btn btn-secondary" rel="next" data-ph-event="package_list_paginated" data-ph-direction="next">Next &rarr;</a>
      {% endif %}
    </nav>
    {% endif %}

    {% else %}
    <div class="card notice notice-sm">
      <h2>No packages found{% if active_format %} with {{ active_format }} SBOMs{% endif %}.</h2>
      <p>Packages appear here once they've been queried through the TEA API.</p>
    </div>
    {% endif %}
  </div>
{% endblock %}