{% extends 'base.html' %}
{% load static %}

{% block title %}AI Agent Studio - Build & Deploy AI Agents{% endblock %}

{% block head %}
<meta name="description" content="A collaborative platform to design, test, and run high-end AI agents with unlimited usage.">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
{% endblock %}

{% block content %}
<div class="hero">
    <div class="container">
        <h1>Welcome to AI Agent Studio</h1>
        <p>The open-source platform to design, test, and deploy powerful AI agents. No limits, no pricing tiers.</p>
        <a href="{% url 'create_agent' %}" class="btn btn-primary btn-lg">Start Building Your First Agent</a>
    </div>
</div>

    <div class="container agent-showcase">

    <div class="text-center mb-5">

        <h2>Explore Published Agents</h2>

        <p class="lead">These are the agents that have been published by our users.</p>

    </div>



    <div class="agent-grid">
        {% for agent in agents %}
        <a href="{% url 'agent_detail' agent.id %}" class="agent-card-link">
            <div class="agent-card">
                <div class="card-body d-flex flex-column">
                    <h3 class="card-title">{{ agent.name }}</h3>
                    <p class="card-text flex-grow-1">{{ agent.description }}</p>
                </div>
            </div>
        </a>
        {% empty %}
        <div class="text-center w-100">
            <p class="lead">No agents have been published yet. Be the first!</p>
        </div>
        {% endfor %}
    </div>
</div>


{% endblock %}
