{% extends "base.html" %}

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

{% block content %}
<div class="space-y-6">
    <!-- Page Header -->
    <div>
        <h1 class="text-2xl font-bold text-white">Sessions</h1>
        <p class="text-gray-400 mt-1">Recent conversation sessions and their memories</p>
    </div>

    <!-- Sessions List -->
    <div class="bg-dark-900 rounded-lg border border-gray-800 overflow-hidden">
        <div class="divide-y divide-gray-800">
            {% if sessions %}
                {% for session in sessions %}
                <div class="p-4 hover:bg-dark-800/50 transition-colors">
                    <div class="flex items-start justify-between gap-4">
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 mb-1">
                                <span class="text-sm font-medium text-white">
                                    {{ session.topic or 'Untitled Session' }}
                                </span>
                                <span class="text-xs text-gray-500">
                                    {{ session.session_id[:8] }}...
                                </span>
                            </div>
                            <div class="flex items-center gap-4 text-xs text-gray-500">
                                <span>{{ session.created_at[:16] }}</span>
                                <span>{{ session.memory_count }} memories</span>
                                {% if session.project_path %}
                                <span class="text-blue-400">{{ session.project_path|truncate(30) }}</span>
                                {% endif %}
                            </div>
                        </div>
                        <a href="/sessions/{{ session.session_id }}"
                           class="px-3 py-1 text-sm bg-gray-700 hover:bg-gray-600 text-white rounded transition-colors">
                            View
                        </a>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="p-8 text-center text-gray-500">
                    <svg class="w-12 h-12 text-gray-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                    </svg>
                    <p>No sessions recorded yet</p>
                    <p class="text-sm mt-1">Sessions are created automatically during conversations</p>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Cross-Session Patterns -->
    {% if cross_patterns %}
    <div class="bg-dark-900 rounded-lg border border-gray-800 p-6">
        <h2 class="text-lg font-semibold text-white mb-4">Cross-Session Patterns</h2>
        <p class="text-sm text-gray-400 mb-4">Patterns appearing in multiple sessions - candidates for hot cache promotion</p>
        <div class="space-y-3">
            {% for pattern in cross_patterns %}
            <div class="flex items-center justify-between bg-dark-800 rounded-lg p-3">
                <div class="flex-1 min-w-0">
                    <p class="text-sm text-gray-200 truncate">{{ pattern.content[:100] }}</p>
                    <p class="text-xs text-gray-500 mt-1">{{ pattern.session_count }} sessions, {{ pattern.access_count }} accesses</p>
                </div>
                {% if not pattern.is_hot %}
                <button hx-post="/api/memories/{{ pattern.id }}/promote"
                        hx-swap="none"
                        class="px-3 py-1 text-sm bg-orange-600 hover:bg-orange-700 text-white rounded transition-colors">
                    Promote
                </button>
                {% else %}
                <span class="px-2 py-1 text-xs bg-orange-500/20 text-orange-400 rounded">Hot</span>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}