{% extends 'base.html' %}
{% block content %}
<style>
    :root {
        --primary: #6a0dad;
        --primary-hover: #5a0b94;
    }
    
    .creator-card {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border: none;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(12px);
        border-radius: 16px;
    }
    
    .creator-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 25px 50px rgba(106, 13, 173, 0.18) !important;
    }
    
    .creator-img {
        height: 280px;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .creator-card:hover .creator-img {
        transform: scale(1.08);
    }
    
    .verified-badge {
        position: absolute;
        top: 16px;
        right: 16px;
        background: linear-gradient(135deg, #10b981, #34d399);
        color: white;
        font-size: 0.75rem;
        padding: 4px 12px;
        border-radius: 20px;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }
    
    .trending-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        background: linear-gradient(135deg, #f59e0b, #ef4444);
        color: white;
        font-size: 0.7rem;
        padding: 3px 10px;
        border-radius: 20px;
        font-weight: 700;
    }
    
    .rating { color: #facc15; font-weight: 700; }
    
    .brand-logo {
        height: 68px;
        filter: grayscale(85%);
        transition: all 0.4s ease;
        opacity: 0.9;
    }
    
    .brand-logo:hover {
        filter: grayscale(0%);
        transform: scale(1.08);
    }
    
    .media-thumbnail { transition: transform 0.3s ease; }
    .media-thumbnail:hover { transform: scale(1.05); }
    
    .filter-card {
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }
    
    /* Floating Elements */
    .floating-chat {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 62px;
        height: 62px;
        background: var(--primary);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.9rem;
        box-shadow: 0 10px 30px rgba(106, 13, 173, 0.4);
        z-index: 1050;
        transition: all 0.3s ease;
    }
    
    .floating-chat:hover {
        transform: scale(1.1);
        background: var(--primary-hover);
    }
    
    .notification-bell {
        position: fixed;
        top: 20px;
        right: 100px;
        z-index: 1060;
    }
    
    /* Infinite Scroll Loader */
    #load-more-spinner {
        display: none;
    }
</style>
    <div class="container py-2">
        <!-- Header -->
        <div class="row mb-2 align-items-end">
            <div class="col-lg-8">
                <h3 class="fw-bold">Creator Discovery</h3>
                <p class="lead text-muted">TikTok-style feed • Real-time trending • Powered by engagement</p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <div class="d-inline-flex align-items-center gap-3 bg-white px-4 py-3 rounded-4 shadow-sm">
                    <div>
                        <span class="text-muted small">Active</span>
                        <br>
                        <strong class="text-primary">2,847</strong>
                    </div>
                    <div class="vr"></div>
                    <div>
                        <span class="text-muted small">This Month</span>
                        <br>
                        <strong class="text-success">1,392</strong>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!-- Filters -->
            <div class="col-lg-3">
                <div class="card filter-card sticky-top" style="top: 90px;">
                    <div class="card-body">
                        <h5 class="mb-4">
                            <i class="fas fa-sliders-h me-2"></i>Filters
                        </h5>
                        <form id="filter-form" method="get">
                            {% csrf_token %}
                            {{ form.keyword.label_tag }}{{ form.keyword }}
                            {{ form.city.label_tag }}{{ form.city }}
                            {{ form.country.label_tag }}{{ form.country }}
                            {{ form.interest.label_tag }}{{ form.interest }}
                            {{ form.category.label_tag }}{{ form.category }}
                            <div class="form-check mb-3">{{ form.verified_only }}{{ form.verified_only.label_tag }}</div>
                            <button class="btn btn-primary w-100" type="submit">Apply Filters</button>
                        </form>
                    </div>
                </div>
            </div>
            <!-- Main Infinite Scroll Feed -->
            <div class="col-lg-9">
                <!-- Inside the creator-feed row -->
                <div id="creator-feed" class="row g-4">
                    {% include 'core/partials/creator_cards.html' %}  <!-- Use consistent name -->
                </div>
                <!-- Infinite Scroll Loader -->
                <div id="load-more-spinner"
                     class="text-center my-5 py-4"
                     style="display:none">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="mt-3 text-muted">Discovering more creators...</p>
                </div>
                <!-- Load More Button -->
                <div class="text-center mt-4" id="load-more-container">
                    {% if page_obj.has_next %}
                        <button id="load-more-btn"
                                class="btn btn-outline-primary px-5 py-2"
                                hx-get="{% url 'core:marketplace' %}?page={{ page_obj.next_page_number }}{% if request.GET %}&{{ request.GET.urlencode }}{% endif %}"
                                hx-target="#creator-feed"
                                hx-swap="beforeend"
                                hx-indicator="#load-more-spinner"
                                hx-on::after-request="if(!document.getElementById('has-more')) this.remove()">
                            Load More Creators
                        </button>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- Brands -->
        <div class="mt-7 p-5 rounded-4 text-center shadow-sm"
             style="background: rgba(255,255,255,0.9)">
            <h4 class="mb-4">Trusted by the biggest studios</h4>
            <!-- brand logos same as before -->
        </div>
        <!-- Newsletter -->
        <div class="mt-6 rounded-4 p-5 text-white shadow"
             style="background: linear-gradient(135deg, #1e0f3a, #4c1d95)">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <h3>Weekly Creator Drops</h3>
                    <p class="lead">
                        Join <strong>48,291</strong> creators & fans getting exclusive alerts.
                    </p>
                </div>
                <div class="col-lg-5">
                    <form class="input-group input-group-lg">
                        <input type="email" class="form-control" placeholder="your@email.com">
                        <button class="btn btn-light fw-bold" type="button">Subscribe</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Notification Center -->
    <div class="notification-bell">
        <button class="btn btn-light position-relative rounded-circle p-3 shadow-sm"
                id="notification-btn">
            <i class="fas fa-bell fa-lg"></i>
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
                  id="notif-count">3</span>
        </button>
    </div>
    <!-- Floating Chat -->
    <a href="{% url 'core:support_chat' %}"
       class="floating-chat"
       title="Live Chat">
        <i class="fas fa-comments"></i>
    </a>
    <script>
    // HTMX Infinite Scroll Setup
    document.body.addEventListener('htmx:afterSwap', function(evt) {
        if (evt.detail.target.id === 'creator-feed') {
            document.getElementById('load-more-spinner').style.display = 'none';
        }
    });

    // Fake Engagement Ranking (Client demo)
    function sortFeed(mode) {
        // In real app this would trigger HTMX request with ?sort=engagement
        const feed = document.getElementById('creator-feed');
        feed.style.opacity = 0.6;
        setTimeout(() => {
            alert(`Sorted by ${mode} (Engagement algorithm would boost viral profiles here)`);
            feed.style.opacity = 1;
        }, 400);
    }

    function supportCreator(btn) {
        btn.innerHTML = `<i class="fas fa-heart text-danger"></i>`;
        btn.disabled = true;
    }

    // Notification demo
    document.getElementById('notification-btn').addEventListener('click', () => {
        alert("Notification Center:\n\n• @theweeknd just went live\n• New booking request from Nike\n• 12 new followers");
    });

    // Auto-boost simulation (for demo)
    console.log("%cEngagement Algorithm Active: Viral profiles auto-boosted", "color:#6a0dad;font-weight:bold");
    </script>
{% endblock %}