source: Klonkt/src/views/pages/admin-media.ejs@ b1b7652

<%# Beheer -> Media: de afbeeldingenbibliotheek met opruiming.
    De audio-helft zit onder /admin/audio, als eigen tab.

    Deze pagina stond volledig op inline styles en viel daarmee buiten het
    ax-*-systeem waar audio en playlists al op zaten. Nu op dezelfde romp:
    zelfde breedte, zelfde kop, tabs op dezelfde plek. %>
<%- include('../partials/admin-styles') %>
<div class="container ax-page">

  <%- include('../partials/admin-back') %>
  <%- include('../partials/media-tabs', { active: 'images', audioOn: audioOn }) %>
  <header class="ax-header">
    <div>
      <h1><%= t('admin.t_media') %></h1>
      <p class="ax-tagline">
        <%= items.length %> <%= t('admin.media_count') %><% if (unusedCount) { %> &middot; <strong><%= unusedCount %></strong> <%= t('admin.media_unused') %><% } %>
      </p>
    </div>
  </header>

  <% if (success) { %><div class="ax-flash ax-flash-ok"><%= success %></div><% } %>

  <% if (unusedCount) { %>
  <div class="ax-actions-bar">
    <button type="button" id="media-cleanup" class="ax-btn ax-btn-danger">&#128465; <%= t('admin.media_cleanup') %> (<%= unusedCount %>)</button>
  </div>
  <% } %>

  <% if (!items.length) { %>
    <div class="ax-empty">
      <div class="ax-empty-icon">&#128247;</div>
      <p><%= t('admin.media_empty') %></p>
    </div>
  <% } else { %>
  <div class="ax-grid">
    <% items.forEach(function(it){ %>
      <div class="ax-tile media-card" data-file="<%= it.file %>">
        <div class="ax-tile-media" style="aspect-ratio:1;">
          <img src="<%= thumb(it.url, 320) %>" alt="" loading="lazy" decoding="async" style="object-fit:cover;height:100%;">
          <% if (it.hasVideo) { %><span class="ax-tile-badge ax-tile-badge-r" title="animated cover">&#127916;</span><% } %>
          <% if (!it.usedCount) { %><span class="ax-tile-badge"><%= t('admin.media_unused') %></span><% } %>
        </div>
        <div class="ax-tile-body">
          <div class="ax-tile-meta"><%= it.kb %> KB &middot; <%= it.usedCount %>&times;</div>
          <div class="ax-tile-actions">
            <button type="button" class="ax-btn ax-btn-sm" data-copy="<%= it.url %>"><%= t('admin.media_copy') %></button>
            <button type="button" class="ax-btn ax-btn-sm ax-btn-danger" data-del="<%= it.file %>">&#128465;</button>
          </div>
        </div>
      </div>
    <% }) %>
  </div>
  <% } %>
</div>

<%# Het script staat in assets/js/mod/admin-media.js; de gegevens via partials/page-data.ejs (shaer-bqr). %>
<%- include('../partials/page-data', { pageData: { copy: t('admin.media_copy'), delC: t('admin.media_del_confirm'), cleanC: t('admin.media_cleanup_confirm') } }) %>