<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Assets — <%= event.couple_names %></title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <%
    // input_20 Phase 4: load only the selected event's own theme fonts, not
    // Botanical Bloom's fonts unconditionally. showAssets() (admin
    // controller) doesn't pass the theme registry to this view, so this
    // mirrors config/themes.js's googleFonts values directly rather than
    // requiring a controller change — see the Phase 4 record in input_20.md
    // for why (edit-event.ejs, which already receives `themes`, reads
    // config/themes.js's googleFonts field instead of duplicating this).
    var assetsGoogleFontsBySlug = {
      'botanical-bloom': 'https://fonts.googleapis.com/css2?family=Beau+Rivage&family=Cormorant+Garamond:wght@400;500;600&display=swap',
      'lavender-romance': 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=DM+Sans:wght@400;500;600;700&family=Great+Vibes&display=swap',
      'lady-gianna': 'https://fonts.googleapis.com/css2?family=Great+Vibes&family=Libre+Baskerville:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap',
      // Completion patch item 2: matches config/themes.js's own Plain Card
      // googleFonts value exactly, so this shared page's heading font
      // actually matches the .bb-admin h1/h2 font-family Plain Card's own
      // theme.css now declares (edit-event.ejs already picks this up via
      // `themes.find(...)`; this file never received the theme registry,
      // hence its own separate map — see this map's original comment).
      'plain-card': 'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap',
      'custom-invitation': 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=DM+Sans:wght@400;500;600&display=swap',
    };
  %>
  <link href="<%= assetsGoogleFontsBySlug[event.theme] || assetsGoogleFontsBySlug['botanical-bloom'] %>" rel="stylesheet">
  <link rel="stylesheet" href="/assets/css/admin-shared.css">
  <link rel="stylesheet" href="/themes/<%= event.theme %>/theme.css">
</head>
<%
  // input_20 Phase 8: this file wasn't in the originally-listed set of
  // views to modify, but it's reused as-is for GET /client/assets (per
  // the audit's "reuse existing views" design) and its header nav has an
  // admin-only "All weddings" link — necessary to hide, same as every
  // dashboard's identical link, so it's changed here too, minimally.
  var isClient = typeof clientMode !== 'undefined' && clientMode;
  var basePath = isClient ? '/client' : ('/admin/events/' + event.id);
  // input_20 Phase 8: the client's gallery/cameo action routes are nested
  // under /client/assets/... (per the approved client route list), while
  // the admin's equivalents sit directly under the event base
  // (/admin/events/:id/gallery, no /assets segment) — this second base
  // path exists only because those two shapes genuinely differ, not a
  // copy/paste inconsistency.
  var assetsActionBase = isClient ? '/client/assets' : basePath;
%>
<body class="bb-admin">
  <header class="bb-admin-header">
    <div class="bb-admin-header-inner">
      <a class="bb-admin-header-title" href="<%= basePath %>"><%= event.couple_names %></a>
      <nav class="bb-admin-nav">
        <a href="<%= basePath %>#guest-list">Guest List</a>
        <a href="<%= basePath %>#wedding-details">Wedding Details</a>
        <a href="<%= basePath %>/assets" class="bb-admin-nav-active">Assets</a>
        <a href="/invite/<%= event.id %>/other-details" target="_blank">Other Details</a>
        <% if (!isClient) { %><a href="/admin/events">All weddings</a><% } %>
      </nav>
    </div>
  </header>

  <div class="bb-admin-wrap">
    <h1>Assets</h1>
    <p>Manage Gallery and Cameos photos for this wedding from one screen.</p>

    <div class="bb-admin-section bb-assets-grid">
      <div class="bb-admin-card">
        <h2>Gallery</h2>
        <p>Plain photos — no caption, shown to every guest who's entered their passcode.</p>
        <form method="POST" action="<%= assetsActionBase %>/gallery" enctype="multipart/form-data">
          <input type="file" name="photos" accept="image/png,image/jpeg,image/webp" multiple>
          <button type="submit" class="bb-btn" style="margin-top:0.75rem;">Upload Photos</button>
        </form>
        <% if (galleryPhotos.length > 0) { %>
          <div class="bb-admin-gallery-grid">
            <% galleryPhotos.forEach(function (photo) { %>
              <div class="bb-admin-gallery-item">
                <img src="<%= photo.image_url %>" alt="">
                <form method="POST" action="<%= assetsActionBase %>/gallery/<%= photo.id %>/delete" onsubmit="return confirm('Delete this photo?');">
                  <button type="submit" title="Delete photo">&times;</button>
                </form>
              </div>
            <% }) %>
          </div>
        <% } else { %>
          <p>No gallery photos uploaded yet.</p>
        <% } %>
      </div>

      <div class="bb-admin-card">
        <h2>Cameos</h2>
        <p>Photos of family/friends "who wish to be seen" — a title/caption is optional.</p>
        <!-- input_20 Phase 8: admin's route is plural (/cameos, existing);
             the client route list this phase approved is singular
             (/client/assets/cameo) — genuinely different paths, not a typo. -->
        <form method="POST" action="<%= assetsActionBase %>/<%= isClient ? 'cameo' : 'cameos' %>" enctype="multipart/form-data">
          <label>Title (optional) <input type="text" name="title" placeholder="e.g. The Best Man, or a Save-the-Date for Aisha &amp; Zuberi"></label>
          <input type="file" name="photo" accept="image/png,image/jpeg,image/webp" required style="margin-top:0.6rem;">
          <button type="submit" class="bb-btn" style="margin-top:0.75rem;">Upload Cameo</button>
        </form>
        <% if (cameoPhotos.length > 0) { %>
          <div class="bb-admin-gallery-grid">
            <% cameoPhotos.forEach(function (photo) { %>
              <div class="bb-admin-gallery-item">
                <img src="<%= photo.image_url %>" alt="<%= photo.title || '' %>">
                <% if (photo.title) { %>
                  <span class="bb-admin-gallery-caption"><%= photo.title %></span>
                <% } %>
                <form method="POST" action="<%= assetsActionBase %>/<%= isClient ? 'cameo' : 'cameos' %>/<%= photo.id %>/delete" onsubmit="return confirm('Delete this cameo?');">
                  <button type="submit" title="Delete cameo">&times;</button>
                </form>
              </div>
            <% }) %>
          </div>
        <% } else { %>
          <p>No cameos uploaded yet.</p>
        <% } %>
      </div>

      <!-- Generic, theme-agnostic second image field (Themes-plan §3):
           added for the Custom Invitation theme, but reusable by any
           future theme rather than a bespoke per-theme upload route. Most
           themes simply never reference event.background_image. -->
      <div class="bb-admin-card">
        <h2>Background Image</h2>
        <p>An optional second image some themes display behind their details page. Most themes don't use this.</p>
        <% if (event.background_image) { %>
          <div class="bb-admin-gallery-item" style="max-width:220px;">
            <img src="<%= event.background_image %>" alt="">
            <form method="POST" action="<%= assetsActionBase %>/background-image/delete" onsubmit="return confirm('Remove the background image?');">
              <button type="submit" title="Remove background image">&times;</button>
            </form>
          </div>
        <% } else { %>
          <p>No background image uploaded yet.</p>
        <% } %>
        <form method="POST" action="<%= assetsActionBase %>/background-image" enctype="multipart/form-data" style="margin-top:0.75rem;">
          <input type="file" name="backgroundImage" accept="image/png,image/jpeg,image/webp" required>
          <button type="submit" class="bb-btn" style="margin-top:0.75rem;">Upload Background Image</button>
        </form>
      </div>
    </div>
  </div>
</body>
</html>
