{% extends "base.html" %}
{% from "partials/media.html" import display_media %}

{% block title %}{{ tag.display_name }} - StarPunk{% endblock %}

{% block content %}
<div class="h-feed">
  <h1 class="p-name">Notes tagged "{{ tag.display_name }}"</h1>

  {% if notes %}
    {% for note in notes %}
    <article class="h-entry note-preview">
      {# Detect if note has explicit title (starts with # heading) - per Q22 #}
      {% set has_explicit_title = note.content.strip().startswith('#') %}

      {# p-name only if note has explicit title (per Q22) #}
      {% if has_explicit_title %}
      <h3 class="p-name">{{ note.title }}</h3>
      {% endif %}

      {# Media preview (if available) #}
      {{ display_media(note.media) }}

      {# e-content: note content (preview) #}
      <div class="e-content">
        {{ note.html[:300]|safe }}{% if note.html|length > 300 %}...{% endif %}
      </div>

      <footer class="note-meta">
        {# u-url for permalink #}
        <a class="u-url" href="{{ url_for('public.note', slug=note.slug, _external=True) }}">
          <time class="dt-published" datetime="{{ note.created_at.isoformat() }}">
            {{ note.created_at.strftime('%B %d, %Y') }}
          </time>
        </a>

        {# Tags in preview #}
        {% if note.tags %}
        <span class="note-tags">
          {% for tag in note.tags %}
          <a class="p-category" rel="tag" href="{{ url_for('public.tag', tag=tag.name) }}">{{ tag.display_name }}</a>
          {% endfor %}
        </span>
        {% endif %}

        {# Author h-card nested in each h-entry (per Q20) #}
        {% if author %}
        <div class="p-author h-card">
          <a class="p-name u-url" href="{{ author.url or author.me }}">
            {{ author.name or author.url or author.me }}
          </a>
        </div>
        {% endif %}
      </footer>
    </article>
    {% endfor %}
  {% else %}
    <p class="empty-state">No notes with this tag.</p>
  {% endif %}

  <nav class="note-nav">
    <a href="/">Back to all notes</a>
  </nav>
</div>
{% endblock %}