{% extends "layout.html" %}
{% set title = "Media" %}
{% block content %}
<div class="admin-heading">
  <h1>Media</h1>
  <span class="muted small">Upload by pasting or dropping files into the editor.</span>
</div>
{% if items %}
<div class="media-grid">
  {% for m in items %}
  <figure class="media-item">
    <a href="/s/{{ site.id }}{{ m.url }}" target="_blank" rel="noopener" class="media-thumb">
      {% if m.thumb %}<img src="/s/{{ site.id }}{{ m.thumb }}" alt="" loading="lazy">{% else %}<span class="muted">file</span>{% endif %}
    </a>
    <figcaption>
      <code class="small">{{ m.name }}</code>
      {% if m.processing %}<span class="badge badge--draft">processing</span>{% endif %}
      <div class="small muted">
        {% if m.used_by %}Used in {% for p in m.used_by %}<a href="/s/{{ site.id }}/edit/{{ p }}">{{ p }}</a>{% if not loop.last %}, {% endif %}{% endfor %}
        {% else %}Not used in any post{% endif %}
      </div>
      <form method="post" action="/s/{{ site.id }}/media-library/delete"
            data-confirm="Delete {{ m.name }}{% if m.used_by %}? It is still used in {{ m.used_by | length }} post(s), which will show a broken link{% endif %}? This removes the original too.">
        <input type="hidden" name="path" value="{{ m.path }}">
        <button class="link-button danger small" type="submit">Delete</button>
      </form>
    </figcaption>
  </figure>
  {% endfor %}
</div>
{% else %}
<p class="empty-state">No uploads yet.</p>
{% endif %}
{% endblock %}