{{template "layout" .}}

{{define "title"}}bbq — create a potluck{{end}}

{{define "content"}}
<div class="event-header">
  <div class="event-tag">New event</div>
  <h1 class="event-title">Create a potluck</h1>
  <p style="font-family:'DM Mono',monospace;font-size:0.8rem;color:#555;margin-top:8px;">
    Set up what's needed and share the link. No sign-up required.
  </p>
</div>

<div class="claim-form-wrapper">
  <form method="POST" action="/events">
    <div class="form-row">
      <label>Event name</label>
      <input type="text" name="title" placeholder="e.g. Prospect Park Summer Picnic" required>
    </div>
    <div class="form-row">
      <label>Date</label>
      <input type="text" name="date" placeholder="e.g. Saturday, June 14">
    </div>
    <div class="form-row">
      <label>Time</label>
      <input type="text" name="time" placeholder="e.g. 2:00 PM">
    </div>
    <div class="form-row">
      <label>Location</label>
      <input type="text" name="location" placeholder="e.g. Long Meadow, entrance at 9th St">
    </div>

    <div class="section-label" style="margin:24px 0 16px">Slots</div>

    <div id="slot-rows">
      <div class="slot-row" style="display:flex;gap:8px;margin-bottom:12px;">
        <div class="emoji-pick">
          <input type="text" name="slot_emoji" placeholder="&#127834;" readonly style="border:var(--border-w) solid var(--border);background:var(--cream);padding:10px;font-size:0.95rem;">
        </div>
        <input type="text" name="slot_name" placeholder="Slot name" style="flex:1;border:var(--border-w) solid var(--border);background:var(--cream);padding:10px;font-family:'Bricolage Grotesque',sans-serif;font-size:0.95rem;">
        <input type="number" name="slot_max" value="2" min="1" style="width:60px;border:var(--border-w) solid var(--border);background:var(--cream);padding:10px;font-size:0.95rem;text-align:center;">
      </div>
    </div>

    <button type="button" onclick="addSlotRow()" class="btn-claim" style="margin-bottom:20px;">+ Add slot</button>

    <button class="btn-submit" type="submit">Create event &#8599;</button>
  </form>
</div>

<script>
function addSlotRow() {
  const container = document.getElementById('slot-rows');
  const row = document.createElement('div');
  row.className = 'slot-row';
  row.style.cssText = 'display:flex;gap:8px;margin-bottom:12px;';
  row.innerHTML = `
    <div class="emoji-pick">
      <input type="text" name="slot_emoji" placeholder="\u{1F356}" readonly style="border:var(--border-w) solid var(--border);background:var(--cream);padding:10px;font-size:0.95rem;">
    </div>
    <input type="text" name="slot_name" placeholder="Slot name" style="flex:1;border:var(--border-w) solid var(--border);background:var(--cream);padding:10px;font-family:'Bricolage Grotesque',sans-serif;font-size:0.95rem;">
    <input type="number" name="slot_max" value="2" min="1" style="width:60px;border:var(--border-w) solid var(--border);background:var(--cream);padding:10px;font-size:0.95rem;text-align:center;">
  `;
  container.appendChild(row);
  initEmojiPickers();
}
</script>
{{end}}