{% extends "base.html" %}
{% block title %}Library — alembic{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1>Library{% if grouping %} <span class="muted">— {{ grouping }}</span>{% endif %}</h1>
    <p class="subtitle muted">Tracks currently imported into beets.</p>
  </div>
</div>

<div class="table-wrap scroll">
  <table>
    <thead>
      <tr><th>Artist</th><th>Title</th><th>Album</th><th>Format</th><th></th></tr>
    </thead>
    <tbody>
      {% for item in items %}
      <tr>
        <td>{{ item.artist }}</td>
        <td>{{ item.title }}</td>
        <td class="muted">{{ item.albumartist }}</td>
        <td><span class="badge badge-muted">{{ item.format }}</span></td>
        <td><a href="/library/track/{{ item.id }}" class="btn btn-sm btn-ghost">Edit</a></td>
      </tr>
      {% else %}
      <tr class="empty-row"><td colspan="5">
        <div class="empty-state">
          <span class="sparkle" style="position:relative; display:inline-block; margin-bottom:0.5rem;"></span>
          <p class="muted" style="margin:0;">No tracks found{% if grouping %} for grouping "{{ grouping }}"{% endif %}.</p>
        </div>
      </td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}