{% extends "base.html" %}
{% block title %}cassettes · cuesheet{% endblock %}

{% block content %}
<section class="cassettes-page">
  <div class="page-header">
    <div>
      <div class="page-eyebrow">/ cassettes</div>
      <h1 class="page-title">
        <span id="cassette-count">{{ total }}</span>
        cassette{{ 's' if total != 1 else '' }}
      </h1>
    </div>
    <form class="search-form" method="get" action="/">
      <input type="search" name="search" value="{{ search }}"
             placeholder="search by path, provider..." autocomplete="off" autofocus>
      {% if search %}<a href="/" class="search-clear" title="Clear">×</a>{% endif %}
    </form>
  </div>

  {# This block re-fetches itself via HTMX whenever a cassette_changed SSE event fires. #}
  <div id="cassette-table-region"
       hx-get="/partials/index_table?search={{ search | urlencode }}"
       hx-trigger="cuesheet:cassette_changed from:window delay:200ms"
       hx-swap="innerHTML">
    {% include "_index_table.html" %}
  </div>
</section>
{% endblock %}