{{define "edit-rsvp"}}
<div class="modal-backdrop" onclick="if(event.target===this)document.getElementById('edit-modal').innerHTML=''">
  <div class="modal-card">
    <div class="form-title">Edit RSVP</div>
    <form hx-put="/e/{{.Slug}}/rsvp/{{.Rsvp.ID}}"
          hx-target="#slots-container"
          hx-swap="innerHTML settle:0.1s">
      <div class="form-row">
        <label>Your name</label>
        <input type="text" name="name" value="{{.Rsvp.Name}}" required>
      </div>
      <div class="form-row">
        <label>Bringing anyone?</label>
        <input type="number" name="plus_one" value="{{.Rsvp.PlusOne}}" min="0" max="10">
      </div>
      <div class="form-row">
        <label>Note (optional)</label>
        <input type="text" name="note" value="{{.Rsvp.Note}}">
      </div>
      <button class="btn-submit" type="submit">Save</button>
      <div style="text-align:center;margin-top:12px;">
        <button type="button" class="btn-cancel" onclick="document.getElementById('edit-modal').innerHTML=''">Cancel</button>
      </div>
    </form>
  </div>
</div>
{{end}}