{% extends "base.html" %}
{% import "macros/ui.html" as m %}
{% block title %}{{ tool.name }}{% endblock %}
{% block nav_tools %}btn-active{% endblock %}

{% block content %}
<div class="breadcrumbs text-sm mb-4">
  <ul>
    <li><a href="/ui/tools">Tools</a></li>
    <li class="font-mono">{{ tool.name }}</li>
  </ul>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

  <div>
    <div class="card bg-base-200 shadow mb-4">
      <div class="card-body">
        <div class="flex items-center gap-3 mb-2">
          <h1 class="text-xl font-bold font-mono text-primary">{{ tool.name }}</h1>
          {{ m::category_badge(cat=tool.category) }}
        </div>
        <p class="text-sm text-base-content/70">{{ tool.description }}</p>
      </div>
    </div>

    <div class="card bg-base-200 shadow">
      <div class="card-body">
        <h2 class="card-title text-sm font-mono mb-2">JSON Schema</h2>
        <pre class="bg-base-300 p-3 rounded text-xs overflow-x-auto font-mono">{{ schema_pretty }}</pre>
      </div>
    </div>
  </div>

  <div>
    <div class="card bg-base-200 shadow mb-4">
      <div class="card-body">
        <h2 class="card-title text-sm font-mono mb-3">Invoke via API</h2>
        <div class="mockup-code text-xs">
          <pre data-prefix="$"><code>curl -X POST http://localhost:9014/api/v1/tools/{{ tool.name }} \
  -H 'Content-Type: application/json' \
  -d '{"params":{}}'</code></pre>
        </div>
      </div>
    </div>

    <div class="card bg-base-200 shadow">
      <div class="card-body">
        <h2 class="card-title text-sm font-mono mb-2">Recent Invocations</h2>
        {% if recent %}
        <table class="table table-xs">
          <thead><tr><th>Status</th><th>Duration</th><th>When</th></tr></thead>
          <tbody>
            {% for r in recent %}
            <tr>
              <td>{{ m::outcome_badge(record=r) }}</td>
              <td>{{ m::duration(ms=r.duration_ms) }}</td>
              <td class="text-base-content/40 text-xs">{{ r.invoked_at }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
        <p class="text-base-content/40 text-sm">No recent invocations.</p>
        {% endif %}
      </div>
    </div>
  </div>

</div>
{% endblock %}