<div class="form-page" style="max-width:800px">
  <a href="/member/events" class="back-link"><i class="bi bi-arrow-left"></i> Back to Events</a>
  <div class="form-card">
    <h2>Create Event</h2>
    <% if (typeof error !== 'undefined' && error && error.length) { %><div class="alert alert-error"><%= error[0] %></div><% } %>
    <form action="/member/events/create" method="POST" enctype="multipart/form-data">
      <div class="form-group"><label>Event Title *</label><input type="text" name="title" required placeholder="Event name..."></div>
      <div class="form-row">
        <div class="form-group"><label>Event Type *</label>
          <select name="event_type" required>
            <option value="in-person">In-Person</option>
            <option value="virtual">Virtual</option>
            <option value="hybrid">Hybrid</option>
            <option value="webinar">Webinar</option>
            <option value="networking">Networking</option>
            <option value="workshop">Workshop</option>
          </select>
        </div>
        <div class="form-group"><label>Capacity (optional)</label><input type="number" name="capacity" placeholder="Max attendees" min="1"></div>
      </div>
      <div class="form-row">
        <div class="form-group"><label>Start Date & Time *</label><input type="datetime-local" name="start_date" required></div>
        <div class="form-group"><label>End Date & Time *</label><input type="datetime-local" name="end_date" required></div>
      </div>
      <div class="form-group"><label>Location / Venue</label><input type="text" name="location" placeholder="Venue name and address (for in-person/hybrid)"></div>
      <div class="form-group"><label>Virtual Meeting Link</label><input type="url" name="virtual_link" placeholder="https://zoom.us/... (for virtual/hybrid)"></div>
      <div class="form-group"><label>Short Description</label><input type="text" name="short_description" placeholder="One-line summary..." maxlength="500"></div>
      <div class="form-group"><label>Full Description</label><textarea name="description" rows="6" placeholder="Describe your event in detail..."></textarea></div>
      <div class="form-group"><label>Banner Image</label><input type="file" name="banner" accept="image/*"><small class="form-help">Recommended: 1200×600px, JPG or PNG.</small></div>
      <div class="form-row">
        <div class="form-group"><label>Ticket Price</label><input type="number" name="ticket_price" placeholder="0.00" min="0" step="0.01"></div>
        <div class="form-group"><label>Free Event?</label>
          <select name="is_free">
            <option value="true">Yes — Free</option>
            <option value="false">No — Paid</option>
          </select>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group"><label>Registration Deadline</label><input type="datetime-local" name="registration_deadline"></div>
        <div class="form-group"><label>Members Only?</label>
          <select name="is_members_only">
            <option value="false">No — Open to all</option>
            <option value="true">Yes — Members only</option>
          </select>
        </div>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary"><i class="bi bi-calendar-plus-fill"></i> Create & Publish Event</button>
        <a href="/member/events" class="btn btn-ghost">Cancel</a>
      </div>
    </form>
  </div>
</div>
