{% extends "base.html" %}
{% block title %}관측 피드 · ARGOS{% endblock %}
{# Magazine grid (ARG-175): only the feed widens its wrap per breakpoint so the
   reader/portfolio keep their narrow 760px reading column. #}
{% block page_class %}page--feed{% endblock %}
{% block content %}
{# Two-stream layout: the discovery feed (left/main) + the signal ticker
   (right). The ticker is wide-screen-only chrome — CSS hides it below 1536px so
   the standard layout is untouched — and is omitted entirely when there are no
   signals yet. #}
<div class="feed-shell{% if activity %} feed-shell--with-ticker{% endif %}">
  <div class="feed-main">
    <nav class="feed-filter" aria-label="카테고리 필터">
      <a class="chip{% if not category %} is-active{% endif %}"
         href="/feed"{% if not category %} aria-current="true"{% endif %}>전체</a>
      <a class="chip chip--main{% if category == 'Mainstream' %} is-active{% endif %}"
         href="/feed?category=Mainstream"{% if category == 'Mainstream' %} aria-current="true"{% endif %}>Mainstream</a>
      <a class="chip chip--alpha{% if category == 'Alpha' %} is-active{% endif %}"
         href="/feed?category=Alpha"{% if category == 'Alpha' %} aria-current="true"{% endif %}>Alpha</a>
    </nav>

    {# Floating refresh action — desktop(≥768px) only; mobile relies on the
       pull-to-refresh gesture. position:fixed, so DOM order here only affects
       keyboard focus order, not layout. #}
    <button type="button" class="refresh-btn" data-refresh="feed" aria-label="새로고침">
      <span class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg></span>
    </button>

    {# New-items poll pill (ARG-203) — hidden until feed-poll.js finds items
       newer than data-latest-cursor. Tapping it triggers a full refresh
       (ArgosRefresh.refresh('feed')) + scroll-to-top; polling itself never
       mutates the DOM, it only toggles this pill's visibility. #}
    <button type="button" class="new-items-pill" hidden data-new-items-pill>
      <span aria-hidden="true">↑</span> 새 항목 <span data-new-items-count>0</span>개
    </button>

    <div id="feed-list" class="feed-list" data-latest-cursor="{{ latest_cursor|default('') }}">
      {% include "_feed_items.html" %}
    </div>
  </div>

  {% if activity %}
  <aside class="ticker" aria-label="관측 신호">
    {% include "_ticker.html" %}
  </aside>
  {% endif %}
</div>
{% endblock %}