{% extends "base.html" %}
{% block title %}Claim status{% endblock %}
{% block style %}
  .days { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
          gap: 14px; }
  a.daycard { display: block; background: var(--panel); color: var(--text);
              border: 1px solid var(--line); border-left: 5px solid var(--accent);
              border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); }
  a.daycard:hover { text-decoration: none; border-color: var(--accent);
                    background: var(--hilite); }
  .daycard .d { font-size: 16px; font-weight: 700; }
  .daycard .m { color: var(--muted); font-size: 12px; margin: 2px 0 8px; }
  .daycard .c { display: flex; gap: 12px; font-weight: 600; font-size: 13px; }
  .daycard .c .Pass { color: var(--pass); }
  .daycard .c .Fail { color: var(--fail); }
  .daycard .c .Review { color: var(--review); }
  .stack { display: flex; height: 7px; border-radius: 4px; overflow: hidden;
           background: var(--head); margin-top: 10px; }
  .stack i { display: block; }
  .stack i.Pass { background: var(--pass); }
  .stack i.Fail { background: var(--fail); }
  .stack i.Review { background: var(--review-bar); }
{% endblock %}
{% block content %}
<h1>Claim status</h1>
<p class="sub">Every day the bot checked claims, newest first — all runs of a
  day together. Pick a day to see its claims.</p>
{% if days %}
<div class="days">
  {% for d in days %}
  <a class="daycard" href="/day/{{ d.day.isoformat() }}">
    <div class="d">{{ d.day | longdate }}</div>
    <div class="m">{{ d.claims }} claims checked · {{ d.runs }} run{{ "" if d.runs == 1 else "s" }}</div>
    <div class="c">
      <span class="Pass">{{ d.pass_count }} Pass</span>
      <span class="Fail">{{ d.fail_count }} Fail</span>
      <span class="Review">{{ d.review_count }} Review</span>
    </div>
    <div class="stack" aria-hidden="true">
      <i class="Pass" data-n="{{ d.pass_count }}"></i><i class="Fail" data-n="{{ d.fail_count }}"></i><i class="Review" data-n="{{ d.review_count }}"></i>
    </div>
  </a>
  {% endfor %}
</div>
{% else %}
<div class="empty">No results saved yet. Run the bot with <code>RESULTS_DB=1</code>
  in <code>.env</code>; each day's claims appear here.</div>
{% endif %}
{% endblock %}
{% block scripts %}
<script>
  // Each part of a day's colour bar as wide as its count.
  document.querySelectorAll('.stack i').forEach(i => {
    i.style.flexGrow = Number(i.dataset.n) || 0;
  });
</script>
{% endblock %}