{% extends "base.html" %}

{% block title %}Session {{ session.session_id[:8] }} - Memory MCP Dashboard{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex items-center gap-4">
        <a href="/sessions" class="text-gray-400 hover:text-white">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
        </a>
        <div>
            <h1 class="text-2xl font-bold text-white">{{ session.topic or 'Session ' + session.session_id[:8] }}</h1>
            <p class="text-gray-400 mt-1">
                {{ session.created_at[:16] }}
                {% if session.project_path %}
                &middot; <span class="text-blue-400">{{ session.project_path }}</span>
                {% endif %}
            </p>
        </div>
    </div>

    <!-- Session Stats -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-dark-900 rounded-lg border border-gray-800 p-4">
            <p class="text-xs text-gray-400">Memories Created</p>
            <p class="text-2xl font-bold text-white">{{ memories|length }}</p>
        </div>
        <div class="bg-dark-900 rounded-lg border border-gray-800 p-4">
            <p class="text-xs text-gray-400">In Hot Cache</p>
            <p class="text-2xl font-bold text-orange-400">{{ memories|selectattr('is_hot')|list|length }}</p>
        </div>
        <div class="bg-dark-900 rounded-lg border border-gray-800 p-4">
            <p class="text-xs text-gray-400">Session ID</p>
            <p class="text-sm font-mono text-gray-300 truncate" title="{{ session.session_id }}">{{ session.session_id[:16] }}...</p>
        </div>
        <div class="bg-dark-900 rounded-lg border border-gray-800 p-4">
            <p class="text-xs text-gray-400">Status</p>
            {% if session.ended_at %}
            <p class="text-sm text-gray-400">Ended</p>
            {% else %}
            <p class="text-sm text-green-400">Active</p>
            {% endif %}
        </div>
    </div>

    <!-- Memories Table -->
    <div class="bg-dark-900 rounded-lg border border-gray-800 overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-800">
            <h2 class="text-lg font-semibold text-white">Session Memories</h2>
        </div>
        <table class="w-full">
            <thead class="bg-dark-800 border-b border-gray-800">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">ID</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Type</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Content</th>
                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">Hot</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-800">
                {% if memories %}
                    {% for memory in memories %}
                    <tr class="hover:bg-dark-800/50 transition-colors">
                        <td class="px-4 py-3 text-sm text-gray-400">#{{ memory.id }}</td>
                        <td class="px-4 py-3">
                            <span class="px-2 py-0.5 text-xs font-medium rounded border {{ get_type_badge_class(memory.memory_type) }}">
                                {{ memory.memory_type|type_value }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            <p class="text-sm text-gray-200 line-clamp-2 max-w-lg">{{ memory.content }}</p>
                        </td>
                        <td class="px-4 py-3 text-center">
                            {% if memory.is_hot %}
                            <span class="text-orange-400">
                                <svg class="w-4 h-4 inline" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                </svg>
                            </span>
                            {% else %}
                            <span class="text-gray-600">—</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="4" class="px-4 py-8 text-center text-gray-500">
                            No memories in this session
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}