{{define "slots-inner"}}
{{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}}
{{end}}

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