app/templates/marketplace.html

{% extends "base.html" %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="flex items-center justify-between mb-8">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Prompt Marketplace</h1>
                <p class="mt-2 text-gray-600 dark:text-gray-300">Discover and purchase high-quality prompts for various AI tools</p>
            </div>
            <div class="text-right">
                <div class="text-2xl font-bold text-blue-600">{{ user_credits }}</div>
                <div class="text-sm text-gray-500">credits available</div>
            </div>
        </div>

        <!-- Filters and Search -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <!-- Search -->
                <div class="flex-1">
                    <div class="relative">
                        <input type="text" id="search-input"
                               class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 pl-10 pr-4 py-2 focus:ring-blue-500 focus:border-blue-500"
                               placeholder="Search prompts...">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                 fill="currentColor">
                                <path fill-rule="evenodd"
                                      d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                                      clip-rule="evenodd"/>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Category Filter -->
                <div class="flex-shrink-0">
                    <select id="category-filter"
                            class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">All Categories</option>
                        <option value="text" {% if category == 'text' %}selected{% endif %}>Text Generation</option>
                        <option value="image" {% if category == 'image' %}selected{% endif %}>Image Generation</option>
                        <option value="code" {% if category == 'code' %}selected{% endif %}>Code Generation</option>
                    </select>
                </div>

                <!-- Sort By -->
                <div class="flex-shrink-0">
                    <select id="sort-by"
                            class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:ring-blue-500 focus:border-blue-500">
                        <option value="popular" {% if sort_by == 'popular' %}selected{% endif %}>Most Popular</option>
                        <option value="newest" {% if sort_by == 'newest' %}selected{% endif %}>Newest First</option>
                        <option value="rating" {% if sort_by == 'rating' %}selected{% endif %}>Highest Rated</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Prompts Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for prompt in prompts %}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden prompt-card"
                 data-category="{{ prompt.tool_id }}"
                 data-title="{{ prompt.title|lower }}"
                 data-rating="{{ prompt.avg_rating }}"
                 data-usage="{{ prompt.usage_count }}"
                 data-date="{{ prompt.created_at }}">
                <!-- Prompt Header -->
                <div class="p-6">
                    <div class="flex items-start justify-between">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ prompt.title }}</h3>
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ prompt.description }}</p>
                        </div>
                        <div class="flex items-center">
                            <span class="text-yellow-500">★</span>
                            <span class="ml-1 text-sm text-gray-600 dark:text-gray-300">{{ "%.1f"|format(prompt.avg_rating) }}</span>
                        </div>
                    </div>

                    <!-- Tags -->
                    <div class="mt-4 flex flex-wrap gap-2">
                        {% for tag in prompt.tags %}
                        <span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 rounded-full">
                            {{ tag }}
                        </span>
                        {% endfor %}
                    </div>

                    <!-- Usage Stats -->
                    <div class="mt-4 flex items-center text-sm text-gray-500 dark:text-gray-400">
                        <svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                        {{ prompt.usage_count }} uses
                    </div>
                </div>

                <!-- Preview -->
                <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700">
                    <div class="text-sm text-gray-600 dark:text-gray-300 line-clamp-3">
                        {{ prompt.content }}
                    </div>
                </div>

                <!-- Footer -->
                <div class="px-6 py-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
                    <div class="flex items-center justify-between">
                        <div class="text-sm text-gray-500 dark:text-gray-400">
                            Created by {{ prompt.creator_id }}
                        </div>
                        <button onclick="purchasePrompt('{{ prompt.id }}')"
                                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            Purchase
                        </button>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- Empty State -->
        <div id="empty-state" class="hidden text-center py-12">
            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No prompts found</h3>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                Try adjusting your search or filter criteria
            </p>
        </div>
    </div>
</div>

