{% for profile in page_obj.object_list %}
<div class="col-md-6 col-lg-4 creator-item">
    <div class="card creator-card h-100 shadow-sm position-relative">
        {% if profile.profile_image %}
            <img src="{{ profile.profile_image.url }}" 
                 class="card-img-top creator-img" 
                 alt="{{ profile.display_name }}">
        {% else %}
            <div class="bg-light d-flex align-items-center justify-content-center creator-img text-muted">
                <i class="fas fa-user fa-5x"></i>
            </div>
        {% endif %}

        {% if profile.engagement_score > 85 or profile.is_verified %}
            <span class="trending-badge">
                <i class="fas fa-fire"></i> 
                {% if profile.engagement_score > 85 %}VIRAL{% else %}TRENDING{% endif %}
            </span>
        {% endif %}

        {% if profile.is_verified %}
            <span class="verified-badge"><i class="fas fa-check-circle"></i> Verified</span>
        {% endif %}

        <div class="card-body d-flex flex-column">
            <div class="d-flex justify-content-between align-items-start mb-2">
                <h5 class="card-title mb-0">{{ profile.display_name|default:profile.user.username }}</h5>
                {% if profile.rating %}
                    <span class="rating fs-5">★ {{ profile.rating|floatformat:1 }}</span>
                {% endif %}
            </div>
            
            <p class="text-muted small mb-2">{{ profile.headline|truncatechars:90 }}</p>
            
            <small class="text-muted mb-3">
                <i class="fas fa-map-marker-alt me-1"></i>
                {{ profile.city }}, {{ profile.country }}
            </small>

            {% if profile.preview_media.all %}
            <div class="d-flex gap-2 mt-2 mb-4">
                {% for media in profile.preview_media.all|slice:":3" %}
                    <div class="media-thumbnail" style="width:72px;height:72px;border-radius:10px;overflow:hidden;border:1px solid #eee;">
                        {% if media.is_video %}
                            <video src="{{ media.media_file.url }}" muted preload="none" class="w-100 h-100"></video>
                        {% else %}
                            <img src="{{ media.media_file.url }}" class="w-100 h-100" style="object-fit:cover;">
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
            {% endif %}

            <div class="mt-auto pt-3">
                <div class="d-flex gap-2">
                    <a href="{% url 'core:book_profile' profile.user.username %}" 
                       class="btn btn-primary flex-grow-1">
                        <i class="fas fa-calendar-alt me-2"></i>Book
                    </a>
                    <button onclick="supportCreator(this)" 
                            class="btn btn-outline-success flex-grow-1">
                        <i class="fas fa-heart"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endfor %}

<!-- Hidden indicator for HTMX to know if more pages exist -->
{% if page_obj.has_next %}
    <div id="has-more" data-next-page="{{ page_obj.next_page_number }}" style="display:none;"></div>
{% endif %}