{% extends "base.html" %}
{% block content %}
<div class="flex items-center justify-between mb-4">
  <h1 class="text-2xl font-bold">Knowledge Base</h1>
  <div class="text-sm text-gray-400">{{ total }} entries · {{ by_cat|length }} categories</div>
</div>

<form method="get" action="/kb" class="mb-4 flex gap-2">
  <input name="q" value="{{ q or '' }}" placeholder="Semantic search (leave blank to browse)"
         class="flex-1 px-3 py-2 rounded bg-gray-900 border border-gray-700 text-sm" />
  <select name="cat" class="px-2 py-2 rounded bg-gray-900 border border-gray-700 text-sm">
    <option value="">all categories</option>
    {% for c,n in by_cat %}
      <option value="{{ c }}" {% if cat==c %}selected{% endif %}>{{ c }} ({{ n }})</option>
    {% endfor %}
  </select>
  <button class="px-4 py-2 rounded bg-blue-600 hover:bg-blue-500 text-white text-sm">Search</button>
</form>

<div class="flex gap-2 mb-4 text-xs">
  <a href="/kb?tab=knowledge" class="px-3 py-1 rounded {% if tab=='knowledge' %}bg-blue-600 text-white{% else %}bg-gray-800 text-gray-400{% endif %}">Knowledge ({{ total }})</a>
  <a href="/kb?tab=instructions" class="px-3 py-1 rounded {% if tab=='instructions' %}bg-blue-600 text-white{% else %}bg-gray-800 text-gray-400{% endif %}">Instructions ({{ inst_count }})</a>
</div>

{% if tab=='instructions' %}
  <div class="card rounded-lg overflow-hidden">
    <table class="w-full text-sm">
      <thead class="bg-gray-900 text-gray-400 text-xs uppercase">
        <tr><th class="px-3 py-2 text-left">Topic</th><th class="px-3 py-2 text-left">Aliases</th><th class="px-3 py-2 text-right">Size</th><th class="px-3 py-2 text-left">Updated</th></tr>
      </thead>
      <tbody class="divide-y divide-gray-800">
        {% for row in instructions %}
        <tr class="hover:bg-gray-900/60 align-top">
          <td class="px-3 py-2 font-medium">{{ row.topic }}</td>
          <td class="px-3 py-2 text-gray-500 text-xs">{{ row.aliases|join(', ') }}</td>
          <td class="px-3 py-2 text-right text-gray-400">{{ row.size }}b</td>
          <td class="px-3 py-2 text-gray-500 text-xs">{{ row.updated_at.strftime('%Y-%m-%d') }}</td>
        </tr>
        <tr><td colspan="4" class="px-3 pb-3 text-gray-300 text-xs whitespace-pre-wrap font-mono">{{ row.instructions }}</td></tr>
        {% else %}
        <tr><td colspan="4" class="px-3 py-6 text-center text-gray-500">No instructions stored.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% else %}
  <div class="space-y-2">
    {% for row in rows %}
    <div class="card rounded-lg p-3">
      <div class="flex items-center gap-2 text-xs mb-1">
        <span class="px-2 py-0.5 rounded bg-blue-900/40 text-blue-300">{{ row.category }}</span>
        {% if row.sim is not none %}
          <span class="{% if row.sim>0.5 %}text-green-400{% elif row.sim>0.3 %}text-yellow-400{% else %}text-gray-500{% endif %}">sim {{ '%.3f'|format(row.sim) }}</span>
        {% endif %}
        <span class="text-gray-600 font-mono">{{ row.id[:8] }}</span>
        <span class="text-gray-500">[{{ row.keywords|join(', ') }}]</span>
        <span class="ml-auto text-gray-600">{{ row.created_at.strftime('%Y-%m-%d') }}</span>
      </div>
      <div class="text-sm text-gray-200">{{ row.content }}</div>
    </div>
    {% else %}
    <div class="text-center text-gray-500 py-10">No entries.</div>
    {% endfor %}
  </div>
{% endif %}
{% endblock %}