{% extends "base.html" %}

{% block title %}Sessions - Subtle{% endblock %}

{% block content %}
<div x-data="sessionsListApp()">
    <!-- Stats Row -->
    <div class="flex gap-4 mb-4">
        <!-- Claude Execution Time Chart -->
        <div class="flex-1 bg-white/[0.02] rounded-lg border border-white/10 p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-mono text-xs uppercase tracking-wider text-white/60">
                    Claude Execution Time <span class="text-white/30">(7D)</span>
                </h3>
                <span class="font-mono text-xs">
                    <span class="text-amber-400" x-text="formatHours(totalHours) + ' hrs'"></span>
                    <span x-show="percentChange !== null" :class="percentChange >= 0 ? 'text-green-400' : 'text-red-400'" x-text="formatPercentChange(percentChange)"></span>
                </span>
            </div>
            <div x-show="!dailyUsageLoading" class="h-32">
                <canvas id="weeklyActivityChart" x-ref="chartCanvas"></canvas>
            </div>
            <div x-show="dailyUsageLoading" class="h-32 flex items-center justify-center">
                <span class="font-mono text-xs text-white/40">Loading chart...</span>
            </div>
        </div>

        <!-- Git Commits Card -->
        <div class="w-48 bg-white/[0.02] rounded-lg border border-white/10 p-6 flex flex-col">
            <h3 class="font-mono text-xs uppercase tracking-wider text-white/60">
                Git Commits <span class="text-white/30">(7D)</span>
            </h3>
            <div class="font-mono mt-auto">
                <div class="text-6xl font-light text-amber-400" x-text="totalCommits"></div>
                <div x-show="commitsPercentChange !== null" class="text-xs mt-1" :class="commitsPercentChange >= 0 ? 'text-green-400' : 'text-red-400'" x-text="formatPercentChange(commitsPercentChange)"></div>
            </div>
        </div>
    </div>

    <!-- Search input -->
    <div class="relative mb-4 w-fit">
        <input
            type="text"
            x-model="searchQuery"
            @input="handleSearchInput()"
            placeholder="Search sessions..."
            class="w-48 sm:w-56 rounded-lg border border-white/10 bg-white/[0.02] px-4 py-2 pl-9 font-mono text-xs text-white placeholder-white/30 outline-none transition-colors focus:border-amber-500/50 focus:bg-white/[0.04]"
        />
        <svg x-show="!searchLoading" class="absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
        </svg>
        <svg x-show="searchLoading" class="absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-amber-400 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        <button
            x-show="searchQuery"
            @click="clearSearch()"
            class="absolute right-3 top-1/2 -translate-y-1/2 text-white/30 hover:text-white/60 transition-colors cursor-pointer"
        >
            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <div class="bg-white/[0.02] rounded-lg border border-white/10 overflow-hidden">
        <table class="w-full text-xs">
            <thead>
                <tr class="border-b border-white/10 text-white/50 text-left">
                    <th class="px-4 py-3 font-medium">Project</th>
                    <th class="px-4 py-3 font-medium">Start Time</th>
                    <th class="px-4 py-3 font-medium">Description</th>
                    <th class="px-4 py-3 font-medium">Duration</th>
                    <th class="px-4 py-3 font-medium">AI</th>
                    <th class="px-4 py-3 font-medium">Tools</th>
                    <th class="px-4 py-3 font-medium text-right">Git LOC</th>
                    <th class="px-4 py-3 font-medium text-right">Tokens</th>
                </tr>
            </thead>
            <tbody>
                <template x-if="loading">
                    <tr>
                        <td colspan="8" class="px-4 py-8 text-center text-white/40">
                            Loading sessions...
                        </td>
                    </tr>
                </template>
                <template x-if="!loading && sessions.length === 0">
                    <tr>
                        <td colspan="8" class="px-4 py-8 text-center text-white/40">
                            No sessions found
                        </td>
                    </tr>
                </template>
                <template x-if="!loading && sessions.length > 0 && filteredSessions.length === 0">
                    <tr>
                        <td colspan="8" class="px-4 py-8 text-center text-white/40">
                            No sessions match your search
                        </td>
                    </tr>
                </template>
                <template x-for="(session, idx) in filteredSessions" :key="idx">
                    <tr class="border-b border-white/5 hover:bg-white/[0.02] cursor-pointer transition-colors"
                        @click="goToSession(session.session_id)">
                        <td class="px-4 py-3 text-white/70 whitespace-nowrap" x-text="session.project_name"></td>
                        <td class="px-4 py-3 text-white/50 whitespace-nowrap" x-text="formatTime(session.start_time)"></td>
                        <td class="px-4 py-3 text-white/70" x-text="session.description"></td>
                        <td class="px-4 py-3 text-white/50 whitespace-nowrap" x-text="formatDuration(session.duration_seconds)"></td>
                        <td class="px-4 py-3 text-white/50 whitespace-nowrap" x-text="formatDuration(session.agent_time_seconds)"></td>
                        <td class="px-4 py-3 text-white/50 whitespace-nowrap" x-text="formatDuration(session.tool_time_seconds)"></td>
                        <td class="px-4 py-3 text-white/50 text-right whitespace-nowrap" x-html="formatLoc(session.git_loc)"></td>
                        <td class="px-4 py-3 text-white/50 text-right whitespace-nowrap" x-text="formatTokens(session.input_tokens + session.output_tokens)"></td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
</div>
{% endblock %}