{% extends "base.html" %}
{% block title %}{{ day | longdate }}{% endblock %}
{% block style %}
  table.list col.n { width: 52px; }
  table.list col.claim { width: 120px; }
  table.list col.time { width: 100px; }
  table.list col.payer { width: 22%; }
  table.list col.result { width: 96px; }
  .bar { display: flex; justify-content: space-between; align-items: end;
         gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  /* A phone: the key columns only — the rest is in the side panel. */
  @media (max-width: 760px) {
    table.list th:nth-child(4), table.list td:nth-child(4), table.list col:nth-child(4), table.list th:nth-child(6), table.list td:nth-child(6), table.list col:nth-child(6) { display: none; }
    table.list col.n { width: 36px; }
    table.list col.claim { width: 96px; }
    table.list col.time { width: 84px; }
  }
{% endblock %}
{% block content %}
<div class="bar">
  <div>
    <h1>{{ day | longdate }}</h1>
    <p class="sub">{{ counts.claims }} claims checked · {{ counts.runs }}
      run{{ "" if counts.runs == 1 else "s" }} — every run of the day together</p>
  </div>
  <form class="search" method="get" action="/day/{{ day.isoformat() }}">
    {% if category %}<input type="hidden" name="category" value="{{ category }}">{% endif %}
    <input type="search" name="claim_no" value="{{ claim_no }}"
           placeholder="Search claim #" inputmode="numeric"
           aria-label="Search claim number">
    <button type="submit">Search</button>
  </form>
</div>

{% set q = ("&claim_no=" ~ claim_no) if claim_no else "" %}
<div class="tiles">
  <a class="tile{{ ' on' if not category }}" href="/day/{{ day.isoformat() }}{{ ('?claim_no=' ~ claim_no) if claim_no }}"><span class="n">{{ counts.claims }}</span><span class="l">All</span></a>
  <a class="tile Pass{{ ' on' if category == 'Pass' }}" href="/day/{{ day.isoformat() }}?category=Pass{{ q }}"><span class="n">{{ counts.pass_count }}</span><span class="l">Pass</span></a>
  <a class="tile Fail{{ ' on' if category == 'Fail' }}" href="/day/{{ day.isoformat() }}?category=Fail{{ q }}"><span class="n">{{ counts.fail_count }}</span><span class="l">Fail</span></a>
  <a class="tile Review{{ ' on' if category == 'Review' }}" href="/day/{{ day.isoformat() }}?category=Review{{ q }}"><span class="n">{{ counts.review_count }}</span><span class="l">Review</span></a>
</div>

{% if rows %}
<div class="pager" id="pager-top"></div>
<table class="list">
  <colgroup><col class="n"><col class="claim"><col class="time"><col class="payer"><col class="result"><col></colgroup>
  <thead><tr><th>#</th><th>Claim #</th><th>Time</th><th>Payer</th><th>Result</th><th>Comments</th></tr></thead>
  <tbody>
    {% for row in rows %}
    <tr data-claim="{{ row.claim_no or '' }}" data-category="{{ row.category or '' }}"
        data-when="{{ row.run_at | usdate }} · {{ row.run_mode or '' }}"
        data-fields='{{ row.fields | tojson }}' data-details="{{ row.details_pretty }}">
      <td>{{ loop.index }}</td>
      <td class="claim">{{ row.claim_no or "" }}</td>
      <td>{{ row.run_at | clock }}</td>
      <td title="{{ row.payer or '' }}">{{ row.payer or "" }}</td>
      <td>{% if row.category %}<span class="cat {{ row.category }}">{{ row.category }}</span>{% endif %}</td>
      <td title="{{ row.comments or '' }}">{{ row.comments or "" }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
<div class="pager" id="pager-bottom"></div>
{% elif counts.claims %}
<div class="empty">No claims match this filter. <a href="/day/{{ day.isoformat() }}">Show all</a></div>
{% else %}
<div class="empty">No claims were checked on this day. <a href="/days">Back to Claim status</a></div>
{% endif %}
{% include "_claim_panel.html" %}
{% endblock %}
{% block scripts %}
<script>
  // ?claim=<no> (from the Live claims panel or a claim's history): open
  // that claim — the last check of it that day — on its page.
  (() => {
    const want = {{ opened | tojson }};
    if (!want) return;
    let i = -1;
    allRows.forEach((tr, k) => { if (tr.dataset.claim === want) i = k; });
    if (i < 0) return;
    goToPage(Math.floor(i / PAGE_SIZE));
    allRows[i].scrollIntoView({block: 'center'});
    showClaim(allRows[i]);
  })();
</script>
{% endblock %}