{{template "layout" .}}

{{define "title"}}{{.Event.Title}} — bbq{{end}}

{{define "admin-bar"}}{{if .IsAdmin}}<div class="admin-bar">ADMIN VIEW — share the guest link: /e/{{.Event.Slug}}</div>{{end}}{{end}}

{{define "content"}}
<div class="event-header">
  <div class="event-tag">Open · {{.TotalGoing}} going</div>
  <h1 class="event-title">{{.Event.Title}}</h1>
  <div class="event-meta">
    {{if .Event.Date}}<span>&#128197; {{.Event.Date}}</span>{{end}}
    {{if .Event.Time}}<span>&#128338; {{.Event.Time}}</span>{{end}}
    {{if .Event.Location}}<span>&#128205; {{.Event.Location}}</span>{{end}}
  </div>
</div>

<div class="section-label">What's needed</div>

<div id="slots-container"
     hx-ext="sse"
     sse-connect="/e/{{.Event.Slug}}/sse"
     sse-swap="message"
     hx-swap="innerHTML settle:0.1s">
  {{template "slots-inner" .}}
</div>

<div class="section-label">Add your name</div>

<div class="claim-form-wrapper">
  <div class="form-title">I'll bring something &#8594;</div>
  <form hx-post="/e/{{.Event.Slug}}/claim"
        hx-target="#slots-container"
        hx-swap="innerHTML settle:0.1s"
        hx-on::after-request="if(event.detail.successful) this.reset()">
    <div class="form-row">
      <label>Your name</label>
      <input type="text" name="name" placeholder="e.g. Sam" required>
    </div>
    <div class="form-row">
      <label>Slot</label>
      <select name="slot_id">
        {{range .Slots}}{{if not .IsFull}}
        <option value="{{.Slot.ID}}">{{.Slot.Emoji}} {{.Slot.Name}} ({{$left := sub .Slot.MaxClaims .ClaimCount}}{{$left}} spot{{if ne $left 1}}s{{end}} left)</option>
        {{end}}{{end}}
      </select>
    </div>
    <div class="form-row">
      <label>Note (optional)</label>
      <input type="text" name="note" placeholder="e.g. bringing sparkling water + lemonade">
    </div>
    <button class="btn-submit" type="submit">Count me in &#8599;</button>
  </form>
</div>

{{if .IsAdmin}}
<div class="section-label" style="margin-top:40px">Admin: Add slot</div>
<div class="claim-form-wrapper">
  <form hx-post="/e/{{.Event.Slug}}/admin/{{.Event.AdminToken}}/slot"
        hx-target="#slots-container"
        hx-swap="innerHTML settle:0.1s"
        hx-on::after-request="if(event.detail.successful) this.reset()">
    <div class="form-row">
      <label>Emoji</label>
      <div class="emoji-pick" style="width:100%">
        <input type="text" name="emoji" placeholder="&#127829;" readonly style="border:var(--border-w) solid var(--border);background:var(--cream);padding:10px 14px;font-size:0.95rem;width:100%;">
      </div>
    </div>
    <div class="form-row">
      <label>Slot name</label>
      <input type="text" name="name" placeholder="e.g. Dessert" required>
    </div>
    <div class="form-row">
      <label>Max claims</label>
      <input type="number" name="max_claims" value="2" min="1">
    </div>
    <button class="btn-submit" type="submit">Add slot</button>
  </form>
</div>
{{end}}
{{end}}