{% extends "base.html" %}
{% block title %}Agents{% endblock %}
{% block content %}
<div class="page-header">
    <h1>Agents</h1>
    <p>All registered agent certificates</p>
</div>

<div class="card">
    {% if agents %}
    <div class="card-body-flush table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Agent</th>
                    <th>Platform</th>
                    <th>Risk Tier</th>
                    <th>Entries</th>
                    <th>Last Active</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                {% for agent in agents %}
                <tr>
                    <td><a href="/dashboard/agents/{{ agent.cert_id }}">{{ agent.name }}</a></td>
                    <td>{{ agent.platform }}</td>
                    <td>
                        <span class="risk-dots">
                            {% for i in range(4) %}
                            <span class="risk-dot {{ 'filled' if i < agent.risk_tier else '' }}"></span>
                            {% endfor %}
                            <span style="font-size: 11px; color: var(--color-text-muted); margin-left: 4px;">({{ agent.risk_tier }})</span>
                        </span>
                    </td>
                    <td>{{ agent.entry_count }}</td>
                    <td>{{ time_ago(agent.last_active) }}</td>
                    <td>
                        {% if agent.expired %}
                        <span class="badge badge-red">Expired</span>
                        {% else %}
                        <span class="badge badge-green">Active</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="card-body">
        <div class="empty-state">
            <p>No agents registered yet.</p>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}