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

{% block content %}
<h1 class="text-2xl font-bold font-mono mb-6">Catalog</h1>

<div class="tabs tabs-boxed mb-6 w-fit">
  <a class="tab tab-active" onclick="showTab('list')">List</a>
  <a class="tab" onclick="showTab('capabilities')">Capabilities</a>
</div>

<div id="tab-list">
{% if extensions and extensions.items %}
  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
    {% for ext in extensions.items %}
    <div class="card bg-base-200 shadow">
      <div class="card-body p-4">
        <div class="flex items-center justify-between gap-2">
          <span class="font-mono font-semibold text-primary text-sm">{{ ext.name | default(value="?") }}</span>
          {% if ext.category %}
          <span class="badge badge-ghost badge-xs">{{ ext.category }}</span>
          {% endif %}
        </div>
        {% if ext.description %}
        <p class="text-xs text-base-content/60 mt-1">{{ ext.description }}</p>
        {% endif %}
        {% if ext.version %}
        <span class="font-mono text-xs text-base-content/30">v{{ ext.version }}</span>
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>
{% else %}
  <div class="alert alert-warning">
    <span class="text-sm">catalog_list tool unavailable or returned no results.</span>
  </div>
{% endif %}
</div>

<div id="tab-capabilities" class="hidden">
{% if capabilities and capabilities.items %}
  <div class="overflow-x-auto">
    <table class="table table-sm">
      <thead>
        <tr><th>Capability</th><th>Provided by</th><th>Required by</th></tr>
      </thead>
      <tbody>
        {% for cap in capabilities.items %}
        <tr class="hover">
          <td class="font-mono text-xs font-semibold">{{ cap.capability | default(value="?") }}</td>
          <td class="text-xs">
            {% if cap.providers %}
              {% for p in cap.providers %}
              <span class="badge badge-success badge-xs font-mono mr-1">{{ p }}</span>
              {% endfor %}
            {% endif %}
          </td>
          <td class="text-xs">
            {% if cap.consumers %}
              {% for c in cap.consumers %}
              <span class="badge badge-info badge-xs font-mono mr-1">{{ c }}</span>
              {% endfor %}
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% else %}
  <div class="alert"><span class="text-sm">No capability data available.</span></div>
{% endif %}
</div>

<script>
function showTab(name) {
  ['list','capabilities'].forEach(t => {
    document.getElementById('tab-' + t).classList.toggle('hidden', t !== name);
  });
  document.querySelectorAll('.tab').forEach((el, i) => {
    el.classList.toggle('tab-active', (i === 0 && name === 'list') || (i === 1 && name === 'capabilities'));
  });
}
</script>
{% endblock %}