source: Klonkt/src/views/pages/admin-playlists.ejs@ daa8eb8

<%
// Admin: Playlists management
// Shows all playlists for current site, with new/edit/delete actions.
// The editor itself is the same modal that's used from the post-editor.
const _csrf = (typeof csrfToken !== 'undefined' && csrfToken) || '';
%>
<%# De gedeelde ax-*-primitieven. MOET boven het eigen style-blok van deze
    pagina staan: wat hieronder blijft staan wijkt bewust af en hoort dus
    later te komen, anders wint de partial ervan. %>
<%- include('../partials/admin-styles') %>
<div class="container ax-page">

  <%- include('../partials/admin-back') %>
  <%- include('../partials/media-tabs', { active: 'playlists', audioOn: true }) %>
  <header class="ax-header">
    <div>
      <h1><%= t('apl.title') %></h1>
      <p class="ax-tagline">
        <%= t('apl.tagline_pre') %> <code>[[playlist:&lt;id&gt;]]</code><%= t('apl.tagline_post') %>
      </p>
    </div>
  </header>

  <%# Sticky-on-mobile create button — easier reach than a header button. %>
  <div class="ax-actions-bar">
    <button type="button" class="ax-btn ax-btn-primary" id="pl-new-btn">
      ＋ <%= t('apl.new_playlist') %>
    </button>
  </div>

  <% if (!playlists.length) { %>
    <div class="ax-card">
      <div class="ax-empty">
        <div class="ax-empty-icon">📃</div>
        <p><%= t('apl.none') %></p>
        <p class="ax-empty-sub"><%= t('apl.none_sub') %></p>
      </div>
    </div>
  <% } else { %>
    <%
      // Pre-fetch loop labels (defensive — keep `t` calls out of the loop body).
      var _aplPlaylist = t('apl.pill_playlist');
      var _aplAlbum    = t('apl.pill_album');
      var _aplTrack    = t('apl.track');
      var _aplTracks   = t('apl.tracks');
      var _aplCopy     = t('apl.copy_click');
      var _aplEdit     = t('apl.edit');
      var _aplDelete   = t('apl.delete');
    %>
    <ul class="ax-list">
      <% playlists.forEach(function(p) { %>
        <li class="ax-track" data-id="<%= p.id %>">
          <div class="ax-track-cover" <%- p.cover ? `style="background-image:url('${p.cover}'); background-size:cover; background-position:center"` : '' %>>
            <% if (!p.cover) { %><span><%= p.kind === 'playlist' ? '📃' : '💿' %></span><% } %>
          </div>

          <div class="ax-track-meta">
            <div class="ax-track-title">
              <%= p.title %>
              <span class="ax-pill"><%= p.kind === 'playlist' ? '📃 ' + _aplPlaylist : '💿 ' + _aplAlbum %></span>
            </div>
            <div class="ax-track-sub">
              <span><%= p.track_count %> <%= p.track_count === 1 ? _aplTrack : _aplTracks %></span>
              <% if (p.artist) { %><span class="ax-track-sep">·</span><span><%= p.artist %></span><% } %>
              <% if (p.year) { %><span class="ax-track-sep">·</span><span><%= p.year %></span><% } %>
            </div>
            <code class="ax-embed" data-copy="[[playlist:<%= p.id %>]]" title="<%= _aplCopy %>">[[playlist:<%= p.id %>]]</code>
          </div>

          <div class="ax-track-actions">
            <button type="button" class="ax-icon-btn" data-pl-edit data-id="<%= p.id %>" aria-label="<%= _aplEdit %>" title="<%= _aplEdit %>">✎</button>
            <button type="button" class="ax-icon-btn ax-icon-btn-danger" data-pl-delete data-id="<%= p.id %>" data-title="<%= p.title %>" aria-label="<%= _aplDelete %>" title="<%= _aplDelete %>">🗑</button>
          </div>
        </li>
      <% }); %>
    </ul>
  <% } %>

</div>

<%# Editor modal lives in its own partial so the post-editor can include it too %>
<%- include('../partials/playlist-editor', { csrfToken: _csrf }) %>

<style>
/* Re-use the admin-audio (.ax-*) primitives. Define them here too so this
   page is self-contained — both pages get refreshed independently. */

.ax-page { max-width: 880px; margin: 1.5rem auto 4rem; padding: 0 1rem; }
.ax-btn-primary:hover { opacity: 0.92; }
.ax-track-cover {
  width: 64px; height: 64px; border-radius: 8px;
  background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display, serif);
  font-size: 1.5rem; color: var(--accent);
  flex-shrink: 0;
}

/* ─── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
}
</style>

<%# Het script staat in assets/js/mod/admin-playlists.js; de gegevens via partials/page-data.ejs (shaer-bqr). %>
<%- include('../partials/page-data', { pageData: { csrf: _csrf, copied: t('apl.copied'), delConfirm: t('apl.delete_confirm'), delFailed: t('apl.delete_failed') } }) %>