<div class="subcard {% if response and activity.id in response.rsvp.selected_activities_ids %}bg-green attending{% endif %}" id="activity-{{activity.id}}">
  <div class="media-row">
    <div class="media-content">
      <h3>{{ activity.title }} {% if activity.remaining_capacity <= 0 %}<span class="badge bg-orange">FULL</span>{% endif %}{% if activity.is_locked %}<span class="badge bg-red">LOCKED</span>{% endif %}</h3>

        <div class="subcard {% if response and activity.id in response.rsvp.selected_activities_ids %}bg-green attending{% endif %}">
            <h4>📖 About</h4>
            <p>{{ activity.markdown|safe }}</p>
        </div>

        <div class="subcard {% if response and activity.id in response.rsvp.selected_activities_ids %}bg-green attending{% endif %}">
            <h4>🕙 When</h4>
            <p>
                {{ activity.start_time|date:"DATETIME_FORMAT" }}
                {% if activity.end_time %}
                    – {{ activity.end_time|date:"TIME_FORMAT" }}
                {% endif %}
            </p>
        </div>

        <div class="subcard {% if response and activity.id in response.rsvp.selected_activities_ids %}bg-green attending{% endif %}">
            <h4>📍Where</h4>
            <p>
                {{ activity.location }}
            </p>
        </div>

        <div class="subcard {% if response and activity.id in response.rsvp.selected_activities_ids %}bg-green attending{% endif %}">
            <h4>👥Capacity</h4>
            {% if activity.guest_limit %}
                <p>
                    Places remaining:
                    <span class="numcap">{{ activity.remaining_capacity }}</span> / {{ activity.guest_limit }}
                </p>
            {% else %}
                <p>
                    People going:
                    <span class="numatt">{{ activity.attendee_count }}</span>
                </p>
            {% endif %}
        </div>

        <div class="subcard {% if response and activity.id in response.rsvp.selected_activities_ids %}bg-green attending{% endif %}">
            <h4>🚶‍➡️Attendees:</h4>
            <span class="stratt">
                {% for guest_list in activity.attendee_list %}
                    <span class="badge bg-blue">
                    {{ guest_list|join:", " }}
                    </span>
                {% endfor %}
            </span>
            </div>
        </div>

    {% load static %}
    <img class="thumbnail" src="{% static activity.static_image_url %}" alt="{{ activity.title }} image">
  </div>
</div>