{% extends "base.html" %}

{% block title %}Memories - Memory MCP Dashboard{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Page Header -->
    <div>
        <h1 class="text-2xl font-bold text-white">Memory Browser</h1>
        <p class="text-gray-400 mt-1">{{ total }} memories total</p>
    </div>

    <!-- Search and Filters -->
    <div class="bg-dark-900 rounded-lg border border-gray-800 p-4">
        <div class="flex flex-col sm:flex-row gap-4">
            <!-- Search -->
            <div class="flex-1">
                <div class="relative">
                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    <input type="search"
                           name="query"
                           placeholder="Semantic search..."
                           value="{{ query if query else '' }}"
                           hx-get="/api/memories/search"
                           hx-trigger="keyup changed delay:300ms, search"
                           hx-target="#memory-table-body"
                           hx-include="[name='type_filter']"
                           class="w-full pl-10 pr-4 py-2 bg-dark-800 border border-gray-700 rounded-lg text-gray-200 placeholder-gray-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
                </div>
            </div>

            <!-- Type Filter -->
            <div class="sm:w-48">
                <select name="type_filter"
                        hx-get="/api/memories/search"
                        hx-trigger="change"
                        hx-target="#memory-table-body"
                        hx-include="[name='query']"
                        class="w-full px-3 py-2 bg-dark-800 border border-gray-700 rounded-lg text-gray-200 focus:outline-none focus:border-blue-500">
                    <option value="" {% if not type_filter %}selected{% endif %}>All types</option>
                    <option value="project" {% if type_filter == 'project' %}selected{% endif %}>Project</option>
                    <option value="pattern" {% if type_filter == 'pattern' %}selected{% endif %}>Pattern</option>
                    <option value="reference" {% if type_filter == 'reference' %}selected{% endif %}>Reference</option>
                    <option value="conversation" {% if type_filter == 'conversation' %}selected{% endif %}>Conversation</option>
                    <option value="episodic" {% if type_filter == 'episodic' %}selected{% endif %}>Episodic</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Memory Table -->
    <div class="bg-dark-900 rounded-lg border border-gray-800 overflow-hidden">
        <div id="memory-table-body">
            {% include "partials/memory_table.html" %}
        </div>
    </div>
</div>
{% endblock %}