<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Edit — <%= 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 a hardcoded union of every theme's fonts.
    var currentTheme = themes.find(function (t) { return t.slug === event.theme; });
  %>
  <% if (currentTheme && currentTheme.googleFonts) { %>
    <link href="<%= currentTheme.googleFonts %>" 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: a client can never change event type (fixed at
  // approval time) or access mode (admin-only) — both fields are hidden
  // entirely below, not just visually de-emphasized, and the server-side
  // stripping in admin.controller.js's updateEventCore is the actual
  // guard regardless of what this view does or doesn't show.
  var isClient = typeof clientMode !== 'undefined' && clientMode;
  var basePath = isClient ? '/client' : ('/admin/events/' + event.id);
  var currentEventType = eventTypes.find(function (t) { return t.slug === event.event_type; });
%>
<body class="bb-admin">
  <div class="bb-admin-wrap">
    <p class="bb-admin-back"><a href="<%= basePath %>">&larr; Back to <%= event.couple_names %></a></p>
    <h1>Edit Event</h1>
    <% if (typeof error !== 'undefined' && error) { %>
      <p class="bb-error"><%= error %></p>
    <% } %>
    <form method="POST" action="<%= basePath %>" enctype="multipart/form-data">
      <div class="bb-details-grid">
        <% if (!isClient) { %>
          <div class="bb-admin-tile">
            <label>Event type</label>
            <select name="eventType" id="eventType">
              <% eventTypes.forEach(function (t) { %>
                <option value="<%= t.slug %>" data-title-label="<%= t.titleLabel %>" <%= event.event_type === t.slug ? 'selected' : '' %>><%= t.label %></option>
              <% }) %>
            </select>
          </div>
        <% } %>
        <div class="bb-admin-tile">
          <label id="coupleNamesLabel"><%= currentEventType ? currentEventType.titleLabel : 'Couple names' %></label>
          <input type="text" name="coupleNames" value="<%= event.couple_names %>" required>
        </div>
        <div class="bb-admin-tile">
          <label>Subtitle</label>
          <input type="text" name="subtitle" value="<%= event.subtitle || '' %>" placeholder="e.g. is turning TWO!">
        </div>
        <div class="bb-admin-tile">
          <label><%= currentEventType ? currentEventType.dateLabel : 'Wedding date' %><% if (!event.wedding_date) { %> <span style="font-weight:normal;">(not set yet — required before this event can go live)</span><% } %></label>
          <input type="date" name="weddingDate" value="<%= event.wedding_date || '' %>">
        </div>
        <div class="bb-admin-tile">
          <label>Time note</label>
          <input type="text" name="eventTimeNote" value="<%= event.event_time_note || '' %>" placeholder="e.g. Starting 10:00am till Late">
        </div>
        <div class="bb-admin-tile">
          <label>Venue</label>
          <input type="text" name="venue" value="<%= event.venue %>" required>
        </div>
        <div class="bb-admin-tile">
          <label>Theme</label>
          <select name="theme" id="theme">
            <%
              // input_20 Phase 8: a client's options are restricted
              // server-side to themes belonging to their own (fixed) event
              // type — same themesForEventType-style filter this app
              // already uses elsewhere, just applied to the option list
              // itself instead of client-side JS, since there's no
              // eventType select here for that JS to react to in client
              // mode. updateEventCore independently re-validates this
              // regardless of what the rendered options are.
              var themeOptions = isClient ? themes.filter(function (t) { return t.eventType === event.event_type; }) : themes;
            %>
            <% themeOptions.forEach(function (t) { %>
              <option value="<%= t.slug %>" data-event-type="<%= t.eventType %>" <%= event.theme === t.slug ? 'selected' : '' %>><%= t.label %></option>
            <% }) %>
          </select>
        </div>
        <% if (!isClient) { %>
          <div class="bb-admin-tile bb-tile-wide">
            <label>Access mode</label>
            <select name="accessMode">
              <% accessModes.forEach(function (m) { %>
                <option value="<%= m.slug %>" <%= event.access_mode === m.slug ? 'selected' : '' %>><%= m.label %></option>
              <% }) %>
            </select>
          </div>
        <% } %>
        <div class="bb-admin-tile">
          <label>Theme color</label>
          <input type="color" name="themeColor" value="<%= event.theme_color %>">
        </div>
        <div class="bb-admin-tile">
          <label>Accept button text</label>
          <input type="text" name="acceptButtonText" value="<%= event.accept_button_text %>">
        </div>
        <div class="bb-admin-tile">
          <label>Decline button text</label>
          <input type="text" name="declineButtonText" value="<%= event.decline_button_text %>">
        </div>

        <div class="bb-admin-tile">
          <label>Card image</label>
          <% if (event.card_image) { %>
            <a class="bb-admin-thumb" href="<%= event.card_image %>" target="_blank" title="View full image">
              <img src="<%= event.card_image %>" alt="Current card">
            </a>
          <% } %>
          <input type="file" name="cardImage" accept="image/png,image/jpeg,image/webp">
        </div>

        <div class="bb-admin-tile bb-tile-wide">
          <label>Decline message</label>
          <textarea name="declineMessage"><%= event.decline_message %></textarea>
        </div>
        <div class="bb-admin-tile bb-tile-wide">
          <label>Invitation message</label>
          <textarea name="invitationMessage" placeholder="A personal note from the couple to their guests."><%= event.invitation_message || '' %></textarea>
        </div>
        <div class="bb-admin-tile bb-tile-wide">
          <label>Itinerary</label>
          <textarea name="itinerary" placeholder="One item per line, e.g.&#10;4:00 PM - Ceremony&#10;5:30 PM - Cocktail hour&#10;7:00 PM - Reception"><%= event.itinerary || '' %></textarea>
        </div>
        <div class="bb-admin-tile bb-tile-wide">
          <label>Contact details</label>
          <textarea name="contactDetails" placeholder="How guests can reach the couple, e.g. phone/email."><%= event.contact_details || '' %></textarea>
        </div>
        <div class="bb-admin-tile bb-tile-wide">
          <label>Footer note</label>
          <textarea name="footerNote" placeholder="A short quote and/or closing note."><%= event.footer_note || '' %></textarea>
        </div>
        <div class="bb-admin-tile">
          <label>Invitation heading</label>
          <input type="text" name="invitationHeading" value="<%= event.invitation_heading || '' %>" placeholder="e.g. For the day, and all that follows">
        </div>
        <div class="bb-admin-tile bb-tile-wide">
          <label>Dress code note</label>
          <textarea name="dressCodeNote" placeholder="e.g. Garden formal — soft colors welcome."><%= event.dress_code_note || '' %></textarea>
        </div>
        <div class="bb-admin-tile bb-tile-wide">
          <label>Accessibility note</label>
          <textarea name="accessibilityNote" placeholder="e.g. Step-free entrance available at the west door."><%= event.accessibility_note || '' %></textarea>
        </div>
      </div>
      <button type="submit" class="bb-btn" style="margin-top:1.25rem;">Save Changes</button>
    </form>
  </div>

  <% if (!isClient) { %>
    <!-- input_20 Phase 4: was an inline copy of the same script as
         event-form.ejs (input_15 §A6 filtering, input_20 Phase 1 label swap)
         — now shared, see public/assets/js/theme-filter.js.
         input_20 Phase 8: never loaded in client mode — that script expects
         an #eventType select, which client mode doesn't render (a client's
         event type never changes), and the theme options are already
         server-side restricted to the client's own type above, so there is
         nothing left for it to filter. -->
    <script src="/assets/js/theme-filter.js"></script>
  <% } %>
</body>
</html>
