{% extends "base.html" %}
{% block title %}{{ tag.tag_id }} · Tag albums{% endblock %}
{% block body %}
<p><a href="/">← All tags</a></p>
<h1><code>{{ tag.tag_id }}</code></h1>
{% if tag.assigned %}
<h2>Plays, in this order</h2>
<ol class="rows">
  {% for a in tag.albums %}
  <li>
    <span class="pos">{{ loop.index }}</span>
    {% with tag_id = tag.tag_id %}{% include "_cover.html" %}{% endwith %}
    <div class="grow"><strong>{{ a.album }}</strong> · {{ a.artist }}</div>
    <form class="inline" method="post" action="/tags/{{ tag.tag_id }}/albums/{{ a.position }}/up">
      <button aria-label="Play {{ a.album }} earlier" {% if loop.first %}disabled{% endif %}>↑</button>
    </form>
    <form class="inline" method="post" action="/tags/{{ tag.tag_id }}/albums/{{ a.position }}/down">
      <button aria-label="Play {{ a.album }} later" {% if loop.last %}disabled{% endif %}>↓</button>
    </form>
    <form class="inline" method="post" action="/tags/{{ tag.tag_id }}/albums/{{ a.position }}/remove">
      <button class="danger">Remove</button>
    </form>
  </li>
  {% endfor %}
</ol>
<p class="muted">Search below and use <strong>Add</strong> to play another album after these, or <strong>Assign</strong> to replace them all.</p>
{% else %}
<p class="muted">No album assigned yet.</p>
{% endif %}

<h2>Search the music library</h2>
<input type="search" name="q" placeholder="Album or artist…" autofocus autocomplete="off"
       hx-get="/tags/{{ tag.tag_id }}/search" hx-trigger="input changed delay:400ms, search"
       hx-target="#results" hx-indicator="#searching">
<p id="searching" class="muted htmx-indicator">Searching…</p>
<div id="results"></div>
{% endblock %}