{% if tag_vocabulary %}
<div class="news-tags" data-include="{{ active_include|join(',') }}" data-exclude="{{ active_exclude|join(',') }}">
  {% for tag in tag_vocabulary %}
  <button type="button" class="news-tag"
          data-tag="{{ tag }}"
          {% if tag in active_include %}data-state="include"{% elif tag in active_exclude %}data-state="exclude"{% endif %}
          title="{{ tag_labels.get(tag, tag) }} — click to include only, shift-click to exclude">
    {{ tag_labels.get(tag, tag) }}
  </button>
  {% endfor %}
  {% if active_include or active_exclude %}
  <button type="button" class="news-tag news-tag--clear" data-tag="" title="Clear all filters">clear</button>
  {% endif %}
</div>
{% endif %}

{% if not headlines %}
<div class="empty">no headlines in window{% if active_include or active_exclude %} (after tag filter){% endif %}</div>
{% else %}
{% for h in headlines %}
<div class="news-row">
  <span class="age">{{ h.age }}</span>
  <span class="source">{{ h.source }}</span>
  <a class="title" href="{{ h.url }}" target="_blank" rel="noopener">{{ h.title }}</a>
  <span class="news-row__tags">
    {% for t in h.tags or [] %}<span class="tag-chip" data-tag="{{ t }}">{{ tag_labels.get(t, t) }}</span>{% endfor %}
  </span>
  {% if h.iso %}
  <time class="local" datetime="{{ h.iso }}" title="{{ h.iso }}">{{ h.utc_short }}</time>
  {% else %}
  <span class="local">—</span>
  {% endif %}
</div>
{% endfor %}
{% endif %}