<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Add Event — Weddings 103</title>
</head>
<body>
  <h1>Add Event</h1>
  <% if (error) { %>
    <p style="color: red;"><%= error %></p>
  <% } %>
  <form method="POST" action="/admin/events">
    <label>Event type
      <select name="eventType" id="eventType">
        <% eventTypes.forEach(function (t) { %>
          <option value="<%= t.slug %>" data-title-label="<%= t.titleLabel %>" <%= t.slug === 'wedding' ? 'selected' : '' %>><%= t.label %></option>
        <% }) %>
      </select>
    </label><br>
    <label><span id="coupleNamesLabel">Couple names</span> <input type="text" name="coupleNames" required></label><br>
    <label>Subtitle <input type="text" name="subtitle" placeholder="e.g. is turning TWO!"></label><br>
    <label>Wedding date <input type="date" name="weddingDate" required></label><br>
    <label>Time note <input type="text" name="eventTimeNote" placeholder="e.g. Starting 10:00am till Late"></label><br>
    <label>Venue <input type="text" name="venue" required></label><br>
    <label>Theme color <input type="color" name="themeColor" value="#8a6d3b"></label><br>
    <label>Accept button text <input type="text" name="acceptButtonText" placeholder="Accept with pleasure"></label><br>
    <label>Decline button text <input type="text" name="declineButtonText" placeholder="Decline with regret"></label><br>
    <label>Decline message <textarea name="declineMessage" rows="3" cols="50" placeholder="Thank you for letting us know. You are always welcome — if your plans change, we'd love to have you with us."></textarea></label><br>
    <label>Footer note <textarea name="footerNote" rows="2" cols="50" placeholder="A short quote and/or closing note."></textarea></label><br>
    <label>Theme
      <select name="theme" id="theme">
        <% themes.forEach(function (t) { %>
          <option value="<%= t.slug %>" data-event-type="<%= t.eventType %>"><%= t.label %></option>
        <% }) %>
      </select>
    </label><br>
    <label>Access mode
      <select name="accessMode">
        <% accessModes.forEach(function (m) { %>
          <option value="<%= m.slug %>" <%= m.slug === 'closed' ? 'selected' : '' %>><%= m.label %></option>
        <% }) %>
      </select>
    </label><br>
    <button type="submit">Create Event</button>
  </form>
  <p><a href="/admin/events">&larr; Back to events</a></p>

  <!-- input_20 Phase 4: was an inline copy of the same script as
       edit-event.ejs (input_15 §A6 filtering, input_20 Phase 1 label swap)
       — now shared, see public/assets/js/theme-filter.js. -->
  <script src="/assets/js/theme-filter.js"></script>
</body>
</html>
