{% extends 'base.html' %}

{% block title %}AI Agent Marketplace - NetCop AI Hub{% endblock %}

{% block content %}
<div class="text-center mb-12">
    <h1 class="text-4xl font-bold text-gray-900 mb-4">AI Agent Marketplace</h1>
    <p class="text-xl text-gray-600">Choose from our collection of powerful AI agents</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {% for agent in agents %}
    <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
        <div class="p-6">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-gradient-to-r {{ agent.get_gradient_class }} rounded-lg flex items-center justify-center text-white font-bold">
                    {{ agent.icon }}
                </div>
                <div class="text-right">
                    <div class="text-lg font-bold text-gray-900">{{ agent.price_display }}</div>
                    <div class="text-sm text-gray-500">per use</div>
                </div>
            </div>
            
            <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ agent.name }}</h3>
            <p class="text-gray-600 mb-4">{{ agent.description }}</p>
            
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <span class="text-yellow-400">★</span>
                    <span class="ml-1 text-sm text-gray-600">{{ agent.rating }} ({{ agent.review_count }})</span>
                </div>
                <span class="bg-{{ agent.category == 'analytics' and 'blue' or 'green' }}-100 text-{{ agent.category == 'analytics' and 'blue' or 'green' }}-800 px-2 py-1 rounded-full text-xs">
                    {{ agent.get_category_display }}
                </span>
            </div>
            
            <a href="{% url 'agent_detail' agent.slug %}" class="block w-full bg-blue-600 text-white text-center py-2 rounded-md hover:bg-blue-700 transition-colors">
                Use Agent
            </a>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}