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

{% block content %}
<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold font-mono">Tools</h1>
  <span class="badge badge-outline font-mono">{{ tools | length }} registered</span>
</div>

<input
  id="search"
  type="text"
  placeholder="Filter tools..."
  class="input input-bordered input-sm w-full max-w-sm mb-4 font-mono"
  oninput="filterTools(this.value)"
/>

<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3" id="tools-grid">
  {% for tool in tools %}
  <a href="/ui/tools/{{ tool.name }}"
     class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer shadow-sm tool-card"
     data-name="{{ tool.name }}"
     data-cat="{{ tool.category | lower }}"
     data-desc="{{ tool.description | lower }}">
    <div class="card-body p-4">
      <div class="flex items-start justify-between gap-2">
        <span class="font-mono text-sm font-semibold text-primary truncate">{{ tool.name }}</span>
        {{ m::category_badge(cat=tool.category) }}
      </div>
      <p class="text-xs text-base-content/60 mt-1 line-clamp-2">{{ tool.description }}</p>
    </div>
  </a>
  {% endfor %}
</div>

<script>
function filterTools(q) {
  const term = q.toLowerCase();
  document.querySelectorAll('.tool-card').forEach(card => {
    const match = !term
      || card.dataset.name.includes(term)
      || card.dataset.desc.includes(term)
      || card.dataset.cat.includes(term);
    card.style.display = match ? '' : 'none';
  });
}
</script>
{% endblock %}