---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/base
asset_path: blog/tags/tag

### PAGE CONFIG ###
# Hero Section
hero:
  subheadline: "Every story on this thread, newest first."
---

{% comment %}
  NEWSFLASH TAG ARCHIVE
  Same data contract as classy's tag page (page.tag.name/slug + posts
  filtered from site.posts), presented as a topic front: breadcrumb, serif
  topic headline, and the same story-card grid as the blog index.
{% endcomment %}

<!-- ============================================ -->
<!-- TOPIC HEAD -->
<!-- ============================================ -->
<section class="pb-4">
  <div class="container" data-lazy="@class animation-slide-up">
    <nav aria-label="breadcrumb" class="mb-3">
      <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item">
          <a href="{{ site.url }}/blog" class="text-decoration-none">News</a>
        </li>
        <li class="breadcrumb-item">
          <a href="{{ site.url }}/blog/tags" class="text-decoration-none">Topics</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ page.tag.name }}</li>
      </ol>
    </nav>

    <span class="kicker mb-2">The topic</span>
    <h1 class="display-4 my-2">{{ page.tag.name }}</h1>
    {% iftruthy page.resolved.hero.subheadline %}
      <p class="lead mb-0">{{ page.resolved.hero.subheadline }}</p>
    {% endiftruthy %}
  </div>
</section>

<!-- ============================================ -->
<!-- STORIES -->
<!-- ============================================ -->
<section class="pt-0">
  <div class="container">
    {% comment %} Filter posts by tag (max 100) {% endcomment %}
    {% assign tag_slug = page.tag.slug %}
    {% assign filtered_posts = '' | split: ',' %}
    {% for post in site.posts %}
      {% if filtered_posts.size >= 100 %}
        {% break %}
      {% endif %}
      {% for tag in post.post.tags %}
        {% assign t_slug = tag | slugify %}
        {% if t_slug == tag_slug %}
          {% assign filtered_posts = filtered_posts | push: post %}
          {% break %}
        {% endif %}
      {% endfor %}
    {% endfor %}

    {% if filtered_posts.size > 0 %}
      <div class="section-head" data-lazy="@class animation-slide-up">
        <h2>On this thread</h2>
        <span class="rule"></span>
      </div>
      <div class="row g-4 mb-5">
        {% for post in filtered_posts %}
          <div class="col-xl-4 col-lg-6 col-md-12" data-lazy="@class animation-slide-up">
            <a href="{{ site.url }}{{ post.url }}" class="story-card">
              <div class="art-frame mb-3">
                {%- uj_post post.post.id, "image-tag", class="w-100" -%}
              </div>
              {% if post.post.categories[0] %}
                <span class="kicker mb-1">{{ post.post.categories[0] | uj_title_case }}</span>
              {% endif %}
              <h3 class="h5 my-2">{{ post.post.title }}</h3>
              <p class="small text-body-secondary mb-0">
                <b class="text-body">{%- uj_member post.post.author, "name" -%}</b>
                · {{ post.date | date: "%b %d, %Y" }}
                · {% uj_readtime post.content %} min read
              </p>
            </a>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="text-center py-5" data-lazy="@class animation-slide-up">
        <span class="kicker mb-2">Nothing on this thread yet</span>
        <h2 class="h3 mb-2">The story hasn't broken</h2>
        <p class="text-body-secondary mb-4">Check back soon — coverage lands here as it's filed.</p>
      </div>
    {% endif %}

    <!-- Back to topics -->
    <div class="text-center" data-lazy="@class animation-slide-up">
      <a href="{{ site.url }}/blog/tags" class="btn btn-outline-dark">
        {% uj_icon "arrow-left", "me-2" %}All topics
      </a>
    </div>
  </div>
</section>

{{ content | uj_content_format }}