{# Reusable fragments. `ticker_card` renders one symbol tile; its data-ticker
   and data-field hooks let the live stream client patch it in place. #}

{# `verdict_badge` renders the rolled-up strong / fair / weak standing badge
   (Phase 20). `s` is a compute::Standing: `s.grade` is the colour hook
   (good/ok/bad), `s.verdict` the word (Strong/Fair/Weak). #}
{% macro verdict_badge(s) %}<span class="vbadge vbadge--{{ s.grade }}">{{ s.verdict }}</span>{% endmacro %}

{% macro ticker_card(c) %}
<a class="ticker-card" href="/s/{{ c.ticker|urlencode }}" data-ticker="{{ c.ticker }}">
  <div class="ticker-card__head">
    <span class="ticker-card__sym">{{ c.ticker }}</span>
    <span class="ticker-card__tags">
      {% if c.strength %}{{ verdict_badge(c.strength) }}{% endif %}
      <span class="ticker-card__kind">{{ c.kind }}</span>
    </span>
  </div>
  <div class="ticker-card__name">{{ c.name }}</div>
  <div class="ticker-card__foot">
    <span class="ticker-card__price num" data-field="price">{{ c.price|money }}</span>
    <span class="ticker-card__chg num{% if c.change_pct is none %} is-flat{% elif c.change_pct >= 0 %} is-up{% else %} is-down{% endif %}" data-field="change_pct">{{ c.change_pct|pct }}</span>
  </div>
</a>
{% endmacro %}

{# `spark_card` renders one dashboard tile: an intraday sparkline with a live
   price and day change. data-lo/data-hi let the stream client place a live
   quote on the same y-scale and nudge the trailing point. #}
{% macro spark_card(c) %}
<a class="spark-card{% if c.up %} is-up-card{% else %} is-down-card{% endif %}"
   href="/s/{{ c.ticker|urlencode }}" data-ticker="{{ c.ticker }}">
  <div class="spark-card__head">
    <span class="spark-card__sym">{{ c.ticker }}</span>
    <span class="spark-card__name">{{ c.name }}</span>
  </div>
  {% if c.spark %}
  <svg class="spark" viewBox="0 0 100 36" preserveAspectRatio="none"
       data-lo="{{ c.spark.lo }}" data-hi="{{ c.spark.hi }}" aria-hidden="true">
    <polygon class="spark__area" points="{{ c.spark.area }}"/>
    {% if c.spark.baseline is not none %}
    <line class="spark__base" x1="0" x2="100" y1="{{ c.spark.baseline }}" y2="{{ c.spark.baseline }}"/>
    {% endif %}
    <polyline class="spark__line" points="{{ c.spark.line }}"/>
  </svg>
  {% else %}
  <div class="spark spark--empty">no intraday data</div>
  {% endif %}
  <div class="spark-card__foot">
    <span class="spark-card__price num" data-field="price">{{ c.price|money }}</span>
    <span class="spark-card__chg num{% if c.change_pct is none %} is-flat{% elif c.change_pct >= 0 %} is-up{% else %} is-down{% endif %}" data-field="change_pct">{{ c.change_pct|pct }}</span>
  </div>
</a>
{% endmacro %}

{# `etf_card` renders one curated ETF tile (Phase 5): the same intraday
   sparkline + live price as `spark_card`, plus the Phase-4 quality verdict as a
   small pill in the head so the fund's quality reads at a glance beside its
   move. `e.card` is a SparkCard; `e.quality` an EtfQuality (None until ≥2
   factors grade). #}
{% macro etf_card(e) %}
<a class="spark-card{% if e.card.up %} is-up-card{% else %} is-down-card{% endif %}"
   href="/s/{{ e.card.ticker|urlencode }}" data-ticker="{{ e.card.ticker }}">
  <div class="spark-card__head">
    <span class="spark-card__sym">{{ e.card.ticker }}</span>
    <span class="spark-card__name">{{ e.card.name }}</span>
    {% if e.quality %}<span class="qchip qchip--{{ e.quality.overall }}" title="ETF quality {{ e.quality.percent }}% — cost {{ e.quality.cost_label }}, tracking {{ e.quality.tracking_label }}, diversification {{ e.quality.diversification_label }}, size {{ e.quality.size_label }}">{{ e.quality.verdict }}</span>{% endif %}
  </div>
  {% if e.card.spark %}
  <svg class="spark" viewBox="0 0 100 36" preserveAspectRatio="none"
       data-lo="{{ e.card.spark.lo }}" data-hi="{{ e.card.spark.hi }}" aria-hidden="true">
    <polygon class="spark__area" points="{{ e.card.spark.area }}"/>
    {% if e.card.spark.baseline is not none %}
    <line class="spark__base" x1="0" x2="100" y1="{{ e.card.spark.baseline }}" y2="{{ e.card.spark.baseline }}"/>
    {% endif %}
    <polyline class="spark__line" points="{{ e.card.spark.line }}"/>
  </svg>
  {% else %}
  <div class="spark spark--empty">no intraday data</div>
  {% endif %}
  <div class="spark-card__foot">
    <span class="spark-card__price num" data-field="price">{{ e.card.price|money }}</span>
    <span class="spark-card__chg num{% if e.card.change_pct is none %} is-flat{% elif e.card.change_pct >= 0 %} is-up{% else %} is-down{% endif %}" data-field="change_pct">{{ e.card.change_pct|pct }}</span>
  </div>
</a>
{% endmacro %}

{# `etf_pill` renders one compact ETF mover (Phase 5): ticker + day move, with a
   small quality dot tinting the pill by the fund's overall grade. #}
{% macro etf_pill(m) %}
<a class="etf-pill {{ 'is-up' if m.change_pct >= 0 else 'is-down' }}" href="/s/{{ m.ticker|urlencode }}">
  {% if m.quality %}<span class="etf-pill__dot etf-pill__dot--{{ m.quality.overall }}" aria-hidden="true"></span>{% endif %}
  <span class="etf-pill__sym">{{ m.ticker }}</span>
  <span class="etf-pill__chg num">{{ m.change_pct|pct }}</span>
</a>
{% endmacro %}

{# `mover_row` renders one gainer/loser row. The `--bar` custom property sizes
   a soft magnitude tint behind the row, scaled by the route. The badge cell
   is always present (empty for a stock without a synced standing) so the
   row's grid keeps a fixed column count. #}
{% macro mover_row(m) %}
<a class="mover {{ 'mover--up' if m.change_pct >= 0 else 'mover--down' }}"
   href="/s/{{ m.ticker|urlencode }}" style="--bar: {{ m.bar }}%">
  <span class="mover__sym num">{{ m.ticker }}</span>
  <span class="mover__name">{{ m.name }}</span>
  <span class="mover__badge">{% if m.strength %}{{ verdict_badge(m.strength) }}{% endif %}</span>
  <span class="mover__price num">{{ m.price|money }}</span>
  <span class="mover__chg num {{ 'is-up' if m.change_pct >= 0 else 'is-down' }}">{{ m.change_pct|pct }}</span>
</a>
{% endmacro %}

{# `health_row` renders one quality-leaderboard row (Phase 17, reframed in
   Phase 3). The overall verdict badge sits on the right; the three sub-readings
   ride below the name as a compact line so the synthesis is legible without
   expanding, and the trailing-year return sits between as a quiet price anchor.
   `--bar` sizes the magnitude tint, scaled by the route to the largest score
   shown. #}
{% macro health_row(r) %}
<a class="hrow {{ 'hrow--up' if r.up else 'hrow--down' }}"
   href="/s/{{ r.ticker|urlencode }}" style="--bar: {{ r.bar }}%">
  <span class="hrow__sym num">{{ r.ticker }}</span>
  <span class="hrow__body">
    <span class="hrow__name">{{ r.name }}</span>
    <span class="hrow__sub">
      <span class="hrow__chip hrow__chip--{{ r.health.strength }}">{{ r.health.strength_label }}</span>
      <span class="hrow__chip hrow__chip--{{ r.health.trajectory }}">{{ r.health.trajectory_label }}</span>
      <span class="hrow__chip hrow__chip--{{ r.health.stability }}">{{ r.health.stability_label }}</span>
    </span>
  </span>
  <span class="hrow__ret num">{% if r.ret_12m is not none %}{{ r.ret_12m|pct }}{% endif %}</span>
  {{ verdict_badge({"grade": r.health.overall, "verdict": r.health.verdict}) }}
</a>
{% endmacro %}