{{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}}{{if .Capped}} / {{.Event.AttendeeCap}}{{end}})</div>
<div class="rsvp-list">
  {{if .GoingList}}
    {{range .GoingList}}
    <span class="claim-chip">
      {{if and (gt .RsvpID 0) $.CanEditRsvps}}<span class="rsvp-name-link"
        hx-get="/e/{{$.Event.Slug}}/rsvp/{{.RsvpID}}/edit"
        hx-target="#edit-modal"
        hx-swap="innerHTML">{{.Name}}</span>{{else}}{{.Name}}{{end}}{{if gt .PlusOne 0}} +{{.PlusOne}}{{end}}{{if .Note}} <small style="color:#888">({{.Note}})</small>{{end}}
      {{if and (gt .RsvpID 0) $.CanEditRsvps}}
      <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>

{{if .NotGoingList}}
<div class="section-label">Can't make it ({{len .NotGoingList}})</div>
<div class="rsvp-list">
  {{range .NotGoingList}}
  <span class="claim-chip" style="opacity:0.6">
    {{if $.CanEditRsvps}}<span class="rsvp-name-link"
      hx-get="/e/{{$.Event.Slug}}/rsvp/{{.RsvpID}}/edit"
      hx-target="#edit-modal"
      hx-swap="innerHTML">{{.Name}}</span>{{else}}{{.Name}}{{end}}{{if .Note}} <small style="color:#888">({{.Note}})</small>{{end}}
    {{if $.CanEditRsvps}}
    <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}}
</div>
{{end}}
{{end}}

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