<div class="card border-0 shadow-soft rounded-cg h-100 overflow-hidden event-card">
    {% if event.cover_image %}
    <img src="{{ event.cover_image.url }}" class="card-img-top" style="height: 180px; object-fit: cover;">
    {% else %}
    <div class="bg-secondary-section d-flex align-items-center justify-content-center" style="height: 180px;">
        <i class="bi bi-calendar-event text-muted opacity-25" style="font-size: 3rem;"></i>
    </div>
    {% endif %}
    <div class="card-body p-4 d-flex flex-column">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <span class="intent-badge border-0" style="background: var(--cg-sand-primary); font-size: 0.7rem;">
                {{ event.get_visibility_display }}
            </span>
            <p class="small fw-bold text-slate mb-0 opacity-75">
                {{ event.start_datetime|date:"M d" }}
            </p>
        </div>
        <h5 class="fw-bold h6 mb-2">
            <a href="{% url 'event_detail' event.id %}" class="text-slate text-decoration-none stretched-link">{{ event.title }}</a>
        </h5>
        <p class="text-muted small mb-4 line-clamp-2">{{ event.description }}</p>
        
        <div class="mt-auto">
            <div class="d-flex align-items-center gap-2 mb-4">
                <i class="bi bi-geo-alt text-muted small"></i>
                <span class="small text-muted text-truncate">{{ event.location_name }}{% if event.city %}, {{ event.city }}{% endif %}</span>
            </div>

            <div class="d-flex justify-content-between align-items-center pt-3 border-top">
                <div class="d-flex align-items-center">
                    <img src="{{ event.creator.profile.get_avatar_url }}" class="rounded-circle me-2" width="28" height="28" style="object-fit: cover;">
                    <span class="small text-muted">By {{ event.creator.first_name }}</span>
                </div>
                <div class="small text-muted">
                    <i class="bi bi-people me-1"></i> {{ event.rsvp_count }}{% if event.capacity %}/{{ event.capacity }}{% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
