{% 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 %}
  <section>
    <header class="mb-8">
      <h1 class="text-3xl font-bold">{% if active_format %}{{ active_format }} SBOMs{% else %}Packages with SBOMs{% endif %}</h1>
      <p class="text-gray-400 mt-2">{{ total }} package{{ 's' if total != 1 else '' }} found</p>
    </header>

    <!-- Format filter -->
    <nav class="flex gap-2 mb-8" aria-label="Filter by SBOM format">
      <a href="/packages"
         class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {% if not active_format %}bg-cyan-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700{% endif %}">
        All
      </a>
      <a href="/packages?format=CycloneDX"
         class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {% if active_format == 'CycloneDX' %}bg-cyan-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700{% endif %}">
        CycloneDX
      </a>
      <a href="/packages?format=SPDX"
         class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {% if active_format == 'SPDX' %}bg-purple-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700{% endif %}">
        SPDX
      </a>
    </nav>

    {% if packages %}
    <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
      <table class="w-full text-sm">
        <thead>
          <tr class="border-b border-gray-800 text-left text-xs text-gray-500 uppercase tracking-wide">
            <th class="px-6 py-3">Package</th>
            <th class="px-6 py-3">Version</th>
            <th class="px-6 py-3">SBOM Formats</th>
            <th class="px-6 py-3"></th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-800">
          {% for pkg in packages %}
          <tr class="hover:bg-gray-800/50 transition-colors">
            <td class="px-6 py-4 font-medium">
              <a href="/package/{{ pkg.name }}/{{ pkg.version }}" class="text-cyan-400 hover:text-cyan-300">{{ pkg.name }}</a>
            </td>
            <td class="px-6 py-4 text-gray-400">{{ pkg.version }}</td>
            <td class="px-6 py-4">
              <div class="flex flex-wrap gap-1">
                {% for fmt in pkg.formats %}
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {% if 'CycloneDX' in fmt %}bg-cyan-900/50 text-cyan-300{% elif 'SPDX' in fmt %}bg-purple-900/50 text-purple-300{% else %}bg-gray-800 text-gray-300{% endif %}">{{ fmt }}</span>
                {% endfor %}
              </div>
            </td>
            <td class="px-6 py-4 text-right">
              <a href="/package/{{ pkg.name }}/{{ pkg.version }}" class="text-gray-500 hover:text-white text-xs">View SBOM &rarr;</a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    {% if total_pages > 1 %}
    <nav class="mt-6 flex items-center justify-center gap-2" aria-label="Pagination">
      {% if page > 1 %}
      <a href="/packages?page={{ page - 1 }}{% if active_format %}&format={{ active_format }}{% endif %}"
         class="px-4 py-2 rounded-lg bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700 text-sm transition-colors">
        &larr; Previous
      </a>
      {% endif %}
      <span class="px-4 py-2 text-sm text-gray-500">
        Page {{ page }} of {{ total_pages }}
      </span>
      {% if page < total_pages %}
      <a href="/packages?page={{ page + 1 }}{% if active_format %}&format={{ active_format }}{% endif %}"
         class="px-4 py-2 rounded-lg bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700 text-sm transition-colors">
        Next &rarr;
      </a>
      {% endif %}
    </nav>
    {% endif %}

    {% else %}
    <div class="text-center py-16 text-gray-500">
      <p class="text-lg">No packages found{% if active_format %} with {{ active_format }} SBOMs{% endif %}.</p>
      <p class="mt-2 text-sm">Packages appear here once they've been queried through the TEA API.</p>
    </div>
    {% endif %}
  </section>
{% endblock %}