{# Cassette table fragment. Rendered standalone on /partials/index_table for
   HTMX-driven live refresh. Also included in index.html on first paint. #}
{% if cassettes %}
  <div class="cassette-table-wrap">
    <table class="cassette-table">
      <thead>
        <tr>
          <th>path</th>
          <th>providers</th>
          <th class="num">interactions</th>
          <th class="num">size</th>
          <th>modified</th>
        </tr>
      </thead>
      <tbody>
      {% for c in cassettes %}
        <tr class="cassette-row" onclick="window.location.href='/cassette?path={{ c.rel|urlencode }}'">
          <td class="cassette-path mono">{{ c.rel }}</td>
          <td>
            {% for p in c.providers %}<span class="provider-pill {{ p }}">{{ p }}</span>{% endfor %}
            {% if not c.providers %}<span class="dim mono">-</span>{% endif %}
          </td>
          <td class="num mono">{{ c.interactions }}</td>
          <td class="num mono dim">{{ c.size | bytes_human }}</td>
          <td class="dim">{{ c.modified | since }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
{% else %}
  <div class="empty-state">
    <img src="/static/brand.png" alt="" class="empty-icon" width="72" height="72">
    {% if search %}
      <p>No cassettes match <span class="mono">"{{ search }}"</span></p>
      <p class="dim">Try a shorter query, or <a href="/">clear the search</a>.</p>
    {% else %}
      <p>No cassettes recorded yet under <span class="mono">{{ root or "this directory" }}</span></p>
      <p class="dim">Record one by wrapping your LLM-calling code with <span class="mono">@cuesheet.cassette(...)</span>.</p>
      <pre class="snippet"><span class="snippet-comment"># tests/test_summarizer.py</span>
import cuesheet

@cuesheet.cassette("tests/cassettes/test_summarizer.yaml")
def test_summarizer():
    from anthropic import Anthropic
    client = Anthropic()
    r = client.messages.create(
        model="claude-sonnet-4-5",
        messages=[{"role": "user", "content": "..."}],
    )
    assert "key point" in r.content[0].text</pre>
      <p class="dim">First run hits the real API; every run after replays from the YAML. This page updates live as files appear.</p>
    {% endif %}
  </div>
{% endif %}