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

{% block content %}
<section class="cassette-page">

  <div class="breadcrumb">
    <a href="/">cassettes</a>
    <span class="sep">/</span>
    <span class="mono dim">{{ rel_path }}</span>
  </div>

  {# This whole region re-fetches when the cassette file changes. #}
  <div id="cassette-region"
       hx-get="/partials/cassette?path={{ rel_path | urlencode }}"
       hx-trigger="cuesheet:cassette_changed from:window delay:200ms"
       hx-swap="innerHTML">
    {% include "_cassette_body.html" %}
  </div>
</section>
{% endblock %}