{% extends "base.html" %}
{% from "_macros.html" import pen_underline, brush_mark %}

{% block title %}{{ drop.title }} · Agent Drop{% endblock %}

{% block head_extra %}
  <link rel="stylesheet" href="{{ static('markdown.css') }}">
  <link rel="stylesheet" href="{{ static('pygments.css') }}">
  <link rel="stylesheet" href="{{ static('drop_reading.css') }}">
  <script defer src="{{ static('prevent_link_click.js') }}"></script>
  <script type="module" defer src="{{ static('mermaid_init.js') }}"></script>
  {# HTMX powers the pin/archive toggle swaps. Pinned to 1.9.12 (not @latest)
     so a future upstream release can't change behaviour under us. Each
     action button wraps its own <form method="post"> so the no-JS path still
     works (server returns 303 back to the drop page). #}
  <script src="https://unpkg.com/htmx.org@1.9.12" defer></script>
  {# Copy-to-clipboard: wired client-side only. The raw markdown source is
     written to a hidden <template> element in the body and the tiny inline
     script below reads it when the Copy button is pressed. No network call,
     no POST endpoint wiring — Pin/Archive use real POST endpoints, handled
     via HTMX (see _action_button.html partial). #}
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      var btn = document.querySelector('[data-action="copy"]');
      var src = document.getElementById("drop-source");
      if (!btn || !src) return;
      btn.addEventListener("click", function () {
        var text = src.textContent || "";
        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard.writeText(text).then(function () {
            var label = btn.querySelector(".label");
            if (!label) return;
            var prev = label.textContent;
            label.textContent = "Copied";
            setTimeout(function () { label.textContent = prev; }, 1400);
          });
        }
      });
    });
  </script>
{% endblock %}

{% block body_class %}drop-reading{% endblock %}

{% block content %}
  <header class="topbar">
    <a class="back" href="/">← Inbox</a>
    <div class="actions">
      {# Pin / Archive: POST-backed forms, HTMX-enhanced. Each form wraps a
         single action button. The button carries the `hx-post` so only the
         button swaps on success (the form wrapper persists across swaps,
         preserving the no-JS fallback path). Agent-A's router re-renders
         the same `_action_button.html` partial on the HX path. #}
      {% with kind = "pin" %}{% include "_action_button.html" %}{% endwith %}
      {% with kind = "archive" %}{% include "_action_button.html" %}{% endwith %}
      <button type="button" class="action-btn" data-action="copy" aria-label="Copy markdown source">
        <span class="label">Copy</span>
      </button>
    </div>
  </header>

  <article class="article">
    <div class="meta">
      {% if drop.source %}
        <span class="meta-source">
          {{ drop.source }}
          {{ pen_underline(drop.source|length) }}
        </span>
        <span class="meta-sep">·</span>
      {% endif %}
      <span class="meta-date">{{ formatted_date }}</span>
      <span class="meta-sep">·</span>
      <span class="meta-priority priority-{{ drop.priority }}">
        {% if drop.priority == "urgent" %}
          {{ brush_mark("urgent") }}
        {% elif drop.priority == "high" %}
          {{ brush_mark("high", color="var(--color-peach)") }}
        {% endif %}
        <span class="priority-label">{{ drop.priority }}</span>
      </span>
    </div>

    <h1 class="drop-title">{{ drop.title }}</h1>

    <p class="summary">{{ drop.body }}</p>

    {% if drop.tags_json %}
      <div class="tags">
        {% for tag in drop.tags_json %}
          <span class="tag">{{ tag }}</span>
        {% endfor %}
      </div>
    {% endif %}

    <hr class="body-divider">

    <div class="md-body">{{ rendered }}</div>

    {# Hidden markdown source for the Copy button. Using <template> so the
       content doesn't render in the DOM tree but is still readable via JS. #}
    <template id="drop-source">{{ drop.content_md }}</template>

    {% if notification_failures %}
      {# Notification delivery diagnostics. Issue #14 E2: failures are
         recorded as ``notification_failed`` events and surfaced here so
         the operator who taps the link doesn't have to tail logs to
         understand why the push didn't fire. Visual treatment uses the
         existing peach palette (the same the design system uses for
         "needs attention" priority tags) — no new tokens. #}
      <aside class="notify-failures" role="status">
        <div class="notify-failures__title">
          Notification didn't deliver
        </div>
        <ul class="notify-failures__list">
          {% for failure in notification_failures %}
            <li class="notify-failures__item">
              {% set detail = failure.detail_json or {} %}
              <span class="notify-failures__driver">
                {{ detail.get("driver") or "unknown" }}
              </span>
              <span class="notify-failures__sep">·</span>
              <span class="notify-failures__class">
                {{ detail.get("error_class") or "error" }}
              </span>
              {% if detail.get("message") %}
                <div class="notify-failures__message">{{ detail.get("message") }}</div>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      </aside>
    {% endif %}

    {% if drop.external_url %}
      <aside class="external-card">
        <div class="external-card__info">
          <div class="eyebrow">Open original</div>
          <div class="external-card__title">{{ drop.title }}</div>
          <div class="external-card__url">{{ drop.external_url }}</div>
        </div>
        <a class="btn-open" href="{{ drop.external_url }}" rel="noopener noreferrer">
          Open ↗
        </a>
      </aside>
    {% endif %}

    <footer class="footer">
      <span class="footer-id" title="{{ drop.short_id }}">drop · {{ drop.short_id[:8] }}</span>
      <span class="footer-expiry">{{ expires_in_text }}</span>
    </footer>
  </article>
{% endblock %}