{% extends "base.html" %}
{% load static %}

{% block title %}{{ sub_product.name }} — {{ main_product.name }}{% endblock %}
{% block meta_description %}{{ sub_product.short_description }}{% endblock %}

{% block content %}

<section class="page-hero" aria-labelledby="sub-product-heading">
  <div class="page-hero-blobs" aria-hidden="true">
    <div class="blob blob--1"></div>
    <div class="blob blob--2"></div>
  </div>
  <div class="container">
    <nav class="breadcrumb" aria-label="Breadcrumb">
      <ol class="breadcrumb-list" role="list">
        <li><a href="{% url 'pages:home' %}">Home</a></li>
        <li aria-hidden="true" class="breadcrumb-sep">›</li>
        <li><a href="{% url 'products:overview' %}">Products</a></li>
        <li aria-hidden="true" class="breadcrumb-sep">›</li>
        <li><a href="{{ main_product.get_absolute_url }}">{{ main_product.name }}</a></li>
        <li aria-hidden="true" class="breadcrumb-sep">›</li>
        <li aria-current="page">{{ sub_product.name }}</li>
      </ol>
    </nav>
    <div class="page-hero-content">
      <div class="section-badge">{{ main_product.name }}</div>
      <h1 class="page-hero-title" id="sub-product-heading">{{ sub_product.name }}</h1>
      <p class="page-hero-subtitle">{{ sub_product.short_description }}</p>
    </div>
  </div>
</section>

