{% extends 'base.html' %}

{% block title %}AI Agents Marketplace{% endblock %}

{% block content %}
<div class="page-header">
    <h1>AI Agents Marketplace</h1>
    <p>Discover and use powerful AI agents to automate your tasks</p>
</div>

<!-- Search and Filter Section -->
<div class="search-filter-section">
    <form method="GET" class="search-form">
        <div class="search-group">
            <input type="text" name="search" placeholder="Search agents..." 
                   value="{{ search_query }}" class="search-input">
            <button type="submit" class="search-btn">Search</button>
        </div>
    </form>
    
    <div class="category-filters">
        <a href="{% url 'agents' %}" 
           class="filter-btn {% if not current_category %}active{% endif %}">
            All Categories
        </a>
        {% for category in categories %}
        <a href="{% url 'agents' %}?category={{ category.slug }}" 
           class="filter-btn {% if current_category == category.slug %}active{% endif %}">
            {% if category.icon %}{{ category.icon }}{% endif %}
            {{ category.name }}
        </a>
        {% endfor %}
    </div>
</div>

<!-- Results Count -->
<div class="results-info">
    <p>{{ agents.count }} agent{{ agents.count|pluralize }} found</p>
</div>

<!-- Agents Grid -->
<div class="agents-grid">
    {% for agent in agents %}
    <div class="agent-card">
        <div class="agent-header">
            {% if agent.icon %}
            <div class="agent-icon">{{ agent.icon }}</div>
            {% endif %}
            <h3 class="agent-name">{{ agent.name }}</h3>
            {% if agent.is_featured %}
            <span class="featured-badge">Featured</span>
            {% endif %}
        </div>
        
        <div class="agent-content">
            <p class="agent-description">{{ agent.short_description }}</p>
            <div class="agent-meta">
                <span class="agent-category">{{ agent.category.name }}</span>
                <span class="agent-usage">{{ agent.usage_count }} uses</span>
            </div>
        </div>
        
        <div class="agent-footer">
            <div class="agent-price">{{ agent.price }} AED</div>
            <a href="{% url 'agent_detail' agent.slug %}" class="btn btn-primary">
                Use Agent
            </a>
        </div>
    </div>
    {% empty %}
    <div class="empty-state">
        <h3>No agents found</h3>
        <p>Try adjusting your search criteria or browse all categories.</p>
        <a href="{% url 'agents' %}" class="btn btn-secondary">View All Agents</a>
    </div>
    {% endfor %}
</div>

<!-- Load agents-specific styles and scripts -->
<style>
.page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.page-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.search-filter-section {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.search-form {
    margin-bottom: 1.5rem;
}

.search-group {
    display: flex;
    gap: 0.5rem;
    max-width: 500px;
    margin: 0 auto;
}

.search-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.search-btn {
    padding: 0.75rem 1.5rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.search-btn:hover {
    background: var(--primary-hover);
}

.category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.filter-btn {
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 20px;
    text-decoration: none;
    color: var(--text-color);
    background: white;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.filter-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.results-info {
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--text-muted);
}

.agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.agent-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.agent-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.agent-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    position: relative;
}

.agent-icon {
    font-size: 2rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-gray);
    border-radius: 8px;
}

.agent-name {
    flex: 1;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.featured-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--accent-color);
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.agent-content {
    margin-bottom: 1.5rem;
}

.agent-description {
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.agent-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.agent-category {
    background: var(--light-gray);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.agent-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.agent-price {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.empty-state h3 {
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}

.empty-state p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .agents-grid {
        grid-template-columns: 1fr;
    }
    
    .search-group {
        flex-direction: column;
    }
    
    .category-filters {
        justify-content: flex-start;
    }
    
    .agent-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
}
</style>
{% endblock %}