{% extends "pypi_ds/layouts/marketing.html" %}
{% import "pypi_ds/components/data.html" as data %}
{% import "pypi_ds/components/feedback.html" as feedback %}
{% import "pypi_ds/components/layout.html" as layout %}
{% import "pypi_ds/components/navigation.html" as navigation %}
{% import "pypi_ds/components/package.html" as package %}
{% set project = project|default({
  "name": "pypi-ds",
  "version": "0.1.0",
  "released": "May 2026",
  "status_text": "Latest version",
  "status_tone": "good",
  "pip_command": "pip install pypi-ds"
}) %}
{% set release_history_columns = release_history_columns|default([
  {"key": "version", "label": "Version"},
  {"key": "released", "label": "Released"},
  {"key": "notes", "label": "Notes"}
]) %}
{% set release_history_rows = release_history_rows|default([
  {"version": "0.1.0", "released": "May 2026", "notes": "Initial design system extraction"},
  {"version": "0.0.5", "released": "Apr 2026", "notes": "Visual tuning against Warehouse components"},
  {"version": "0.0.1", "released": "Mar 2026", "notes": "Prototype component inventory"}
]) %}
{% set files = files|default([
  {"filename": "pypi_ds-0.1.0-py3-none-any.whl", "meta": "36 kB · Uploaded from CI", "href": "/files/pypi_ds-0.1.0-py3-none-any.whl"},
  {"filename": "pypi_ds-0.1.0.tar.gz", "meta": "24 kB · Source distribution", "href": "/files/pypi_ds-0.1.0.tar.gz"}
]) %}
{% set project_links = project_links|default([
  {"label": "Documentation", "href": "https://example.invalid/docs"},
  {"label": "Source", "href": "https://example.invalid/src"},
  {"label": "Issue tracker", "href": "https://example.invalid/issues"}
]) %}
{% set maintainers = maintainers|default(["PyPI team", "Packaging WG", "Your product team"]) %}
{% block title %}Project detail · PyPI Design System{% endblock %}
{% block content %}
  {{ package.package_header(project) }}
  {% call layout.horizontal_section("horizontal-section--grey horizontal-section--thin") %}
    <div class="package-summary">
      <p class="package-summary__text">
        A reusable Jinja2 component library that keeps the shape, rhythm, and hierarchy of Warehouse while remaining portable to other sites.
      </p>
    </div>
  {% endcall %}
  {% call layout.horizontal_section() %}
    <div class="project-layout">
      <aside class="project-layout__navigation">
        {{ navigation.vertical_tabs([
          {"id": "description", "label": "Project description", "href": "#description"},
          {"id": "history", "label": "Release history", "href": "#history"},
          {"id": "files", "label": "Download files", "href": "#files"}
        ], active_id="description", aria_label="Project navigation") }}
      </aside>
      <div class="project-layout__content">
        {% call layout.card("Project description", "project-panel") %}
          <div id="description">
            <p class="lede-paragraph">
              The extracted components are designed to be imported as Jinja macros and layered into your own layouts, while preserving PyPI's familiar structure and tone.
            </p>
            <p>
              The system includes layout shells, hero sections, search forms, navigation patterns, status messaging, package cards, and project detail presentation built from Warehouse's source templates and Sass blocks.
            </p>
          </div>
        {% endcall %}
        {% call layout.card("Release history", "project-panel") %}
          <div id="history">
            {{ data.data_table("Release history", release_history_columns, release_history_rows, variant="releases") }}
          </div>
        {% endcall %}
        {% call layout.card("Download files", "project-panel") %}
          <div id="files">
            {{ package.file_cards(files) }}
          </div>
        {% endcall %}
      </div>
      <aside class="project-layout__sidebar">
        {% call layout.sidebar_section("Project links") %}
          {{ package.project_links(project_links) }}
        {% endcall %}
        {% call layout.sidebar_section("Maintainers") %}
          <ul class="maintainer-list">
            {% for maintainer in maintainers %}
              <li>{{ maintainer }}</li>
            {% endfor %}
          </ul>
        {% endcall %}
        {% call layout.sidebar_section("Status") %}
          {{ feedback.status_badge("Verified metadata", tone="good") }}
          <p class="sidebar-copy">This section is intentionally generic so it can be reused outside Warehouse.</p>
        {% endcall %}
      </aside>
    </div>
  {% endcall %}
{% endblock %}