{% from "_macros.html" import cover %}
{# Portfolio card list fragment (ARG-154). Rendered inside portfolio.html for
   both the "새 신호 있음" (active) and "조용함" (quiet) sections. Shares the
   cover() macro with the feed so the favicon-chip / og-image / glyph branch
   stays identical (a bare favicon is never stretched across the cover). #}
<div class="portfolio-list">
{% for asset in items %}
{% set cat = (asset.category.value if asset.category else 'none')|lower %}
{% set replace_successor = handoff_banners.get(asset.id) if handoff_banners is defined else None %}
<article class="card rise" id="portfolio-card-{{ asset.id }}" style="--d: {{ '%.2f'|format(loop.index0 * 0.04) }}s">
  {% if replace_successor %}
  {# Replace successor exists (ARG-209 AC1/AC3): a card-top handoff banner,
     computed eagerly by `app.py::_load_handoff_banners` (bounded to assets
     with lineage_count > 0) so it's visible without expanding the timeline.
     Empty 200 + outerHTML on the whole card removes the (now-Archived)
     predecessor from this Keep-only list, mirroring Untrack's contract. #}
  <div class="handoff-banner" id="handoff-banner-{{ asset.id }}">
    <p class="handoff-banner__text">🔁 <a href="/item/{{ replace_successor.tech_id }}">{{ replace_successor.title }}</a>이(가) 이 기술을 대체합니다</p>
    <button type="button"
            class="handoff-banner__btn"
            hx-post="/assets/{{ asset.id }}/handoff?successor_tech_id={{ replace_successor.tech_id }}"
            hx-target="#portfolio-card-{{ asset.id }}"
            hx-swap="outerHTML">이어받기</button>
  </div>
  {% endif %}
  {# Card taps open the in-app reader (ARG-138) keyed on the tech_item id;
     "원문 보기" on the detail page handles the external source_url redirect. #}
  {# transition_id = the tech item, so this cover morphs into the item page's
     hero exactly like a feed card's does. #}
  {{ cover(asset.image_url, asset.category, "/item/" ~ asset.tech_id, asset.source_url, transition_id=asset.tech_id) }}
  <div class="body">
    <p class="eyebrow eyebrow--{{ cat }}">
      {% if asset.category %}
      <span class="eyebrow__cat">{{ asset.category.value }}</span>
      {% endif %}
      <span class="eyebrow__src">{{ asset.source_url | domain }}</span>
      {% if asset.signal_count > 0 %}<span class="pf-badge pf-badge--signal" title="최근 7일 신호 수">🔭 {{ asset.signal_count }}</span>{% endif %}
      {% if asset.lineage_count > 0 %}<span class="pf-badge pf-badge--lineage" title="계보 연결 수">🧬 {{ asset.lineage_count }}</span>{% endif %}
    </p>
    <h2 class="headline">
      <a href="/item/{{ asset.tech_id }}">{{ asset.title }}</a>
    </h2>
    <p class="pf-meta">
      <span>Keep {{ asset.kept_since.strftime('%Y-%m-%d') }}</span>
      {% if asset.last_signal_at %}
      <span class="pf-meta__sep">·</span>
      <span>마지막 신호 {{ asset.last_signal_at.strftime('%Y-%m-%d') }}</span>
      {% endif %}
    </p>
    <div class="card-actions">
      {# Tapping toggles the timeline open/closed; portfolio-timeline.js
         fetches GET /portfolio/{asset.id}/timeline on first open and just
         clears the container (no re-fetch) on the retap that closes it. #}
      <button type="button"
              class="card-action card-action--timeline"
              data-timeline-toggle="{{ asset.id }}"
              aria-expanded="false"
              aria-controls="timeline-{{ asset.id }}">타임라인</button>
      {# Untrack archives the asset; the route returns an empty body so this
         outerHTML swap removes the card from the Keep-only portfolio. #}
      <button class="card-action card-action--untrack"
              hx-post="/assets/{{ asset.id }}/untrack"
              hx-target="#portfolio-card-{{ asset.id }}"
              hx-swap="outerHTML">Untrack</button>
    </div>
    <div class="timeline-container" id="timeline-{{ asset.id }}"></div>
  </div>
</article>
{% endfor %}
</div>