<div class="section sub-product-layout">
  <div class="container">
    <div class="sub-product-grid">

      <main class="sub-product-main">
        {% if sub_product.image %}
        <div class="sub-product-image glass-card fade-in">
          <img src="{{ sub_product.image.url }}" alt="{{ sub_product.name }}" loading="lazy" />
        </div>
        {% endif %}

        <div class="sub-product-desc glass-card fade-in">
          <h2>About {{ sub_product.name }}</h2>
          <div class="rich-content" data-readmore="220">{{ sub_product.rendered_description }}</div>
        </div>

        {% if show_releases_section %}
        {% if distribution_installable %}
        <section class="sub-downloads fade-in" aria-labelledby="sub-dl-heading">
          <h2 class="sub-downloads-title" id="sub-dl-heading">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
            </svg>
            Downloads
          </h2>

          <div class="sub-downloads-channel">
            {% if featured_version.is_featured_stable %}
            <span class="release-channel-label release-channel-label--stable">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
              </svg>
              Stable
            </span>
            {% endif %}
            {% if featured_install_cells %}
            <div class="sub-downloads-grid">
              {% for cell in featured_install_cells %}
              <div class="sub-dl-item">
                <div class="sub-dl-icon-wrap">
                  {% if cell.icon %}
                  <img src="{% static cell.icon %}" alt="" width="32" height="32" class="platform-icon sub-dl-icon" aria-hidden="true" />
                  {% else %}
                  <span class="sub-dl-source-mark" aria-hidden="true">
                    <svg class="sub-dl-source-svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round">
                      <polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
                    </svg>
                  </span>
                  {% endif %}
                </div>
                <span class="sub-dl-platform">{{ cell.label }}</span>
                <span class="download-version">v{{ featured_version.version }}</span>
                <a href="{{ cell.url }}" class="btn-primary btn--sm"{% if cell.label == "Source code" %} target="_blank" rel="noopener noreferrer"{% endif %}>{% if cell.label == "Source code" %}Source{% else %}Download{% endif %}</a>
              </div>
              {% endfor %}
            </div>
            {% endif %}
          </div>

          {% if featured_version.package_resource_url %}
          <p class="sub-install-extra-resource">
            <a href="{{ featured_version.package_resource_url }}" target="_blank" rel="noopener noreferrer">Package resource</a>
          </p>
          {% endif %}

          {% if featured_version.release_notes %}
          <p class="sub-release-notes">{{ featured_version.release_notes }}</p>
          {% endif %}

          {% if show_older_versions_link %}
          <p class="sub-older-versions-inner">
            <a href="{{ sub_product.get_versions_archive_url }}" class="link-arrow">Older releases</a>
          </p>
          {% endif %}
        </section>

        {% elif distribution_package %}
        <section class="sub-downloads sub-downloads--package fade-in" aria-labelledby="sub-resources-heading">
          <h2 class="sub-downloads-title" id="sub-resources-heading">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
              <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
            </svg>
            Resources
          </h2>
          <ul class="pkg-version-list" role="list">
            {% for ver in package_versions %}
            <li class="pkg-version-row">
              <div class="pkg-version-meta">
                <span class="download-version">v{{ ver.version }}</span>
                {% if ver.is_featured_stable %}
                <span class="release-channel-label release-channel-label--stable pkg-stable-inline">
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                  </svg>
                  Stable
                </span>
                {% endif %}
              </div>
              <div class="pkg-version-actions">
                {% if ver.package_resource_url %}
                <a href="{{ ver.package_resource_url }}" class="btn-primary btn--sm" target="_blank" rel="noopener noreferrer">Open</a>
                {% endif %}
                {% if ver.source_code_url %}
                <a href="{{ ver.source_code_url }}" class="btn-ghost btn--sm" target="_blank" rel="noopener noreferrer">Source</a>
                {% endif %}
              </div>
              {% if ver.release_notes %}
              <p class="pkg-version-notes">{{ ver.release_notes }}</p>
              {% endif %}
            </li>
            {% endfor %}
          </ul>
        </section>
        {% endif %}

        {% endif %}

        {% if articles %}
        <section aria-label="Content sections">
          <div class="articles-list">
            {% for article in articles %}
            <article class="article-card glass-card fade-in" aria-labelledby="article-{{ article.pk }}-title">
              {% if article.badge %}<div class="article-card-header"><div class="section-badge article-badge">{{ article.badge }}</div></div>{% endif %}
              <h3 class="article-title" id="article-{{ article.pk }}-title">{{ article.title }}</h3>
              <div class="article-description rich-content" data-readmore="260">{{ article.rendered_description }}</div>
              {% if article.sections.all %}
              <div class="article-sections">
                <dl class="article-sections-list">
                  {% for section in article.sections.all %}
                  <div class="article-section-item">
                    <dt class="section-key">{{ section.title }}</dt>
                    <dd class="section-value rich-content" data-readmore="160">{{ section.rendered_value }}</dd>
                  </div>
                  {% endfor %}
                </dl>
              </div>
              {% endif %}
              {% if article.citations.all %}
              <div class="article-citations" id="article-{{ article.pk }}-citations">
                <h4 class="article-citations-title">Citations</h4>
                <ol class="article-citations-list">
                  {% for citation in article.citations.all %}
                  <li class="article-citation-item">
                    <span class="citation-text">{{ citation.text }}</span>
                    {% if citation.url %}
                    <a href="{{ citation.url }}" class="citation-link" target="_blank" rel="noopener noreferrer" aria-label="Open citation source">
                      <svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                        <path d="M7 3H3a1 1 0 00-1 1v9a1 1 0 001 1h9a1 1 0 001-1V9M10 2h4m0 0v4m0-4L7 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </a>
                    {% endif %}
                  </li>
                  {% endfor %}
                </ol>
              </div>
              {% endif %}
              {% if article.citation_count_display is not None %}
              {% if article.citations.exists %}
              <a href="#article-{{ article.pk }}-citations" class="citation-count-badge" aria-label="{{ article.citation_count_display }} citation{{ article.citation_count_display|pluralize }}">
                <span class="citation-count-number">{{ article.citation_count_display }}</span>
                <span class="citation-count-label">cited</span>
              </a>
              {% else %}
              <div class="citation-count-badge" aria-label="{{ article.citation_count_display }} citation{{ article.citation_count_display|pluralize }}">
                <span class="citation-count-number">{{ article.citation_count_display }}</span>
                <span class="citation-count-label">cited</span>
              </div>
              {% endif %}
              {% endif %}
            </article>
            {% endfor %}
          </div>
        </section>
        {% endif %}
      </main>

      <aside class="sub-product-sidebar" aria-label="Related modules">
        <div class="sidebar-sticky">
          <div class="sidebar-section glass-card">
            <h3 class="sidebar-title">
              <a href="{{ main_product.get_absolute_url }}">{{ main_product.name }}</a> Modules
            </h3>
            {% if siblings %}
            <ul class="sidebar-list" role="list">
              {% for sibling in siblings %}
              <li>
                <a href="{{ sibling.get_absolute_url }}" class="sidebar-link">
                  <span class="sidebar-dot" aria-hidden="true"></span>
                  {{ sibling.name }}
                </a>
              </li>
              {% endfor %}
            </ul>
            {% else %}
            <p class="sidebar-empty">No other modules in this product.</p>
            {% endif %}
          </div>
          <a href="{{ main_product.get_absolute_url }}" class="btn-ghost sidebar-back-btn">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <path d="M10 3L5 8L10 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Back to {{ main_product.name }}
          </a>
        </div>
      </aside>

    </div>
  </div>
</div>

{% endblock %}