<!-- LEFT SIDEBAR: Execution List -->
<aside class="lg:col-span-4 xl:col-span-3 flex flex-col min-h-0">
    <!-- Sidebar Header -->
    <div class="flex-shrink-0 mb-4 pl-1 pr-2">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-terminal-text-bright">Runs</h2>
            <div class="flex items-center gap-3">
                {% if executions %}
                <button @click="deleteSelected()" :disabled="!hasSelectedExecutions"
                    class="p-2 text-terminal-text-muted hover:text-status-error transition-smooth disabled:opacity-30 disabled:cursor-not-allowed"
                    title="Delete Selected">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                            clip-rule="evenodd" />
                    </svg>
                </button>
                <label
                    class="flex items-center gap-2 cursor-pointer text-xs font-medium text-terminal-text-dim hover:text-terminal-text transition-smooth select-none">
                    <input type="checkbox"
                        class="rounded border-terminal-border bg-terminal-bg text-accent-purple focus:ring-0 focus:ring-offset-0 w-4 h-4"
                        x-model="allSelected" @change="toggleSelectAll()">
                    <span>All</span>
                </label>
                {% endif %}
            </div>
        </div>

        {% if executions %}
        <div class="relative">
            <select x-model="filterWorkflow"
                class="w-full appearance-none bg-terminal-bg px-4 py-2.5 pr-8 rounded-xl border border-transparent focus:border-accent-blue/50 focus:bg-terminal-bg-light outline-none text-sm text-terminal-text transition-smooth cursor-pointer">
                <option value="">All Workflows</option>
                <template x-for="workflow in uniqueWorkflowNames" :key="workflow">
                    <option :value="workflow"
                        x-text="workflow.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())"></option>
                </template>
            </select>
            <div
                class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-terminal-text-muted">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Scrollable List -->
    <div class="flex-1 overflow-y-auto pr-2 space-y-2 custom-scrollbar">
        {% if executions %}
        <div id="executions-loading" class="py-10 text-center text-terminal-text-muted">
            <div class="animate-pulse">Loading runs...</div>
        </div>

        <div x-cloak class="space-y-2 pb-4">
            <template x-for="execution in filteredExecutions" :key="execution.execution_id">
                <div class="group relative p-4 rounded-xl cursor-pointer transition-all duration-200 border border-transparent"
                    :class="currentExecutionId === execution.execution_id 
                        ? 'bg-terminal-bg shadow-lg ring-1 ring-white/5' 
                        : 'bg-terminal-bg/30 hover:bg-terminal-bg hover:shadow-md'"
                    @click="selectExecution(execution.execution_id)">
                    <!-- Selection Checkbox (Absolute) -->
                    <div class="absolute left-4 top-1/2 -translate-y-1/2" @click.stop>
                        <input type="checkbox"
                            class="w-4 h-4 rounded border-terminal-border bg-terminal-bg-dark text-accent-purple focus:ring-0 focus:ring-offset-0 opacity-0 group-hover:opacity-100 transition-opacity"
                            :class="{'opacity-100': selectedExecutions.includes(execution.execution_id)}"
                            x-model="selectedExecutions" :value="execution.execution_id">
                    </div>

                    <!-- Content (Shifted for checkbox space on hover) -->
                    <div class="pl-6 transition-all">
                        <div class="flex justify-between items-start gap-3 mb-1.5">
                            <h3 class="font-semibold text-sm text-terminal-text group-hover:text-terminal-text-bright transition-colors truncate"
                                x-text="execution.workflow_name.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())">
                            </h3>
                            <span class="flex-shrink-0 w-2 h-2 rounded-full mt-1.5" :class="{
                                    'bg-status-success shadow-[0_0_8px_rgba(158,206,106,0.5)]': execution.status === 'completed',
                                    'bg-status-running shadow-[0_0_8px_rgba(122,162,247,0.5)] animate-pulse': execution.status === 'running',
                                    'bg-status-error shadow-[0_0_8px_rgba(247,118,142,0.5)]': execution.status === 'failed',
                                    'bg-status-pending': execution.status === 'pending'
                                }"></span>
                        </div>
                        <div class="flex justify-between items-center text-xs text-terminal-text-muted font-mono">
                            <span x-text="execution.execution_id.substring(0, 8)"></span>
                            <span
                                x-text="execution.started_at ? new Date(execution.started_at).toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false}) : ''"></span>
                        </div>
                    </div>
                </div>
            </template>

            <!-- Empty Filter State -->
            <div x-show="filteredExecutions.length === 0" class="py-12 text-center">
                <p class="text-terminal-text-muted">No runs match your filter.</p>
            </div>
        </div>
        {% else %}
        <!-- Empty State (No runs at all) -->
        <div class="py-20 text-center px-4">
            <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-terminal-bg mb-4">
                <svg class="w-6 h-6 text-terminal-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
            </div>
            <p class="text-terminal-text font-medium mb-2">No runs yet</p>
            <p class="text-xs text-terminal-text-muted mb-4">Start a workflow via the API to see it here.</p>
            <a href="/docs"
                class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-accent-blue/10 text-accent-blue text-xs font-bold hover:bg-accent-blue/20 transition-smooth">
                View API Docs
            </a>
        </div>
        {% endif %}
    </div>
</aside>
