{% extends "base.html" %}

{% block title %}Tools & Capabilities — Mission Control{% endblock %}

{% block content %}
<div class="container-fluid py-4">
  <div class="row mb-4">
    <div class="col">
      <h1 class="display-6">🔧 Tools & Capabilities</h1>
      <p class="text-secondary">Agent tools and usage statistics</p>
    </div>
    <div class="col-auto">
      <div class="card bg-dark border-secondary">
        <div class="card-body text-center">
          <h3 class="mb-0">{{ total_calls }}</h3>
          <small class="text-secondary">Total Tool Calls</small>
        </div>
      </div>
    </div>
  </div>

  <!-- Available Tools Reference -->
  <div class="row mb-4">
    <div class="col-12">
      <h5 class="mb-3">Available Tools</h5>
      <div class="row g-3">
        {% for tool_id, tool_info in available_tools.items() %}
        <div class="col-md-4">
          <div class="card h-100 bg-dark border-secondary">
            <div class="card-body">
              <h6 class="card-title">{{ tool_info.name }}</h6>
              <p class="card-text small text-secondary">{{ tool_info.description }}</p>
              <div class="mt-2">
                <small class="text-muted">Available to:</small>
                <div class="d-flex flex-wrap gap-1 mt-1">
                  {% for persona in tool_info.available_in %}
                  <span class="badge bg-secondary">{{ persona|title }}</span>
                  {% endfor %}
                </div>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

  <!-- Agent Tool Assignments -->
  <div class="row">
    <div class="col-12">
      <h5 class="mb-3">Agent Capabilities</h5>
      {% if agent_tools %}
      <div class="row g-3">
        {% for agent in agent_tools %}
        <div class="col-md-6">
          <div class="card bg-dark border-secondary">
            <div class="card-header d-flex justify-content-between align-items-center">
              <span>
                <strong>{{ agent.name }}</strong>
                <span class="badge {% if agent.status == 'idle' %}bg-success{% elif agent.status == 'busy' %}bg-warning{% else %}bg-secondary{% endif %} ms-2">
                  {{ agent.status }}
                </span>
              </span>
              {% if agent.stats %}
              <small class="text-muted">{{ agent.stats.total_calls }} calls</small>
              {% endif %}
            </div>
            <div class="card-body">
              {% if agent.tools %}
              <div class="d-flex flex-wrap gap-2">
                {% for tool in agent.tools %}
                <span class="badge bg-primary" title="{{ tool.description }}">
                  {{ tool.name }}
                </span>
                {% endfor %}
              </div>
              {% else %}
              <p class="text-secondary mb-0">No tools assigned</p>
              {% endif %}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="alert alert-secondary">
        No agents registered yet.
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}