{% extends "base.html" %}

{% 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 %}

  {# Media display at TOP (v1.2.0 Phase 3, per ADR-057) #}
  {% if note.media %}
  <div class="note-media">
    {% for item in note.media %}
    <figure class="media-item">
      <img src="{{ url_for('public.media_file', path=item.path) }}"
           alt="{{ item.caption or 'Image' }}"
           class="u-photo"
           width="{{ item.width }}"
           height="{{ item.height }}">
      {% if item.caption %}
      <figcaption>{{ item.caption }}</figcaption>
      {% endif %}
    </figure>
    {% endfor %}
  </div>
  {% endif %}

  {# 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 %}

    {# Author h-card (nested within 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>
      {% if author.photo %}
      <img class="u-photo" src="{{ author.photo }}" alt="{{ author.name or 'Author' }}" width="48" height="48">
      {% endif %}
    </div>
    {% endif %}
  </footer>

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