{% extends "document.njk" %}

{% block content %}
  {# Infinite scroll component — must load before Alpine to register via alpine:init #}
  <script defer src="/assets/@rmdes-indiekit-endpoint-activitypub/reader-infinite-scroll.js"></script>
  {# Card interaction component — apCardInteraction Alpine component #}
  <script defer src="/assets/@rmdes-indiekit-endpoint-activitypub/reader-interactions.js"></script>
  {# Autocomplete components for explore + popular accounts #}
  <script defer src="/assets/@rmdes-indiekit-endpoint-activitypub/reader-autocomplete.js"></script>
  {# Tab components — apExploreTabs #}
  <script defer src="/assets/@rmdes-indiekit-endpoint-activitypub/reader-tabs.js"></script>
  {# Relative timestamps — converts absolute dates to "5m", "3h", "2d" etc. #}
  <script defer src="/assets/@rmdes-indiekit-endpoint-activitypub/reader-relative-time.js"></script>

  {# Avatar fallback — remove broken images to reveal initials fallback underneath #}
  <script>document.addEventListener("error",function(e){var t=e.target;if(t.tagName==="IMG"&&t.closest("[data-avatar-fallback]"))t.remove()},true)</script>

  {# Alpine.js — must load after component scripts so alpine:init listeners are registered first #}
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

  {# Reader stylesheet — loaded in body is fine for modern browsers #}
  <link rel="stylesheet" href="/assets/@rmdes-indiekit-endpoint-activitypub/reader.css">
  <link rel="stylesheet" href="/assets/@rmdes-indiekit-endpoint-activitypub/reader-links.css">

  {# AP link interception for internal navigation #}
  <script defer src="/assets/@rmdes-indiekit-endpoint-activitypub/reader-links.js"></script>
  {# Blurhash placeholder backgrounds for gallery images #}
  <script defer src="/assets/@rmdes-indiekit-endpoint-activitypub/reader-blurhash.js"></script>

  {% if readerParent %}
  <nav class="ap-breadcrumb" aria-label="Breadcrumb">
    <a href="{{ readerParent.href }}">{{ readerParent.text }}</a>
    <span class="ap-breadcrumb__separator" aria-hidden="true">/</span>
    <span class="ap-breadcrumb__current" aria-current="page">{{ title }}</span>
  </nav>
  {% endif %}

  {% block readercontent %}
  {% endblock %}
{% endblock %}