{% extends "base.html" %}

{% block content %}
<div class="container mt-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="display-4">My Agents</h1>
        <a href="{% url 'create_agent' %}" class="btn btn-primary">Create New Agent</a>
    </div>
    <p class="lead mb-5">Here is a list of all the AI agents you have created.</p>

    {% if agents %}
        <div class="agent-grid">
            {% for agent in agents %}
            <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 class="d-flex justify-content-between align-items-center mb-3">
                        <strong>Status:</strong>
                        {% if agent.published %}
                            <span class="badge bg-success">Published</span>
                        {% else %}
                            <span class="badge bg-secondary">Draft</span>
                        {% endif %}
                    </div>
                    <div class="d-flex justify-content-center">
                        <a href="{% url 'edit_agent' agent.id %}" class="btn btn-sm btn-outline-primary me-2">Edit</a>
                        <form action="{% url 'delete_agent' agent.id %}" method="post" onsubmit="return confirm('Are you sure you want to delete this agent?');">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-outline-danger me-2">Delete</button>
                        </form>
                        <a href="{% url 'publish_agent' agent.id %}" class="btn btn-sm btn-outline-info">
                            {% if agent.published %}Unpublish{% else %}Publish{% endif %}
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="text-center py-5">
            <h2 class="display-5">No Agents Yet</h2>
            <p class="lead">You haven't created any agents. Why not create your first one?</p>
            <a href="{% url 'create_agent' %}" class="btn btn-primary btn-lg mt-3">Create an Agent</a>
        </div>
    {% endif %}
</div>
{% endblock %}
