{% extends "base.html" %}
{% block title %}Recycle bin · LibreSignage{% endblock %}
{% block content %}
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div><h1>Recycle bin</h1><p class="text-body-secondary">Items remain here until permanently deleted.</p></div>
    <a class="btn btn-outline-primary" href="{{ url_for('content.index') }}">Content library</a>
  </div>
  <form method="get" class="mb-3"><input class="form-control" name="q" value="{{ query }}" placeholder="Search recycled content"></form>
  <div class="list-group">
    {% for item in items %}
      <div class="list-group-item d-flex align-items-center gap-3">
        <div class="flex-grow-1"><strong>{{ item.title }}</strong><div class="small text-body-secondary">Deleted {{ item.deleted_at }} · retained in {{ usage[item.id].playlist_count }} playlists</div></div>
        <form method="post" action="{{ url_for('content.restore_deleted_item', item_id=item.id) }}"><button class="btn btn-sm btn-outline-primary">Restore</button></form>
        <form method="post" action="{{ url_for('content.purge_deleted_item', item_id=item.id) }}">
          <div class="form-check"><input class="form-check-input" id="purge-{{ item.id }}" name="confirm" type="checkbox" value="yes" required><label class="form-check-label small" for="purge-{{ item.id }}">Permanent</label></div>
          <button class="btn btn-sm btn-danger">Delete permanently</button>
        </form>
      </div>
    {% else %}<div class="alert alert-info">The recycle bin is empty.</div>{% endfor %}
  </div>
{% endblock %}