<div class="card" id="rsvp-guest">
    <h3>Who is coming to {{ event.title }}?</h3>

    {% for guest in guests %}
    <div class="subcard">
        <div class="button-row">
            {{ guest.name }} <span class="badge">{{ guest.age_group }}</span>

            <div class="button-row-right">
            {% if not guest.is_main_invitee %}
                
                    <button class="bg-red"
                        hx-delete="{% url 'events:rsvp-delete-guest' rsvp.id guest.id %}"
                        hx-target="#rsvp-guest"
                        hx-swap="outerHTML"
                    >Delete</button>
            {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}

    {% if space_for_extra_guest %}
    <div class="subcard" id="rsvp-guest-add">
        <h4>Add guest <span class="badge bg-orange">Last names are not shown to other people</span></h4>
        <form method="post" hx-post="{% url 'events:rsvp-post-guest' rsvp.id %}"
            hx-target="#rsvp-guest"
            hx-swap="outerHTML"
            class="horizontal-form">
            {% csrf_token %}
            {{ form.as_p }}
            <button type="submit">Add guest</button>
        </form>
    </div>
    {% else %}
    <div class="subcard bg-red">
        <h4>Add guest</h4>
        <p>There is no space left in some of your selected activities.</p>
    </div>
    {% endif %}
</div>