<%#
  Custom Invitation — cameos.ejs
  Real contract (guest.controller.js#showCameos): the render variable is
  `photos` (same name as gallery.ejs — the controller uses one shared
  variable name for both routes), not `cameos`; null until passcode is
  resolved, same as gallery.ejs. cameo_photos rows already carry
  `image_url`/`title` (this part of the package was already correct).
  `event.background_image` is a plain TEXT URL, not { url }.
%>
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= event.couple_names %> — Cameos</title>
  <link href="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" rel="stylesheet">
  <link rel="stylesheet" href="/themes/custom-invitation/theme.css">
</head>
<body class="ci-shell">
  <section class="ci-secondary-stage">
    <% if (event.background_image) { %>
      <img class="ci-details-photo" src="<%= event.background_image %>" alt="">
    <% } %>
    <div class="ci-details-wash"></div>

    <div class="ci-details-inner">
      <a class="ci-back-link" href="/invite/<%= event.id %>">&larr; Back to invitation</a>
      <header class="ci-details-header">
        <p class="ci-kicker">Featured</p>
        <h2 class="ci-serif">Cameos</h2>
      </header>

      <% if (photos === null) { %>
        <article class="ci-frost-card" style="text-align:center;">
          <p class="ci-status-msg" style="margin-bottom:1rem;"><%= typeof error !== 'undefined' && error ? error : 'Enter your passcode to view the cameos.' %></p>
          <form method="GET" action="/invite/<%= event.id %>/cameos">
            <input class="ci-input" type="text" name="passcode" placeholder="Passcode" required autocapitalize="characters" autocomplete="off">
            <button class="ci-btn ci-btn-ink" type="submit" style="width:100%;margin-top:.75rem;">View Cameos</button>
          </form>
        </article>
      <% } else if (photos.length === 0) { %>
        <p class="ci-empty-state">No cameos have been added yet.</p>
      <% } else { %>
        <div class="ci-cameo-grid">
          <% photos.forEach(function (photo) { %>
            <div class="ci-cameo-card">
              <img src="<%= photo.image_url %>" alt="" loading="lazy">
              <% if (photo.title) { %><p class="ci-serif" style="font-size:1.3rem;margin:0;"><%= photo.title %></p><% } %>
            </div>
          <% }) %>
        </div>
      <% } %>
    </div>
  </section>
</body>
</html>
