{% extends "base.html" %}
{% block body %}
<h1>Tag albums</h1>

<h2>Unassigned tags</h2>
<p class="muted">Scan a new card on the reader and it shows up here.</p>
<div hx-get="/unassigned" hx-trigger="every 3s" hx-swap="innerHTML">
  {% include "_unassigned.html" %}
</div>

<h2>Assignments <span class="muted">({{ assigned|length }})</span></h2>
<ul class="rows">
  {% for tag in assigned %}
  <li>
    <span class="cover">{% if tag.image %}<img src="{{ tag.image }}" alt="" loading="lazy" onerror="this.remove()">{% endif %}</span>
    <div class="grow">
      <div><strong>{{ tag.album }}</strong> · {{ tag.artist }}</div>
      <div class="muted"><code>{{ tag.tag_id }}</code>{% if tag.last_seen %} · last scanned {{ tag.last_seen|local_time }}{% endif %}</div>
    </div>
    <a href="/tags/{{ tag.tag_id }}">Change</a>
    <form class="inline" method="post" action="/tags/{{ tag.tag_id }}/unassign"
          onsubmit="return confirm('Remove the album from {{ tag.tag_id }}?')">
      <button class="danger">Unassign</button>
    </form>
  </li>
  {% else %}
  <li class="empty muted">No assignments yet.</li>
  {% endfor %}
</ul>
{% endblock %}