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

{% block title %}{{ note.slug }} - StarPunk{% endblock %}

{% block content %}
<article class="h-entry">
  {# 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 %}
  <h1 class="p-name">{{ note.title }}</h1>
  {% endif %}

  {# u-photo placement: Per draft spec, u-photo must be direct child of h-entry, #}
  {# NOT inside e-content. Media is rendered ABOVE e-content to meet this requirement. #}
  {{ display_media(note.media) }}

  {# e-content: note content BELOW media (per ADR-057) #}
  <div class="e-content">
    {{ note.html|safe }}
  </div>

  <footer class="note-meta">
    {# u-url and u-uid same for notes (per Q23) #}
    <a class="u-url u-uid" 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 at %I:%M %p') }}
      </time>
    </a>

    {# dt-updated if note was modified #}
    {% if note.updated_at and note.updated_at != note.created_at %}
    <span class="updated">
      (Updated: <time class="dt-updated" datetime="{{ note.updated_at.isoformat() }}">{{ note.updated_at.strftime('%B %d, %Y') }}</time>)
    </span>
    {% endif %}

    {# Tags / Categories #}
    {# rel="tag" per microformats2 p-category specification #}
    {% if note.tags %}
    <div 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 %}
    </div>
    {% endif %}

    {# Author h-card (nested within h-entry per Q20) #}
    {% if author %}
    <div class="p-author h-card">
      {% if author.photo %}
      <img class="u-photo" src="{{ author.photo }}" alt="{{ author.name or 'Author' }}" width="48" height="48">
      {% endif %}
      <a class="p-name u-url" href="{{ author.url or author.me }}">
        {{ author.name or author.url or author.me }}
      </a>
      {% if author.note %}
      <span class="p-note" style="display: none;">{{ author.note }}</span>
      {% endif %}
    </div>
    {% endif %}
  </footer>

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