{% extends "base.html" %}
{% from "macros/tag-links.html" import tag_links with context %}
{% block body %}
{% set filter_tags = namespace(values=[]) %}
{% if this._id in ['blog', 'articles'] %}
  {% for item in this.children %}
    {% for tag in item.tags %}
      {% if tag not in filter_tags.values %}{% set filter_tags.values = filter_tags.values + [tag] %}{% endif %}
    {% endfor %}
  {% endfor %}
{% endif %}
<section class="hero compact">
  <div class="shell narrow">
    <p class="eyebrow">{{ this.eyebrow }}</p>
    <h1>{{ this.summary }}</h1>
  </div>
</section>
<section class="activity-section">
  <div class="shell">
    <div class="section-heading"><span>{{ this.title }}</span><span data-entry-count>{{ this.children.count() }} entries</span></div>
    {% if filter_tags.values %}
    <div class="tag-filter" data-tag-filter aria-label="Filter {{ this.title }} by tag">
      <button class="tag-filter-button is-active" type="button" data-tag-value="" aria-pressed="true">All</button>
      {% for tag in filter_tags.values|sort %}
        {% set tag_record = site.get('/tags/' ~ tag) %}
        {% if tag_record %}<button class="tag-filter-button" type="button" data-tag-value="{{ tag }}" aria-pressed="false">{{ tag_record.title }}</button>{% endif %}
      {% endfor %}
    </div>
    <p class="filter-status" data-filter-status aria-live="polite"></p>
    {% endif %}
    <div class="card-grid">
      {% for item in this.children %}
        <article class="entry-card accent-{{ item.kicker|lower }}"{% if filter_tags.values %} data-filter-item data-tags="{{ item.tags|join(' ') }}"{% endif %}>
          <div class="entry-meta"><span class="label">{{ item.kicker }}</span><time>{{ item.date|dateformat('YYYY.MM.dd') }}</time></div>
          <h2><a href="{{ item|url }}">{{ item.title }}</a></h2>
          <p>{{ item.summary }}</p>
          {% if item.tags %}<div class="entry-tags">{{ tag_links(item.tags) }}</div>{% endif %}
          <a class="read-more" href="{{ item|url }}">Read entry →</a>
        </article>
      {% endfor %}
    </div>
    {% if filter_tags.values %}<p class="filter-empty" data-filter-empty hidden>No entries use this tag.</p>{% endif %}
  </div>
</section>
{% endblock %}