{% extends "base.html" %}
{% set active_nav = "topics" %}

{% block title %}{{ topic.name }} - Distill{% endblock %}

{% block content %}
<div class="breadcrumb">
  <a href="/topics">Topics</a><span class="sep">/</span>{{ topic.name }}
</div>

<h1>{{ topic.name }}</h1>
<p class="subtitle">{{ topic.channel_count }} channels &middot; {{ topic.video_count }} videos &middot; {{ topic.site_count }} sites &middot; {{ topic.paper_count }} papers</p>

<div class="tabs" role="tablist" aria-label="Topic views">
  <button class="tab active" id="topic-tab-channels" role="tab" aria-selected="true" aria-controls="tab-channels" tabindex="0">Channels</button>
  {% if synthesis %}<button class="tab" id="topic-tab-synthesis" role="tab" aria-selected="false" aria-controls="tab-synthesis" tabindex="-1">Synthesis</button>{% endif %}
  {% if brief %}<button class="tab" id="topic-tab-brief" role="tab" aria-selected="false" aria-controls="tab-brief" tabindex="-1">Brief</button>{% endif %}
  {% if sites %}<button class="tab" id="topic-tab-sites" role="tab" aria-selected="false" aria-controls="tab-sites" tabindex="-1">Sites</button>{% endif %}
  {% if papers %}<button class="tab" id="topic-tab-papers" role="tab" aria-selected="false" aria-controls="tab-papers" tabindex="-1">Papers</button>{% endif %}
</div>

<div id="tab-channels" class="tab-content active" role="tabpanel" aria-labelledby="topic-tab-channels" tabindex="0">
  <div class="topic-grid">
    {% for ch in topic.channels %}
    <a href="/topics/{{ topic.name }}/channels/{{ ch.name }}" style="text-decoration:none;color:inherit;">
      <div class="card topic-card">
        <div class="name">{{ ch.name }}</div>
        <div class="stats">{{ ch.url }}</div>
      </div>
    </a>
    {% else %}
    <div class="card"><p style="color:var(--muted)">No channels in this topic yet.</p></div>
    {% endfor %}
  </div>
</div>

{% if synthesis %}
<div id="tab-synthesis" class="tab-content" role="tabpanel" aria-labelledby="topic-tab-synthesis" tabindex="0" hidden>
  <div class="card">
    <div class="md-content">{{ synthesis|strip_frontmatter|markdown|safe }}</div>
  </div>
</div>
{% endif %}

{% if brief %}
<div id="tab-brief" class="tab-content" role="tabpanel" aria-labelledby="topic-tab-brief" tabindex="0" hidden>
  <div class="card">
    <div class="md-content">{{ brief|strip_frontmatter|markdown|safe }}</div>
  </div>
</div>
{% endif %}

{% if sites %}
<div id="tab-sites" class="tab-content" role="tabpanel" aria-labelledby="topic-tab-sites" tabindex="0" hidden>
  <div class="topic-grid">
    {% for site in sites %}
    <div class="card topic-card">
      <div class="name">{{ site.name }}</div>
      <div class="stats">{{ site.page_count }} pages</div>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

{% if papers %}
<div id="tab-papers" class="tab-content" role="tabpanel" aria-labelledby="topic-tab-papers" tabindex="0" hidden>
  <div class="topic-grid">
    {% for paper in papers %}
    <div class="card topic-card">
      <div class="name">{{ paper.title }}</div>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}
{% endblock %}