{% extends "base.html" %}
{% block title %}Find a claim{% endblock %}
{% block style %}
  table.list col.date { width: 150px; }
  table.list col.claim { width: 120px; }
  table.list col.time { width: 100px; }
  table.list col.mode { width: 96px; }
  table.list col.result { width: 96px; }
  /* 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; }
  }
{% endblock %}
{% block content %}
<h1>Find a claim</h1>
<p class="sub">Every time the bot checked a claim, newest first.</p>
<form class="search card" method="get" action="/claim">
  <input type="search" name="claim_no" value="{{ claim_no }}" autofocus
         placeholder="Claim #" inputmode="numeric" aria-label="Claim number">
  <button type="submit">Find</button>
</form>
{% if rows %}
<div class="pager" id="pager-top"></div>
<table class="list">
  <colgroup><col class="date"><col class="claim"><col class="time"><col class="mode"><col class="result"><col></colgroup>
  <thead><tr><th>Date</th><th>Claim #</th><th>Time</th><th>Mode</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><a href="/day/{{ row.run_at.date().isoformat() }}?claim={{ (row.claim_no or '') | urlencode }}">{{ row.run_at.date() | longdate }}</a></td>
      <td class="claim">{{ row.claim_no or "" }}</td>
      <td>{{ row.run_at | clock }}</td>
      <td>{{ row.run_mode 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 claim_no %}
<div class="empty">No saved check of a claim matching “{{ claim_no }}”.</div>
{% endif %}
{% include "_claim_panel.html" %}
{% endblock %}
{% block scripts %}
<script>
  // The date link goes to the day; the rest of the row opens the panel.
  document.querySelectorAll('tbody a')
    .forEach(a => a.addEventListener('click', e => e.stopPropagation()));
</script>
{% endblock %}