{% extends "base.html" %}

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

{% block extra_styles %}{% endblock %}

{% block content %}
<div class="tools-container py-3">

  <div class="tools-header">
    <div>
      <div class="tools-title">TOOLS &amp; CAPABILITIES</div>
      <div class="tools-subtitle">Agent tools and usage statistics</div>
    </div>
    <div class="tools-stat-box">
      <div class="tools-stat-val">{{ total_calls }}</div>
      <div class="tools-stat-label">TOTAL CALLS</div>
    </div>
  </div>

  <!-- Available Tools -->
  <div class="card mc-panel mb-3">
    <div class="card-header mc-panel-header">// AVAILABLE TOOLS</div>
    <div class="card-body">
      <div class="row g-3">
        {% for tool_id, tool_info in available_tools.items() %}
        <div class="col-12 col-md-4">
          <div class="card tool-card">
            <div class="card-body">
              <h6 class="card-title" style="color:var(--text-bright);">{{ tool_info.name }}</h6>
              <p class="card-text">{{ tool_info.description }}</p>
              <div style="margin-top:8px;">
                <small style="color:var(--text-dim); font-size:0.65rem; letter-spacing:0.08em;">AVAILABLE TO</small>
                <div class="d-flex flex-wrap gap-1 mt-1">
                  {% for persona in tool_info.available_in %}
                  <span class="badge badge-secondary">{{ persona|title }}</span>
                  {% endfor %}
                </div>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

  <!-- Agent Capabilities -->
  <div class="card mc-panel">
    <div class="card-header mc-panel-header">// AGENT CAPABILITIES</div>
    <div class="card-body">
      {% if agent_tools %}
      <div class="row g-3">
        {% for agent in agent_tools %}
        <div class="col-12 col-md-6">
          <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
              <span>
                <strong style="color:var(--text-bright);">{{ agent.name }}</strong>
                <span class="badge {% if agent.status == 'idle' %}badge-success{% elif agent.status == 'busy' %}badge-warning{% else %}badge-secondary{% endif %} ms-2">
                  {{ agent.status }}
                </span>
              </span>
              {% if agent.stats %}
              <small style="color:var(--text-dim);">{{ 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 badge-info" title="{{ tool.description }}">{{ tool.name }}</span>
                {% endfor %}
              </div>
              {% else %}
              <p style="color:var(--text-dim); margin:0; font-size:0.85rem;">No tools assigned</p>
              {% endif %}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div style="text-align:center; padding:20px; color:var(--text-dim); font-size:0.85rem;">
        No agents registered yet.
      </div>
      {% endif %}
    </div>
  </div>

</div>
{% endblock %}