{{define "slots-inner"}}
<div class="section-label">What's needed</div>
<div class="slots-grid">
{{range .Slots}}
<div class="slot-card{{if .IsFull}} full{{end}}">
  <div class="slot-info">
    <div class="slot-name">{{.Slot.Emoji}} {{.Slot.Name}}</div>
    <div class="slot-claims">
      {{if .Claims}}
        {{range .Claims}}
        <span class="claim-chip">
          {{.Name}}{{if .Note}} <small style="color:#888">({{.Note}})</small>{{end}}
          <button hx-delete="/e/{{$.Event.Slug}}/claim/{{.ID}}"
                  hx-target="#slots-container"
                  hx-swap="innerHTML settle:0.1s"
                  hx-confirm="Remove {{.Name}}?"
                  title="Remove">&#215;</button>
        </span>
        {{end}}
      {{else}}
        <span class="nobody">nobody yet</span>
      {{end}}
    </div>
    <div class="progress-bar">
      <div class="progress-fill{{if .IsFull}} full{{end}}" style="width:{{.Pct}}%"></div>
    </div>
  </div>
  <div class="slot-right">
    <span class="slot-count{{if .IsFull}} warn{{end}}">{{.ClaimCount}} / {{.Slot.MaxClaims}}{{if .IsFull}} &#10003;{{end}}</span>
  </div>
</div>
{{end}}
</div>

<div class="section-label">Going ({{.TotalGoing}})</div>
<div class="rsvp-list">
  {{if .GoingList}}
    {{range .GoingList}}
    <span class="claim-chip">
      {{.Name}}{{if .Note}} <small style="color:#888">({{.Note}})</small>{{end}}
      {{if gt .RsvpID 0}}
      <button hx-delete="/e/{{$.Event.Slug}}/rsvp/{{.RsvpID}}"
              hx-target="#slots-container"
              hx-swap="innerHTML settle:0.1s"
              hx-confirm="Remove {{.Name}}?"
              title="Remove">&#215;</button>
      {{end}}
    </span>
    {{end}}
  {{else}}
    <span class="nobody">no one yet</span>
  {{end}}
</div>
{{end}}

{{define "slots.html"}}{{template "slots-inner" .}}{{end}}