{% from "_macros.html" import pat, wlabel, pill %}

{% if not snapshots %}
  <p style="margin: 0; color: var(--fg-muted);">No snapshots yet. The first analysis will start the timeline.</p>
{% else %}
  {% if badge %}
    {{ pill("stable " + (badge.streak|string) + " day" + ("s" if badge.streak != 1 else ""), "yellow") }}
    {% if badge.streak != badge.matches_in_window %}
      <span style="margin-left: 8px; font-size: 12px; color: var(--fg-muted);">
        ({{ badge.matches_in_window }} of last {{ badge.window }})
      </span>
    {% endif %}
    {% if badge.last_changed_on %}
      <span style="margin-left: 8px; font-size: 12px; color: var(--fg-muted);">
        last changed {{ badge.last_changed_on }}
      </span>
    {% endif %}
  {% endif %}

  <div style="margin-top: 12px; font: 11px var(--font-mono);">
    {% for s in snapshots %}
      <div style="display: grid; grid-template-columns: 100px auto 30px 60px 1fr; gap: 12px;
                  padding: 6px 8px; align-items: center;
                  {% if loop.first %}background: rgba(250,204,21,0.05); border-left: 2px solid var(--yellow); border-radius: var(--radius-sm);{% endif %}">
        <span style="color: var(--fg-muted);">{{ s.as_of }}</span>
        {{ pat(s.top_3[0].pattern) }}
        {{ wlabel(s.top_3[0].last_pivot_label) }}
        <span style="{% if loop.first %}color: var(--cyan);{% endif %}">{{ "%.2f"|format(s.top_3[0].final_score) }}</span>
        {% if s.signal %}
          <span style="color: var(--bull);">RR {{ "%.1f"|format(s.signal.rr) }}</span>
        {% else %}<span></span>{% endif %}
      </div>
    {% endfor %}
  </div>
{% endif %}