{% if agents %}
<div class="overflow-x-auto">
  <table class="table table-zebra">
    <thead>
      <tr>
        <th>Role</th>
        <th>Type</th>
        <th>Model</th>
        <th>Status</th>
        <th>Performance</th>
      </tr>
    </thead>
    <tbody>
      {% for agent in agents %}
      <tr>
        <td class="font-semibold">{{ agent.role }}</td>
        <td><span class="badge badge-outline badge-sm">{{ agent.worker_type.value }}</span></td>
        <td><span class="badge badge-outline badge-sm">{{ agent.model_tier.value }}</span></td>
        <td><span class="badge {{ agent.status.value|status_badge }} badge-sm">{{ agent.status.value }}</span></td>
        <td>
          <progress class="progress progress-info w-20" value="{{ (agent.performance_score * 100)|int }}" max="100"></progress>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="text-center py-12 text-base-content/50">
  No agents hired yet.
</div>
{% endif %}