{% extends "base.html" %}
{% set active = "memory" %}

{% block title %}Memory{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Memory</h1>
    <p class="page-subtitle">Browse the agent's persistent knowledge and daily learnings</p>
</div>

<form class="search-bar" method="get" action="/memory">
    <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
    <input type="text" name="q" placeholder="Search memory..." value="{{ query }}">
    <span class="search-kbd">/</span>
    <button type="submit">Search</button>
</form>

{% if query and search_results %}
<div class="card" style="margin-bottom: 24px;">
    <div class="card-header"><div class="card-title">Results for "{{ query }}"</div></div>
    <div class="card-body">
        {% for result in search_results %}
        <div style="margin-bottom: 16px;{% if not loop.last %} padding-bottom: 16px; border-bottom: 1px solid var(--border);{% endif %}">
            <a href="/memory/{{ result.file }}" style="font-weight: 500;"><code>{{ result.file }}</code></a>
            {% for match in result.matches %}
            <div style="font-size: 13px; color: var(--text-muted); padding: 4px 0 4px 16px;">
                <span style="color: var(--text-secondary); font-size: 11px; font-weight: 600; font-family: var(--mono);">L{{ match.line }}</span>
                {{ match.text }}
            </div>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
</div>
{% elif query %}
<div class="card" style="margin-bottom: 24px;">
    <div class="empty-state">
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
        <div>No results for "{{ query }}"</div>
    </div>
</div>
{% endif %}

{% if files %}
<div class="card">
    <div class="card-header"><div class="card-title">Files</div></div>
    <div class="card-body">
        <ul class="file-list">
        {% for file in files %}
            <li>
                <a href="/memory/{{ file }}">
                    {% if '/' in file %}
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="1.5"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
                    {% elif file.endswith('.json') %}
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--blue)" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                    {% else %}
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/></svg>
                    {% endif %}
                    {{ file }}
                </a>
            </li>
        {% endfor %}
        </ul>
    </div>
</div>
{% else %}
<div class="card">
    <div class="empty-state">
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
        <div>No memory files found</div>
    </div>
</div>
{% endif %}
{% endblock %}