<!-- Purchase Confirmation Modal -->
<div id="purchase-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-lg w-full mx-4">
        <h2 class="text-xl font-semibold mb-4">Confirm Purchase</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">
            Are you sure you want to purchase this prompt? This will cost 5 credits.
        </p>
        <div class="flex justify-end space-x-4">
            <button id="cancel-purchase"
                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
                Cancel
            </button>
            <button id="confirm-purchase"
                    class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700">
                Confirm Purchase
            </button>
        </div>
    </div>
</div>

<script>
let selectedPromptId = null;

// Initialize the page
document.addEventListener('DOMContentLoaded', function() {
    setupEventListeners();
    setupFilters();
});

// Set up event listeners
function setupEventListeners() {
    // Purchase modal
    document.getElementById('cancel-purchase').addEventListener('click', hidePurchaseModal);
    document.getElementById('confirm-purchase').addEventListener('click', handlePurchase);
}

// Set up filters
function setupFilters() {
    const searchInput = document.getElementById('search-input');
    const categoryFilter = document.getElementById('category-filter');
    const sortBy = document.getElementById('sort-by');

    function filterPrompts() {
        const searchTerm = searchInput.value.toLowerCase();
        const category = categoryFilter.value;
        const sortValue = sortBy.value;

        const cards = document.querySelectorAll('.prompt-card');
        let visibleCount = 0;

        cards.forEach(card => {
            const title = card.dataset.title;
            const cardCategory = card.dataset.category;
            const rating = parseFloat(card.dataset.rating);
            const usage = parseInt(card.dataset.usage);
            const date = new Date(card.dataset.date);

            const matchesSearch = title.includes(searchTerm);
            const matchesCategory = !category || cardCategory === category;

            if (matchesSearch && matchesCategory) {
                card.style.display = 'block';
                visibleCount++;
            } else {
                card.style.display = 'none';
            }
        });

        // Show/hide empty state
        const emptyState = document.getElementById('empty-state');
        emptyState.classList.toggle('hidden', visibleCount > 0);

        // Sort visible cards
        const container = document.querySelector('.grid');
        const visibleCards = Array.from(cards).filter(card => card.style.display !== 'none');
        
        visibleCards.sort((a, b) => {
            switch (sortValue) {
                case 'rating':
                    return parseFloat(b.dataset.rating) - parseFloat(a.dataset.rating);
                case 'newest':
                    return new Date(b.dataset.date) - new Date(a.dataset.date);
                case 'popular':
                default:
                    return parseInt(b.dataset.usage) - parseInt(a.dataset.usage);
            }
        });

        visibleCards.forEach(card => container.appendChild(card));
    }

    searchInput.addEventListener('input', filterPrompts);
    categoryFilter.addEventListener('change', filterPrompts);
    sortBy.addEventListener('change', filterPrompts);
}

// Purchase prompt
function purchasePrompt(promptId) {
    selectedPromptId = promptId;
    showPurchaseModal();
}

// Show purchase modal
function showPurchaseModal() {
    document.getElementById('purchase-modal').classList.remove('hidden');
    document.getElementById('purchase-modal').classList.add('flex');
}

// Hide purchase modal
function hidePurchaseModal() {
    document.getElementById('purchase-modal').classList.add('hidden');
    document.getElementById('purchase-modal').classList.remove('flex');
    selectedPromptId = null;
}

// Handle purchase
async function handlePurchase() {
    if (!selectedPromptId) return;

    try {
        const response = await fetch('/api/marketplace/purchase', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                prompt_id: selectedPromptId
            })
        });

        const data = await response.json();

        if (data.success) {
            showToast('Prompt purchased successfully!', 'success');
            hidePurchaseModal();
            // Refresh the page to update credits
            window.location.reload();
        } else {
            showToast(data.error || 'Failed to purchase prompt', 'error');
        }
    } catch (error) {
        console.error('Error purchasing prompt:', error);
        showToast('Failed to purchase prompt', 'error');
    }
}
</script>
{% endblock %}