{% extends "base.html" %}
{% block title %}{{ item.title }} · ARGOS{% endblock %}
{% block content %}
{# data-item-id (ARG-207): drives feed-events.js's Dwell timer — the script
   reads this attribute on DOMContentLoaded to know which item to attribute
   the sendBeacon Dwell event to on visibilitychange/pagehide. #}
<article class="detail" data-item-id="{{ item.id }}">
  {# Back goes to the list the reader came from (``back_to``, from the
     Referer — see app._detail_origin). #}
  {% set from_portfolio = back_to | default('feed') == 'portfolio' %}
  <a class="back-link" href="{{ '/portfolio' if from_portfolio else '/feed' }}">
    <svg aria-hidden="true" viewBox="0 0 12 20" width="10" height="17"><path d="M10 2 2 10l8 8" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
    {{ '포트폴리오' if from_portfolio else '관측 피드' }}
  </a>
  {# The hero's view-transition name matches the feed card cover
     (_macros.cover) so the cover morphs into this hero on navigation. #}
  {% if item.image_url and item.image_url | is_favicon %}
  <div class="detail-hero detail-hero--favicon detail-hero--{{ (item.category.value if item.category else 'none')|lower }}" style="view-transition-name: c{{ item.id.hex }}">
    <span class="detail-hero__scrim" aria-hidden="true"></span>
    {# image_url is attacker-controllable (crawled): escaped <img src> only, never CSS url(). #}
    <span class="favicon-chip">
      <img class="favicon-chip__img" src="{{ item.image_url }}" alt="" loading="lazy" decoding="async" width="40" height="40">
      <span class="favicon-chip__domain">{{ item.source_url | domain }}</span>
    </span>
  </div>
  {% elif item.image_url %}
  <div class="detail-hero" style="view-transition-name: c{{ item.id.hex }}">
    {# og:image is attacker-controllable (crawled): render via an HTML-escaped
       <img src> rather than inline CSS url() to avoid CSS-context injection. #}
    <img class="detail-hero__img" src="{{ item.image_url }}" alt="" loading="lazy" decoding="async">
    <span class="detail-hero__scrim" aria-hidden="true"></span>
  </div>
  {% else %}
  <div class="detail-hero detail-hero--fallback detail-hero--{{ (item.category.value if item.category else 'none')|lower }}" style="view-transition-name: c{{ item.id.hex }}">
    <span class="detail-hero__scrim" aria-hidden="true"></span>
    <span class="detail-hero__glyph" aria-hidden="true">◎</span>
  </div>
  {% endif %}

  <header class="detail-head">
    <div class="detail-meta">
      {% if item.category %}
      <span class="tag {{ 'main' if item.category.value == 'Mainstream' else 'alpha' }}">{{ item.category.value }}</span>
      {% endif %}
      {% if item.trust_score is not none %}
      {% set pct = ((item.trust_score|float) * 100)|round(0)|int %}
      <span class="trust-dial"
            role="img"
            aria-label="신뢰도 {{ pct }}%"
            style="--p: {{ pct }};">
        <span class="trust-dial__face">{{ pct }}</span>
      </span>
      <span class="trust-label">신뢰도</span>
      {% endif %}
    </div>
    <h1 class="detail-title">{{ item.title }}</h1>
  </header>

  {% include "_detail_trust.html" %}

  {% include "_detail_actions.html" %}

  {% if item.summary %}
  <section class="detail-summary">
    <p>{{ item.summary }}</p>
  </section>
  {% endif %}

  {% if item.digest %}
  <section class="detail-digest">
    {% for para in item.digest.split('\n\n') %}
    {% if para.strip() %}<p>{{ para.strip() }}</p>{% endif %}
    {% endfor %}
  </section>
  {% endif %}

  <p class="detail-source">
    <a class="detail-source__link"
       href="{{ item.source_url }}"
       target="_blank"
       rel="noopener noreferrer">원문 보기<svg class="ext-icon" aria-hidden="true" viewBox="0 0 12 12" width="10" height="10"><path d="M3.5 2.5h6v6M9.5 2.5 2.5 9.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
  </p>

  {% include "_detail_genealogy.html" %}
  {# Stable wrapper so a detail-page status mutation can refresh this section
     out-of-band (_detail_actions_oob.html) — its Keep-vs-non-Keep layout
     depends on item.status, so the action bar alone going stale isn't enough
     (codex P2). #}
  <div id="detail-signals-{{ item.id }}">
    {% include "_detail_signals.html" %}
  </div>
</article>
{% endblock %}