<%- include('../partials/header', { title }) %>

<div class="admin-page-head">
  <h2><%= event ? 'Edit Event' : 'Add Event' %></h2>
  <a href="/admin/events" class="btn btn-outline btn-sm">← Back to Events</a>
</div>

<form action="<%= event ? `/admin/events/${event.id}` : '/admin/events' %>" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="_csrf" value="<%= csrfToken %>" />

  <div class="admin-form-grid">
    <div class="admin-panel">
      <h3>Event Details</h3>
      <div class="field-row">
        <div class="field">
          <label for="title">Title</label>
          <input id="title" name="title" type="text" required value="<%= event?.title || '' %>" data-slug-source="slug" />
        </div>
        <div class="field">
          <label for="slug">URL slug</label>
          <input id="slug" name="slug" type="text" value="<%= event?.slug || '' %>" />
        </div>
      </div>
      <div class="field">
        <label for="description">Description <span class="hint">(blank lines become paragraph breaks)</span></label>
        <textarea id="description" name="description" rows="5"><%= event?.description || '' %></textarea>
      </div>
      <div class="field">
        <label for="location">Location</label>
        <input id="location" name="location" type="text" value="<%= event?.location || '' %>" placeholder="e.g. San Francisco, CA" />
      </div>
      <div class="field-row">
        <div class="field">
          <label for="startsAt">Starts at</label>
          <input id="startsAt" name="startsAt" type="datetime-local" required value="<%= event?.starts_at ? new Date(event.starts_at).toISOString().slice(0,16) : '' %>" />
        </div>
        <div class="field">
          <label for="endsAt">Ends at <span class="hint">(optional)</span></label>
          <input id="endsAt" name="endsAt" type="datetime-local" value="<%= event?.ends_at ? new Date(event.ends_at).toISOString().slice(0,16) : '' %>" />
        </div>
      </div>
    </div>

    <div>
      <div class="admin-panel">
        <h3>Publishing</h3>
        <div class="field">
          <label for="status">Status</label>
          <select id="status" name="status">
            <% ['upcoming','past','cancelled'].forEach(function(s) { %>
              <option value="<%= s %>" <%= (event?.status || 'upcoming') === s ? 'selected' : '' %>><%= s %></option>
            <% }); %>
          </select>
        </div>
        <div class="field">
          <label for="capacity">Capacity <span class="hint">(optional)</span></label>
          <input id="capacity" name="capacity" type="number" min="0" value="<%= event?.capacity || '' %>" />
        </div>
        <div class="checkbox-field">
          <input id="isVirtual" name="isVirtual" type="checkbox" value="1" <%= event?.is_virtual ? 'checked' : '' %> />
          <label for="isVirtual">Virtual event</label>
        </div>
      </div>

      <div class="admin-panel">
        <h3>Cover Image</h3>
        <div class="image-preview" id="cover-preview">
          <% if (event?.cover_image_path) { %><img src="<%= event.cover_image_path %>" alt="" /><% } else { %><span>No cover image</span><% } %>
        </div>
        <input type="file" name="coverImage" accept="image/*" data-image-input="cover-preview" />
      </div>
    </div>
  </div>

  <div class="form-sticky-actions">
    <button class="btn btn-primary" type="submit">Save Event</button>
    <a href="/admin/events" class="btn btn-outline">Cancel</a>
  </div>
</form>

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