<%- include('../partials/head',{pageTitle,bodyClass:'admin-shell'}) %>
<%- include('nav') %>
<main class="admin-main">
  <h1>Media Library</h1>
  <% if(uploaded){ %><div class="success-box">Images uploaded. Click one to use it in a product, category, or homepage field.</div><% } %>
  <% if(deleted){ %><div class="success-box">Image deleted.</div><% } %>
  <p class="media-intro">Upload photos once, then choose them from any image field. No copying URLs.</p>
  <form method="post" enctype="multipart/form-data" class="media-drop" data-media-upload>
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
    <input type="file" name="files" accept="image/*" multiple data-media-file>
    <strong>Drop images here or click to upload</strong>
    <span>JPG, PNG, WebP — you can select several at once</span>
    <button class="btn btn-primary" type="submit">Upload</button>
  </form>
  <div class="media-toolbar">
    <input type="search" placeholder="Search images" data-media-search aria-label="Search images">
    <span data-media-count><%= files.length %> images</span>
  </div>
  <div class="media-grid" data-media-grid>
    <% files.forEach(f=>{ %>
      <article class="media-card" data-media-card data-url="<%= f.url %>" data-name="<%= f.name %>">
        <button type="button" class="media-card-thumb" data-media-preview title="<%= f.name %>">
          <img src="<%= f.url %>" alt="<%= f.name %>">
        </button>
        <div class="media-card-meta">
          <strong title="<%= f.name %>"><%= f.name.split('/').pop() %></strong>
          <small><%= Math.round(f.size/1024) %> KB</small>
        </div>
        <div class="media-card-actions">
          <button type="button" class="btn btn-secondary" data-media-copy="<%= f.url %>">Copy URL</button>
          <form method="post" action="/admin/media/delete" onsubmit="return confirm('Delete this image?');">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <input type="hidden" name="path" value="<%= f.name %>">
            <button type="submit" class="repeater-remove">Delete</button>
          </form>
        </div>
      </article>
    <% }) %>
  </div>
  <% if(!files.length){ %><p class="empty-panel">No images yet. Upload a few to get started.</p><% } %>
</main>
</body></html>
