{% if not portfolios %}
<div class="empty">no portfolio snapshots yet</div>
{% else %}
{% for p in portfolios %}
  {# --- overall block --- #}
  <div class="pf-overall">
    <div class="pf-overall__head">
      <span class="pf-name">{{ p.name }}</span>
      <span class="pf-as-of">
        {% if p.snapshot_at %}{{ p.snapshot_at.strftime("%Y-%m-%d %H:%M UTC") }}{% else %}—{% endif %}
      </span>
    </div>
    <div class="pf-overall__grid">
      <div class="pf-stat">
        <div class="pf-stat-label">Total</div>
        <div class="pf-stat-value">{{ p.total_value | money }} <span class="pf-ccy">{{ p.currency }}</span></div>
      </div>
      <div class="pf-stat">
        <div class="pf-stat-label">Invested</div>
        <div class="pf-stat-value">{{ p.invested | money }}</div>
      </div>
      <div class="pf-stat">
        <div class="pf-stat-label">Cash</div>
        <div class="pf-stat-value">{{ p.cash | money }}</div>
      </div>
      <div class="pf-stat">
        <div class="pf-stat-label">Unrealised P/L</div>
        <div class="pf-stat-value {% if p.unrealized_ppl is none %}neu{% elif p.unrealized_ppl >= 0 %}pos{% else %}neg{% endif %}">
          {{ p.unrealized_ppl | signed }}
          {% if p.total_cost and p.unrealized_ppl is not none %}
            <span class="pf-pct">({{ "%+.2f"|format(p.unrealized_ppl / p.total_cost * 100) }}%)</span>
          {% endif %}
        </div>
      </div>
      <div class="pf-stat">
        <div class="pf-stat-label">Realised P/L</div>
        <div class="pf-stat-value {% if p.realized_ppl is none %}neu{% elif p.realized_ppl >= 0 %}pos{% else %}neg{% endif %}">
          {{ p.realized_ppl | signed }}
        </div>
      </div>
      <div class="pf-stat">
        <div class="pf-stat-label">Positions</div>
        <div class="pf-stat-value">{{ p.positions | length }}</div>
      </div>
    </div>
  </div>

  {# --- per-position table --- #}
  <table class="dense">
    <thead>
      <tr>
        <th>Ticker</th>
        <th>Name</th>
        <th class="num mobile-hide">Qty</th>
        <th class="num mobile-hide">Avg</th>
        <th class="num">Last</th>
        <th class="num">P/L</th>
        <th class="num">%</th>
      </tr>
    </thead>
    <tbody>
    {% for pos in p.positions %}
      <tr>
        <td class="label">{{ pos.ticker }}</td>
        <td>{{ pos.name or "" }}</td>
        <td class="num mobile-hide">{{ pos.quantity | price }}</td>
        <td class="num neu mobile-hide">{{ pos.average_price | price }}</td>
        <td class="num">{{ pos.current_price | price }}</td>
        <td class="num {% if pos.ppl is none %}neu{% elif pos.ppl >= 0 %}pos{% else %}neg{% endif %}">
          {{ pos.ppl | signed }}
        </td>
        <td class="num {% if pos.ppl_pct is none %}neu{% elif pos.ppl_pct >= 0 %}pos{% else %}neg{% endif %}">
          {% if pos.ppl_pct is not none %}{{ "%+.2f"|format(pos.ppl_pct) }}%{% else %}—{% endif %}
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
{% endfor %}
{% endif %}