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

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

<div class="list-head">
  <h2>Assignments <span class="muted">({{ assigned|length }})</span></h2>
  <nav class="sort" aria-label="Sort assignments">
    <span class="muted">Sort by</span>
    {% for key, label in [("artist", "Artist"), ("assigned", "Recently assigned"), ("scanned", "Recently scanned")] %}
    {% if key == sort %}<strong aria-current="true">{{ label }}</strong>{% else %}<a href="/?sort={{ key }}">{{ label }}</a>{% endif %}
    {% endfor %}
  </nav>
</div>
<ul class="rows">
  {% for tag in assigned %}
  <li>
    {% with a = tag.albums[0], tag_id = tag.tag_id %}{% include "_cover.html" %}{% endwith %}
    <div class="grow">
      <div>{% for a in tag.albums %}{% if not loop.first %} <span class="muted">+</span> {% endif %}<strong>{{ a.album }}</strong> · {{ a.artist }}{% endfor %}</div>
      <div class="muted meta">
        <code>{{ tag.tag_id }}</code>
        <span>assigned {{ tag.assigned_at|local_time }}</span>
        <span>{% if tag.last_seen %}last scanned {{ tag.last_seen|local_time }}{% else %}not scanned yet{% endif %}</span>
      </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 %}