{% if not activity.is_locked %}
<div class="subcard cursor {% if activity.id in selected_activities %}bg-green attending{% elif activity.remaining_capacity < rsvp.guest_count %}bg-gray bd-gray{% endif %}"
    hx-post="{% url 'events:rsvp-post-activity' rsvp.id activity.id %}"
    hx-target="#rsvp-activity"
    hx-swap="outerHTML"

    id="activity-{{activity.id}}"
>
    <h3>{{ activity.title }} <span class="full-warning badge bg-orange {% if activity.remaining_capacity > 0 %}hidden{% endif %}">FULL</span></h3>

    <p>
        🕙
        {{ activity.start_time|date:"DATETIME_FORMAT" }}
        {% if activity.end_time %}
            – {{ activity.end_time|date:"TIME_FORMAT" }}
        {% endif %}
    </p>

    <p>
        📍{{ activity.location }}
    </p>

    {% if activity.guest_limit %}
        <p>
            👥Places remaining:
            <span class="numcap">{{ activity.remaining_capacity }}</span> / {{ activity.guest_limit }} 
            <span class="space-warning badge bg-red {% if activity.id in selected_activities or activity.remaining_capacity >= rsvp.guest_count %}hidden{% endif %}">Not enough space for {{rsvp.guest_count}} people</span>
        </p>
    {% else %}
        <p>
            👥People going:
            <span class="numatt">{{ activity.attendee_count }}</span>
        </p>
    {% endif %}

    <span class="stratt">
        {% for guest_list in activity.attendee_list %}
            <span class="badge bg-blue">
            {{ guest_list|join:", " }}
            </span>
        {% endfor %}
        {% if activity.attendee_list|length == 0 %}
            <p>🚶‍➡️No-one is coming yet</p>
        {% endif %}
    </span>
</div>
{% else %}
<div class="subcard {% if activity.id in selected_activities %}bg-green attending{% endif %}">
    <h3>{{ activity.title }} <span class="badge bg-red">LOCKED</span></h3>
</div>
{% endif %}