{% extends "base.html" %}
{% block title %}Library — alembic{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1>Library</h1>
    <p class="subtitle muted">{{ total }} track{{ "s" if total != 1 else "" }}{% if grouping or format or q %} matching the filters below{% endif %}.</p>
  </div>
</div>

{% if request.query_params.get('deleted') %}
<div class="notice success">Track deleted.</div>
{% endif %}

<form method="get" action="/library" class="panel filter-bar">
  <div class="field">
    <label for="q">Search</label>
    <input type="text" id="q" name="q" value="{{ q }}" placeholder="artist, title, album...">
  </div>
  <div class="field">
    <label for="grouping">Playlist</label>
    <select id="grouping" name="grouping">
      <option value="">(any)</option>
      {% for g in all_groupings %}
      <option value="{{ g }}" {{ "selected" if g == grouping }}>{{ g }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="field">
    <label for="format">Format</label>
    <select id="format" name="format">
      <option value="">(any)</option>
      {% for f in all_formats %}
      <option value="{{ f }}" {{ "selected" if f == format }}>{{ f }}</option>
      {% endfor %}
    </select>
  </div>
  <button type="submit" class="btn btn-primary">Filter</button>
  {% if grouping or format or q %}<a class="btn btn-ghost" href="/library">Clear</a>{% endif %}
</form>

<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 class="actions-cell">
          <a href="/library/track/{{ item.id }}" class="btn btn-sm btn-ghost">Edit</a>
          <form method="post" action="/library/track/{{ item.id }}/delete" class="inline"
                onsubmit="return confirm('Delete {{ item.artist }} — {{ item.title }}? This removes the file from disk permanently.')">
            <button type="submit" class="btn btn-sm btn-danger">Delete</button>
          </form>
        </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 match{% if grouping or format or q %} these filters{% endif %}.</p>
        </div>
      </td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if total_pages > 1 %}
{% set qs = "&grouping=" + grouping + "&format=" + format + "&q=" + q %}
<div class="pagination" style="display:flex; gap:0.5rem; align-items:center; margin-top:1rem;">
  {% if page > 1 %}
  <a class="btn btn-sm" href="/library?page={{ page - 1 }}{{ qs }}">&larr; Prev</a>
  {% endif %}
  <span class="muted">Page {{ page }} of {{ total_pages }}</span>
  {% if page < total_pages %}
  <a class="btn btn-sm" href="/library?page={{ page + 1 }}{{ qs }}">Next &rarr;</a>
  {% endif %}
</div>
{% endif %}
{% endblock %}