{# Sticky bottom bar — same .mkt chip styling as the old dashboard
   header, extended with the market's headline index price + 1d change.
   Refreshed every 60s via HTMX. #}
<div class="markets-bar__inner">
  {% for m in markets %}
  <div class="mkt {% if m.open %}mkt--open{% else %}mkt--closed{% endif %}"
       title="{{ m.label }} — {% if m.open %}closes{% else %}opens{% endif %} {{ m.until_iso }}">
    <span class="mkt__dot"></span>
    <span class="mkt__name">{{ m.code }}</span>
    <span class="mkt__state">{{ m.label }}</span>
    {% if m.index %}
    <span class="mkt__index">
      <span class="mkt__index-label">{{ m.index.label }}</span>
      <span class="mkt__index-price">{{ m.index.price_fmt }}</span>
      <span class="mkt__index-change {% if m.index.change_1d_pct is not none and m.index.change_1d_pct >= 0 %}pos{% elif m.index.change_1d_pct is not none %}neg{% else %}neu{% endif %}">
        {%- if m.index.change_1d_pct is not none -%}
          {{ "%+.2f"|format(m.index.change_1d_pct) }}%
        {%- else -%}
          —
        {%- endif -%}
      </span>
    </span>
    {% else %}
    <span class="mkt__index mkt__index--empty">—</span>
    {% endif %}
    <time class="mkt__when" datetime="{{ m.until_iso }}">{{ m.until_hhmm }}Z</time>
  </div>
  {% endfor %}
</div>