{% extends 'admin/base_admin.html' %}

{% block title %}Manage Agents | ChatLab{% endblock %}
{% block admin_agent_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">Team Agents</h2>
        <p class="page-subtitle">Create and manage agent accounts for <strong>{{ user.company.name }}</strong>.</p>
    </div>
    <a href="{% url 'admin_agent_create' %}" class="btn btn-primary">
        Add New Agent
    </a>
</div>

<div class="glass-card" style="padding: 2rem; border-radius: 0;">
    <h3 style="margin-bottom: 1.25rem; font-family: var(--font-heading); font-size: 1.25rem;">Agent Accounts</h3>

    {% if agents %}
        <div class="table-container">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Username</th>
                        <th>Email</th>
                        <th>Date Joined</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for agent in agents %}
                        <tr>
                            <td style="font-weight: 600; color: var(--text-primary); font-family: monospace;">{{ agent.username }}</td>
                            <td style="font-size: 0.9rem;">{{ agent.email|default:"—" }}</td>
                            <td style="font-size: 0.85rem; color: var(--text-muted);">{{ agent.date_joined|date:"M d, Y" }}</td>
                            <td style="text-align: right;">
                                <div style="display: inline-flex; gap: 0.5rem; justify-content: flex-end; align-items: center;">
                                    <a href="{% url 'admin_agent_edit' agent.pk %}" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem; border-radius: 0;">
                                        Edit
                                    </a>
                                    <form action="{% url 'admin_agent_delete' agent.pk %}" method="post" onsubmit="return confirm('Remove agent {{ agent.username }}?');" style="display: inline; margin: 0;">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem; color: var(--danger); border-color: rgba(239, 68, 68, 0.2); border-radius: 0;">
                                            Remove
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div style="text-align: center; padding: 4rem 2rem; color: var(--text-secondary);">
            <div style="font-size: 3rem; margin-bottom: 1.5rem;">[+]</div>
            <h4 style="margin-bottom: 0.5rem;">No Agents Yet</h4>
            <p style="font-size: 0.9rem; margin-bottom: 1.5rem; color: var(--text-muted);">Create agent accounts so your team members can access the platform.</p>
            <a href="{% url 'admin_agent_create' %}" class="btn btn-primary">Add New Agent</a>
        </div>
    {% endif %}
</div>
{% endblock %}