`views/admin/ops-watch.ejs`

103 lines
<%- include('../partials/head', { title, admin: true }) %>
<%- include('partials/admin-header') %>

<section class="admin-main">
  <header class="admin-page-head">
    <h1>Ops · /watch curation</h1>
    <p class="muted">Hand-picked YouTube videos for the public <a href="/watch" target="_blank" rel="noopener noreferrer">/watch</a> page. Every entry must be reviewed before publish.</p>
  </header>

  <% if (flash && flash.error) { %><div class="callout callout-warn"><%= flash.error %></div><% } %>
  <% if (flash && flash.ok) { %><div class="callout callout-ok"><%= flash.ok %></div><% } %>

  <section class="admin-section">
    <h2 style="margin-bottom:8px">Add a video</h2>
    <p class="muted" style="margin-bottom:16px;font-size:13px">Paste any YouTube URL (watch / embed / youtu.be / shorts) or bare video ID. Stages as unpublished — review before flipping live.</p>
    <form method="post" action="/admin/ops/watch" class="profile-form">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <label>YouTube URL or ID *
        <input type="text" name="youtube_url" required placeholder="https://www.youtube.com/watch?v=...">
      </label>
      <label>Title *
        <input type="text" name="title" required placeholder="How a hand-painted silk panel goes up · Fromental London">
      </label>
      <div class="row3">
        <label>Channel name
          <input type="text" name="channel_name" placeholder="Fromental London">
        </label>
        <label>Channel URL
          <input type="url" name="channel_url" placeholder="https://www.youtube.com/@fromentallondon">
        </label>
        <label>Category *
          <select name="category" required>
            <% categories.forEach(function(c){ %>
              <option value="<%= c %>"><%= c.replace(/_/g, ' ') %></option>
            <% }); %>
          </select>
        </label>
      </div>
      <label>Description
        <textarea name="description" rows="2" maxlength="600" placeholder="What this video shows — one sentence."></textarea>
      </label>
      <div class="row3">
        <label>Brands (comma-sep)
          <input type="text" name="brands" placeholder="de Gournay, Fromental">
        </label>
        <label>Materials (comma-sep)
          <input type="text" name="materials" placeholder="silk, hand_painted">
        </label>
        <label>License note
          <input type="text" name="license_note" placeholder="Standard YouTube embed">
        </label>
      </div>
      <button type="submit" class="btn btn-primary">Stage video</button>
    </form>
  </section>

  <section class="admin-section">
    <h2>Library (<%= videos.length %>)</h2>
    <% if (!videos.length) { %>
      <div class="empty-state">No videos yet. Paste a URL above to start the curated list.</div>
    <% } else { %>
      <table class="data-table">
        <thead><tr><th>Status</th><th>Preview</th><th>Title / channel</th><th>Category</th><th>Added</th><th>Actions</th></tr></thead>
        <tbody>
        <% videos.forEach(function(v){ %>
          <tr>
            <td>
              <% if (v.is_published) { %>
                <span class="status-badge deposit-paid">PUBLISHED</span>
              <% } else { %>
                <span class="status-badge deposit-requires_payment">DRAFT</span>
              <% } %>
            </td>
            <td style="width:140px">
              <a href="https://www.youtube.com/watch?v=<%= v.youtube_id %>" target="_blank" rel="noopener" style="display:block">
                <img src="https://i.ytimg.com/vi/<%= v.youtube_id %>/mqdefault.jpg" alt="" style="width:120px;border:1px solid var(--border)">
              </a>
            </td>
            <td>
              <strong><%= v.title %></strong>
              <% if (v.channel_name) { %><br><span class="muted" style="font-size:12px"><%= v.channel_name %></span><% } %>
              <% if (v.description) { %><br><span class="muted" style="font-size:12px"><%= v.description.slice(0, 140) %></span><% } %>
            </td>
            <td><%= v.category.replace(/_/g, ' ') %></td>
            <td><span class="muted" style="font-size:12px"><%= new Date(v.added_at).toLocaleDateString() %><br>by <%= v.added_by || '—' %></span></td>
            <td class="actions">
              <% if (!v.is_published) { %>
                <form method="post" action="/admin/ops/watch/<%= v.id %>/publish" class="inline-form"><input type="hidden" name="_csrf" value="<%= csrfToken %>"><button class="btn btn-primary btn-sm">Publish</button></form>
              <% } else { %>
                <form method="post" action="/admin/ops/watch/<%= v.id %>/unpublish" class="inline-form"><input type="hidden" name="_csrf" value="<%= csrfToken %>"><button class="btn btn-ghost btn-sm">Unpublish</button></form>
              <% } %>
              <form method="post" action="/admin/ops/watch/<%= v.id %>/delete" class="inline-form" onsubmit="return confirm('Remove this video permanently?')"><input type="hidden" name="_csrf" value="<%= csrfToken %>"><button class="btn btn-ghost btn-sm" style="color:#c44646">Delete</button></form>
            </td>
          </tr>
        <% }); %>
        </tbody>
      </table>
    <% } %>
  </section>
</section>

<%- include('../partials/footer') %>