{% extends 'repository/repo_layout.html' %}
{% from "_custom_select.html" import custom_select %}

{% block title %}Shells - {{ repo_owner }}/{{ repo_name }}{% endblock %}

{% block extra_css %}
<style>
    @keyframes shimmer {
        0% {
            transform: translateX(-100%);
        }

        100% {
            transform: translateX(100%);
        }
    }

    @keyframes fadeScaleDown {
        0% {
            transform: scale(1);
            opacity: 1;
        }

        100% {
            transform: scale(0.9);
            opacity: 0;
        }
    }

    .removing-shell {
        animation: fadeScaleDown 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        pointer-events: none;
    }


</style>
{% endblock %}

{% block repo_content %}
<div class="h-full flex flex-col">
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center space-x-4">
            <h1 class="text-2xl font-bold text-white tracking-tight">Shells</h1>
            <span class="text-zinc-500 text-sm font-medium px-2 py-0.5 rounded-full bg-white/5 border border-white/5"
                id="shell-count-badge"
                data-limit-max="{{ shell_limit_max|default(1) }}">
                {{ containers|length }} / {{ shell_limit_max|default(1) }}
            </span>
        </div>
        <div class="flex items-center gap-3">
            <button onclick="openHistoryModal()"
                class="p-2 text-zinc-400 hover:text-white bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg transition-all duration-200 group relative"
                title="Shells History">
                <i data-lucide="history" class="w-5 h-5 transition-transform group-hover:rotate-[-30deg]"></i>
            </button>
            <button id="create-shell-btn" onclick="openCreateModal()"
                class="flex items-center gap-2 px-4 py-2 rounded-lg bg-green-600 hover:bg-green-500 text-white font-bold text-sm shadow-lg shadow-green-500/20 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                data-limit-max="{{ shell_limit_max|default(1) }}"
                {% if containers|length >= (shell_limit_max|default(1)) %}disabled title="Shell limit reached"{% endif %}>
                <i data-lucide="plus" class="h-4 w-4"></i> Create Shell
            </button>
        </div>
    </div>

    <!-- Active Shells List (One per row) -->
    <div class="flex flex-col gap-4 mb-8" id="shells-grid"
        data-repo-id="{{ repo.id if repo else '' }}"
        data-shell-engine="{{ shell_engine|default('podman') }}">
        {% for shell in containers %}
        <div id="shell-{{ shell.id }}"
            class="group relative bg-[#0d1117]/40 backdrop-blur-md border border-white/5 rounded-2xl overflow-hidden hover:bg-[#0d1117]/60 hover:border-blue-500/30 transition-all duration-300 shadow-xl p-5">

            <div class="flex flex-col lg:flex-row lg:items-center gap-6">
                <!-- 1. Identity -->
                <div class="flex items-start lg:w-1/4 gap-4">
                    <div class="relative mt-1">
                        <span
                            class="block w-3 h-3 rounded-full {% if 'running' in shell.status %}bg-emerald-500 shadow-[0_0_12px_rgba(16,185,129,0.5)]{% else %}bg-zinc-500{% endif %}"></span>
                        {% if 'running' in shell.status %}
                        <span
                            class="absolute inset-0 w-3 h-3 rounded-full bg-emerald-500 animate-ping opacity-75"></span>
                        {% endif %}
                    </div>
                    <div class="flex-1 min-w-0">
                        <h3
                            class="font-black text-white text-lg truncate leading-none mb-2 group-hover:text-blue-400 transition-colors">
                            {{ shell.name|truncate(20) }}
                        </h3>
                        <div class="flex items-center gap-2">
                            <span
                                class="px-2 py-0.5 rounded-md bg-white/5 text-[10px] text-zinc-400 font-mono border border-white/5 flex items-center gap-1">
                                <i data-lucide="hash" class="w-3 h-3"></i>
                                {{ shell.short_id }}
                            </span>
                            <span
                                class="px-2 py-0.5 rounded-md bg-blue-500/10 text-[10px] text-blue-400 font-black uppercase tracking-wider border border-blue-500/10">
                                {{ shell.distro }}
                            </span>
                            <span
                                class="px-2 py-0.5 rounded-md {% if shell.engine == 'kata' %}bg-green-500/10 text-green-400{% else %}bg-zinc-500/10 text-zinc-400{% endif %} text-[10px] font-black uppercase tracking-wider border border-white/5">
                                {{ shell.engine|default('podman') }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- 2. Resource Stack (Stacked for space) -->
                <div class="flex-1 lg:max-w-xs flex flex-col gap-3">
                    <!-- CPU -->
                    <div class="space-y-1">
                        <div
                            class="flex justify-between items-center text-[9px] font-black tracking-widest leading-none">
                            <span class="text-zinc-500 uppercase">CPU LOAD</span>
                            <span id="stat-{{ shell.id }}-cpu-val" class="text-emerald-400 font-mono">
                                {{ shell.stats.cpu_percent }}%
                            </span>
                        </div>
                        <div class="h-1 w-full bg-white/5 rounded-full overflow-hidden">
                            <div id="stat-{{ shell.id }}-cpu-bar"
                                class="h-full bg-emerald-500 transition-all duration-500 rounded-full"
                                style="width: {{ shell.stats.cpu_percent }}%"></div>
                        </div>
                    </div>
                    <!-- Memory -->
                    <div class="space-y-1">
                        <div
                            class="flex justify-between items-center text-[9px] font-black tracking-widest leading-none">
                            <span class="text-zinc-500 uppercase">Memory</span>
                            <span id="stat-{{ shell.id }}-mem-val" class="text-blue-400 font-mono">
                                {{ (shell.stats.mem_usage_mb)|round(0) }}MB
                            </span>
                        </div>
                        <div class="h-1 w-full bg-white/5 rounded-full overflow-hidden">
                            <div id="stat-{{ shell.id }}-mem-bar"
                                class="h-full bg-blue-500 transition-all duration-500 rounded-full"
                                style="width: {{ shell.stats.mem_percent }}%"></div>
                        </div>
                    </div>
                    <!-- Storage -->
                    <div class="space-y-1">
                        <div
                            class="flex justify-between items-center text-[9px] font-black tracking-widest leading-none">
                            <span class="text-zinc-500 uppercase">Storage</span>
                            <span id="stat-{{ shell.id }}-storage-val" class="text-blue-400 font-mono">
                                {{ (shell.stats.storage_usage_mb)|round(0) }}MB
                            </span>
                        </div>
                        <div class="h-1 w-full bg-white/5 rounded-full overflow-hidden">
                            <div id="stat-{{ shell.id }}-storage-bar"
                                class="h-full bg-blue-500 transition-all duration-500 rounded-full"
                                style="width: {{ (shell.stats.storage_usage_mb / (shell.storage_limit_gb * 1024) * 100) | round(2) if shell.storage_limit_gb > 0 else 0 }}%">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 3. Network & Activity -->
                <div class="lg:w-56 space-y-3 flex flex-col justify-center border-l-0 lg:border-l border-white/5 pl-0 lg:pl-6 shrink-0">
                    <div class="space-y-1">
                        <div class="flex justify-between items-center text-[9px] font-black tracking-widest leading-none">
                            <span class="text-zinc-500 flex items-center gap-2"><i data-lucide="arrow-down" class="w-3 h-3 text-emerald-500/50"></i> DOWN</span>
                            <span id="stat-{{ shell.id }}-dl-val" class="text-emerald-400 font-mono">{{ shell.stats.net_rx_mb }} MB</span>
                        </div>
                        <div class="h-1 w-full bg-white/5 rounded-full overflow-hidden">
                            <div id="stat-{{ shell.id }}-dl-bar" class="h-full bg-emerald-500 transition-all duration-500 rounded-full"
                                style="width: {{ [((shell.stats.net_rx_speed_kbps or 0) / ((shell.net_limit_mbps or 50) * 1024) * 100)|round(2), 100]|min }}%"></div>
                        </div>
                    </div>
                    <div class="space-y-1">
                        <div class="flex justify-between items-center text-[9px] font-black tracking-widest leading-none">
                            <span class="text-zinc-500 flex items-center gap-2"><i data-lucide="arrow-up" class="w-3 h-3 text-blue-500/50"></i> UP</span>
                            <span id="stat-{{ shell.id }}-ul-val" class="text-blue-400 font-mono">{{ shell.stats.net_tx_mb }} MB</span>
                        </div>
                        <div class="h-1 w-full bg-white/5 rounded-full overflow-hidden">
                            <div id="stat-{{ shell.id }}-ul-bar" class="h-full bg-blue-500 transition-all duration-500 rounded-full"
                                style="width: {{ [((shell.stats.net_tx_speed_kbps or 0) / ((shell.net_limit_mbps or 50) * 1024) * 100)|round(2), 100]|min }}%"></div>
                        </div>
                    </div>
                </div>

                <!-- 4. Lifespan & Actions -->
                <div class="flex-1 flex items-center gap-8 border-l-0 lg:border-l border-white/5 pl-0 lg:pl-6">
                    <div class="w-full min-w-[200px] lg:w-48">
                        <div class="flex justify-between items-center mb-1">
                            <span class="text-[10px] text-zinc-500 uppercase font-black tracking-widest">Lifespan</span>
                            {% if shell.lifespan_pending|default(false) %}
                            <span id="stat-{{ shell.id }}-life-val"
                                class="text-[10px] font-black font-mono text-zinc-500"
                                title="Timer starts when the shell is ready to open">—</span>
                            {% else %}
                            <span id="stat-{{ shell.id }}-life-val"
                                class="text-[10px] font-black font-mono {% if shell.time_left_percent < 20 %}text-red-400 animate-pulse{% elif shell.time_left_percent < 50 %}text-orange-400{% else %}text-emerald-400{% endif %}">
                                {{ shell.time_left_mins }}m
                            </span>
                            {% endif %}
                        </div>
                        <div class="h-1.5 w-full bg-white/5 rounded-full overflow-hidden">
                            {% if shell.lifespan_pending|default(false) %}
                            <div id="stat-{{ shell.id }}-life-bar"
                                class="h-full transition-all duration-1000 rounded-full bg-zinc-600/40"
                                style="width: 100%"
                                title="Starts when ready"></div>
                            {% else %}
                            <div id="stat-{{ shell.id }}-life-bar"
                                class="h-full transition-all duration-1000 rounded-full {% if shell.time_left_percent < 20 %}bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.5)]{% elif shell.time_left_percent < 50 %}bg-orange-500{% else %}bg-emerald-500{% endif %}"
                                style="width: {{ shell.time_left_percent }}%"></div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="flex items-center gap-2 lg:ml-auto" id="shell-{{ shell.id }}-actions">
                        {% if shell.setup_failed %}
                        <div class="p-2.5 text-amber-400 flex items-center justify-center relative max-w-[140px]"
                            title="Provisioning failed (package install, network, or git clone). Private repos need credentials; Git over HTTP must be enabled for unauthenticated clone. Destroy and retry, or pull images first to avoid timeouts."
                            id="shell-{{ shell.id }}-setup-failed">
                            <i data-lucide="alert-triangle" class="w-5 h-5 shrink-0"></i>
                        </div>
                        {% elif shell.is_ready %}
                        <button
                            onclick="window.open('/shells/terminal/{{ shell.id }}', '_blank', 'width=1000,height=700')"
                            class="p-2.5 bg-white/5 hover:bg-blue-600/20 text-zinc-400 hover:text-blue-400 border border-white/5 hover:border-blue-500/30 rounded-xl transition-all"
                            title="Open Terminal" id="shell-{{ shell.id }}-terminal-btn">
                            <i data-lucide="terminal" class="w-5 h-5"></i>
                        </button>
                        <a href="/shells/webview/{{ shell.public_id|default(shell.id, true) }}/"
                            target="_blank" rel="noopener noreferrer"
                            class="p-2.5 bg-white/5 hover:bg-violet-600/20 text-zinc-400 hover:text-violet-300 border border-white/5 hover:border-violet-500/30 rounded-xl transition-all inline-flex"
                            title="Open web preview{% if shell.web_container_port %} (container port {{ shell.web_container_port }}){% endif %}"
                            id="shell-{{ shell.id }}-webview-btn">
                            <i data-lucide="globe" class="w-5 h-5"></i>
                        </a>
                        {% else %}
                        <div class="p-2.5 text-blue-400 flex items-center justify-center relative"
                            title="Deploying environment (first image pull can take several minutes—do not click Launch again or you may create duplicate shells)..."
                            id="shell-{{ shell.id }}-deploying-spinner">
                            <i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i>
                        </div>
                        {% endif %}
                        <button onclick="openDeleteModal('{{ shell.id }}')"
                            class="p-2.5 bg-white/5 hover:bg-red-600/20 text-zinc-400 hover:text-red-400 border border-white/5 hover:border-red-500/30 rounded-xl transition-all"
                            title="Destroy Shell">
                            <i data-lucide="trash-2" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Hover Decoration -->
            <div
                class="absolute inset-0 pointer-events-none border border-white/0 group-hover:border-white/5 rounded-2xl transition-colors duration-500">
            </div>
        </div>
        {% else %}
        <div
            class="rounded-xl border border-white/5 bg-black/20 overflow-hidden min-h-[400px] flex items-center justify-center">
            <div class="flex flex-col items-center justify-center py-20 text-center">
                <div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mb-4">
                    <i data-lucide="box" class="h-8 w-8 text-zinc-600"></i>
                </div>
                <h3 class="text-lg font-bold text-zinc-300">No Shells Found</h3>
                <p class="text-zinc-500 text-sm mt-1 max-w-sm">Create a disposable environment to start testing
                    repository in a secure, isolated container.</p>
                <button onclick="openCreateModal()"
                    class="mt-6 glass-button-primary px-6 py-2 rounded-lg text-sm font-bold shadow-lg">
                    Create Shell
                </button>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Create Modal -->
    <div id="create-modal"
        class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4 modal-transition">
        <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[99]"></div>
        <div
            class="modal-content glass-modal w-full max-w-2xl modal-content-transition relative z-[100] p-0 flex flex-col max-h-[90vh]">

            <!-- Header -->
            <div class="flex justify-between items-center p-6 border-b border-white/5">
                <div>
                    <h2 class="text-xl font-bold text-white">New Environment</h2>
                    <p class="text-zinc-400 text-sm">Configure your disposable workspace.</p>
                </div>
                <!-- Custom close button using repo global btn style (which intercepts -close-btn) -->
                <button id="create-modal-close-btn" class="text-zinc-500 hover:text-white transition-colors"
                    onclick="closeCreateModal()">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <!-- Scrollable Content -->
            <div class="p-6 overflow-y-auto space-y-8 flex-1">

                <!-- 1. Distro Selection -->
                <div>
                    <label class="block text-[10px] font-black text-zinc-500 uppercase tracking-widest mb-4">Select
                        Platform</label>
                    <div class="grid grid-cols-3 gap-4">
                        <button onclick="selectDistro('debian')" id="btn-debian"
                            class="distro-btn group relative p-5 rounded-2xl border border-white/5 hover:border-blue-500/30 bg-white/[0.03] text-center transition-all duration-300">
                            <div
                                class="absolute inset-0 bg-blue-500/0 group-hover:bg-blue-500/[0.02] transition-colors rounded-2xl">
                            </div>
                            <img src="{{ url_for('static', filename='debian.svg') }}"
                                class="h-8 mx-auto mt-1 mb-5 grayscale brightness-200 opacity-60 group-hover:grayscale-0 group-hover:brightness-100 group-hover:opacity-100 transition-all duration-500 "
                                alt="Debian">
                            <div
                                class="font-black text-zinc-400 group-hover:text-white transition-colors text-xs uppercase tracking-tight">
                                Debian</div>
                        </button>
                        <button onclick="selectDistro('fedora')" id="btn-fedora"
                            class="distro-btn group relative p-5 rounded-2xl border border-white/5 hover:border-blue-500/30 bg-white/[0.03] text-center transition-all duration-300">
                            <div
                                class="absolute inset-0 bg-blue-500/0 group-hover:bg-blue-500/[0.02] transition-colors rounded-2xl">
                            </div>
                            <img src="{{ url_for('static', filename='fedora.svg') }}"
                                class="h-10 mx-auto mb-4 grayscale opacity-40 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500 "
                                alt="Fedora">
                            <div
                                class="font-black text-zinc-400 group-hover:text-white transition-colors text-xs uppercase tracking-tight">
                                Fedora</div>
                        </button>
                        <button onclick="selectDistro('archlinux')" id="btn-archlinux"
                            class="distro-btn group relative p-5 rounded-2xl border border-white/5 hover:border-blue-500/30 bg-white/[0.03] text-center transition-all duration-300">
                            <div
                                class="absolute inset-0 bg-blue-500/0 group-hover:bg-blue-500/[0.02] transition-colors rounded-2xl">
                            </div>
                            <img src="{{ url_for('static', filename='arch.svg') }}"
                                class="h-10 mx-auto mb-4 grayscale opacity-40 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500 "
                                alt="Arch Linux">
                            <div
                                class="font-black text-zinc-400 group-hover:text-white transition-colors text-xs uppercase tracking-tight">
                                Arch Linux</div>
                        </button>
                    </div>
                </div>

                <!-- 2. Resources -->
                <div>
                    <label
                        class="block text-xs font-bold text-zinc-500 uppercase tracking-widest mb-4">Resources</label>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- RAM -->
                        <div>
                            <div class="flex justify-between mb-2">
                                <label class="text-sm font-medium text-zinc-300">RAM Allocation</label>
                                <span class="text-sm font-mono text-blue-400" id="ram-val">{{ limits.ram.default }}
                                    MB</span>
                            </div>
                            <input type="range" id="input-ram" min="{{ limits.ram.min }}" max="{{ limits.ram.max }}"
                                value="{{ limits.ram.default }}" step="512"
                                class="w-full toggle-style-range cursor-pointer">
                            <div class="flex justify-between mt-1 text-[10px] text-zinc-600 font-mono">
                                <span>{{ limits.ram.min }}MB</span>
                                <span>{{ limits.ram.max }}MB</span>
                            </div>
                        </div>

                        <!-- vCPU -->
                        <div>
                            <div class="flex justify-between mb-2">
                                <label class="text-sm font-medium text-zinc-300">vCPU Allocation</label>
                                <span class="text-sm font-mono text-blue-400" id="cpu-val">{{ limits.cpu.default }}
                                    Core</span>
                            </div>
                            <input type="range" id="input-cpu" min="{{ limits.cpu.min }}" max="{{ limits.cpu.max }}"
                                value="{{ limits.cpu.default }}" step="0.5"
                                class="w-full toggle-style-range cursor-pointer">
                            <div class="flex justify-between mt-1 text-[10px] text-zinc-600 font-mono">
                                <span>{{ limits.cpu.min }}</span>
                                <span>{{ limits.cpu.max }}</span>
                            </div>
                        </div>

                        <!-- Storage -->
                        <div>
                            <div class="flex justify-between mb-2">
                                <label class="text-sm font-medium text-zinc-300">Storage Limit</label>
                                <span class="text-sm font-mono text-blue-400" id="storage-val">{{ limits.storage.default
                                    }} GB</span>
                            </div>
                            <input type="range" id="input-storage" min="{{ limits.storage.min }}"
                                max="{{ limits.storage.max }}" value="{{ limits.storage.default }}" step="1"
                                class="w-full toggle-style-range cursor-pointer">
                            <div class="flex justify-between mt-1 text-[10px] text-zinc-600 font-mono">
                                <span>{{ limits.storage.min }}GB</span>
                                <span>{{ limits.storage.max }}GB</span>
                            </div>
                        </div>

                        <!-- Runtime -->
                        <div>
                            <div class="flex justify-between mb-2">
                                <label class="text-sm font-medium text-zinc-300">Runtime Duration</label>
                                <span class="text-sm font-mono text-blue-400" id="runtime-val">{{ limits.runtime.default
                                    }} Mins</span>
                            </div>
                            <input type="range" id="input-runtime" min="{{ limits.runtime.min }}"
                                max="{{ limits.runtime.max }}" value="{{ limits.runtime.default }}" step="30"
                                class="w-full toggle-style-range cursor-pointer">
                            <div class="flex justify-between mt-1 text-[10px] text-zinc-600 font-mono">
                                <span>{{ limits.runtime.min }}m</span>
                                <span>{{ limits.runtime.max }}m</span>
                            </div>
                        </div>

                        <!-- Network Speed -->
                        <div>
                            <div class="flex justify-between mb-2">
                                <label class="text-sm font-medium text-zinc-300">Network Speed</label>
                                <span class="text-sm font-mono text-blue-400" id="netspeed-val">{{
                                    limits.network.default
                                    }} Mbps</span>
                            </div>
                            <input type="range" id="input-netspeed" min="{{ limits.network.min }}"
                                max="{{ limits.network.max }}" value="{{ limits.network.default }}" step="50"
                                class="w-full toggle-style-range cursor-pointer">
                            <div class="flex justify-between mt-1 text-[10px] text-zinc-600 font-mono">
                                <span>{{ limits.network.min }}Mbps</span>
                                <span>{{ limits.network.max }}Mbps</span>
                            </div>
                        </div>

                        <!-- Web preview port (in-container; proxied at /shells/webview/&lt;id&gt;/) -->
                        <div>
                            <div class="flex justify-between mb-2">
                                <label class="text-sm font-medium text-zinc-300">Web preview port</label>
                                <span class="text-[10px] text-zinc-500 font-mono">in container</span>
                            </div>
                            <input type="number" id="input-web-port" min="1" max="65535" value="8080"
                                class="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-white text-sm font-mono focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/30 outline-none"
                                title="TCP port your app listens on (e.g. 8080, 3000, 80). Preview URL strips the path prefix for you.">
                            <p class="text-[10px] text-zinc-600 mt-1">Traffic appears at <span class="text-zinc-500 font-mono">/shells/webview/&lt;shell-id&gt;/</span> once ready.</p>
                        </div>
                    </div>
                </div>

                <!-- Cost Estimate -->
                <div class="flex justify-between items-center mb-6 p-4 bg-white/5 border border-white/10 rounded-xl">
                    <div>
                        <h3 class="text-white font-bold text-sm">Estimated Cost</h3>
                        <p class="text-[11px] text-zinc-500">Resources reserved multiplied by runtime steps (1 chunk =
                            30m).</p>
                    </div>
                    <div class="text-right">
                        <div class="text-2xl font-black text-yellow-400" id="shell-cost-total">0</div>
                        <div class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Credits</div>
                    </div>
                </div>

                <!-- 3. Configuration -->
                <div>
                    <label
                        class="block text-xs font-bold text-zinc-500 uppercase tracking-widest mb-4">Configuration</label>
                    <div class="space-y-4">
                        <!-- Create User -->
                        <label
                            class="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5 cursor-pointer hover:bg-white/10 transition-colors">
                            <input type="checkbox" id="check-create-user"
                                class="w-5 h-5 rounded border-zinc-600 text-blue-600 focus:ring-blue-500 bg-zinc-700">
                            <div>
                                <div class="font-medium text-zinc-200">Create User Account</div>
                                <div class="text-xs text-zinc-500">Creates a user matching your {{ brand_name }} username</div>
                            </div>
                        </label>

                        <!-- Clone Repo (only when viewing a repository) -->
                        {% if repo %}
                        <div class="border border-white/5 rounded-lg bg-white/5 overflow-hidden">
                            <label
                                class="flex items-center gap-3 p-3 cursor-pointer hover:bg-white/10 transition-colors border-b border-white/5">
                                <input type="checkbox" id="check-clone-repo"
                                    class="w-5 h-5 rounded border-zinc-600 text-blue-600 focus:ring-blue-500 bg-zinc-700"
                                    onchange="toggleRepoOptions(this.checked)">
                                <div>
                                    <div class="font-medium text-zinc-200">Clone Repository</div>
                                    <div class="text-xs text-zinc-500">Clones over HTTPS into the home directory.</div>
                                </div>
                            </label>

                            <!-- Hidden Repo Options -->
                            <div id="repo-options" class="hidden p-4 bg-black/20 space-y-3" data-repo-id="{{ repo.id if repo else '' }}" data-default-branch="{{ branch if repo else 'main' }}">
                                <div class="relative">
                                    <label class="block text-xs font-medium text-zinc-400 mb-1">Branch</label>
                                    {% set _shell_br = branch if repo else 'main' %}
                                    {{ custom_select(id="select-branch", options=[{"value": _shell_br, "label": _shell_br}], selected_value=_shell_br, selected_label=_shell_br, mode="form", class="w-full", disabled=true, dynamic=true, picker_title="Branch") }}
                                    <i id="branch-loader"
                                        class="hidden absolute right-3 top-9 w-4 h-4 animate-spin border-2 border-zinc-500 border-t-transparent rounded-full"></i>
                                </div>
                            </div>
                        </div>
                        {% endif %}

                    </div>
                </div>

            </div>

            <!-- Footer -->
            <div class="p-4 border-t border-white/5 flex justify-end gap-3 bg-black/20 rounded-b-2xl">
                <button id="create-modal-cancel-btn" onclick="closeCreateModal()"
                    class="glass-button no-hover-lift text-zinc-300 font-bold py-2.5 px-6 rounded-xl text-sm">Cancel</button>
                <button type="button" onclick="createShell()" id="create-btn"
                    class="create-file-btn-shine glass-button-primary font-bold py-2.5 px-8 rounded-xl text-sm flex items-center disabled:opacity-50 disabled:cursor-not-allowed">
                    Launch Environment
                </button>
            </div>
        </div>
    </div>
    <!-- Delete Confirmation Modal -->
    <div id="delete-confirm-modal"
        class="hidden fixed inset-0 z-[100] flex items-center justify-center p-4 modal-transition modal-hidden">
        <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[99]"></div>
        <div
            class="modal-content glass-modal w-full max-w-md modal-content-transition relative z-[100] p-8 text-center">
            <div
                class="w-20 h-20 bg-red-500/10 rounded-full flex items-center justify-center mx-auto mb-6 border border-red-500/20">
                <i data-lucide="alert-triangle" class="w-10 h-10 text-red-500"></i>
            </div>
            <h2 class="text-2xl font-black text-white mb-2">Delete Shell?</h2>
            <p class="text-zinc-400 mb-8">This will permanently destroy the environment and all unsaved files within it.
                This action cannot be undone.</p>

            <div class="grid grid-cols-2 gap-4">
                <button onclick="closeDeleteModal()"
                    class="px-6 py-3 rounded-xl border border-white/10 text-zinc-400 font-bold hover:bg-white/5 transition-colors">
                    Cancel
                </button>
                <button id="confirm-delete-btn"
                    class="px-6 py-3 rounded-xl bg-red-600 hover:bg-red-500 text-white font-black shadow-lg shadow-red-600/20 transition-all ">
                    Confirm Delete
                </button>
            </div>
        </div>
    </div>

    <!-- History Modal -->
    <div id="history-modal"
        class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4 modal-transition">
        <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[99]"></div>
        <div class="modal-content glass-modal w-full max-w-2xl modal-content-transition relative z-[100] p-0 flex flex-col max-h-[90vh]">
            <!-- Header -->
            <div class="flex justify-between items-center p-6 border-b border-white/5">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-blue-500/10 rounded-xl flex items-center justify-center text-blue-400">
                        <i data-lucide="scroll-text" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <h2 class="text-xl font-bold text-white leading-tight">Shells History</h2>
                        <p class="text-zinc-500 text-xs">Recently created and deleted environments.</p>
                    </div>
                </div>
                <button onclick="closeHistoryModal()"
                    class="p-2 text-zinc-500 hover:text-white hover:bg-white/5 rounded-lg transition-colors">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <!-- Scrollable Content -->
            <div class="p-4 overflow-y-auto flex-1 min-h-0 custom-scrollbar" id="history-content">
                <div class="flex flex-col items-center justify-center py-12 text-zinc-600">
                    <i data-lucide="loader-2" class="w-8 h-8 animate-spin mb-4"></i>
                    <p>Fetching history...</p>
                </div>
            </div>

            <!-- Footer -->
            <div class="p-4 border-t border-white/5 flex justify-between items-center bg-black/20 rounded-b-2xl">
                <p class="text-[10px] text-zinc-500 font-medium uppercase tracking-widest">Showing last 50 events</p>
                <button id="history-modal-close-btn" onclick="closeHistoryModal()"
                    class="px-4 py-2 text-sm font-black text-zinc-400 hover:text-white transition-colors">Close</button>
            </div>
        </div>
    </div>

    <!-- History Details Modal -->
    <div id="history-details-modal"
        class="hidden fixed inset-0 z-[110] flex items-center justify-center p-4 modal-transition modal-hidden">
        <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[109]"></div>
        <div
            class="modal-content glass-modal w-full max-w-md modal-content-transition relative z-[110] p-0 flex flex-col">
            <!-- Header -->
            <div class="flex justify-between items-center p-6 border-b border-white/5">
                <div class="flex items-center gap-3">
                    <div id="specs-modal-icon-bg" class="w-10 h-10 rounded-xl flex items-center justify-center">
                        <i id="specs-modal-icon" data-lucide="info" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <h2 class="text-xl font-bold text-white leading-tight" id="specs-modal-title">Shell Specs</h2>
                        <p class="text-zinc-500 text-xs" id="specs-modal-subtitle">Configuration Details</p>
                    </div>
                </div>
                <button onclick="closeSpecsModal()"
                    class="p-2 text-zinc-500 hover:text-white hover:bg-white/5 rounded-lg transition-colors">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <!-- Content -->
            <div class="p-6">
                <!-- Action / Reason Display -->
                <div id="specs-modal-reason-container"
                    class="mb-6 p-4 rounded-xl bg-white/5 border border-white/5 text-center hidden">
                    <p class="text-sm font-medium" id="specs-modal-reason-text"></p>
                </div>

                <!-- Specs Grid -->
                <div class="grid grid-cols-2 gap-4 mb-6">
                    <div class="p-4 bg-black/20 rounded-xl border border-white/5 text-center">
                        <i data-lucide="memory-stick" class="w-5 h-5 text-zinc-400 mx-auto mb-2"></i>
                        <p class="text-[10px] text-zinc-500 font-bold uppercase tracking-wider mb-1">RAM</p>
                        <p class="text-xl font-black text-white" id="specs-val-ram">-</p>
                    </div>
                    <div class="p-4 bg-black/20 rounded-xl border border-white/5 text-center">
                        <i data-lucide="cpu" class="w-5 h-5 text-zinc-400 mx-auto mb-2"></i>
                        <p class="text-[10px] text-zinc-500 font-bold uppercase tracking-wider mb-1">vCPU</p>
                        <p class="text-xl font-black text-white" id="specs-val-cpu">-</p>
                    </div>
                    <div class="p-4 bg-black/20 rounded-xl border border-white/5 text-center">
                        <i data-lucide="hard-drive" class="w-5 h-5 text-zinc-400 mx-auto mb-2"></i>
                        <p class="text-[10px] text-zinc-500 font-bold uppercase tracking-wider mb-1">Storage</p>
                        <p class="text-xl font-black text-white" id="specs-val-storage">-</p>
                    </div>
                    <div class="p-4 bg-black/20 rounded-xl border border-white/5 text-center">
                        <i data-lucide="clock" class="w-5 h-5 text-zinc-400 mx-auto mb-2"></i>
                        <p class="text-[10px] text-zinc-500 font-bold uppercase tracking-wider mb-1">Runtime</p>
                        <p class="text-xl font-black text-white" id="specs-val-runtime">-</p>
                    </div>
                </div>

                <!-- Billing Block -->
                <div class="bg-blue-500/5 rounded-xl border border-blue-500/20 overflow-hidden">
                    <div class="p-4 flex items-center justify-between border-b border-blue-500/10">
                        <div class="flex items-center gap-3">
                            <i data-lucide="coins" class="w-5 h-5 text-blue-400"></i>
                            <span class="text-sm font-bold text-zinc-300">Total Charged</span>
                        </div>
                        <span class="text-xl font-black text-blue-400" id="specs-val-cost">-</span>
                    </div>
                    <div id="specs-refund-block" class="p-4 flex items-center justify-between bg-emerald-500/10 hidden">
                        <div class="flex items-center gap-3">
                            <i data-lucide="corner-down-left" class="w-5 h-5 text-emerald-400"></i>
                            <span class="text-sm font-bold text-emerald-400/80">Credits Refunded</span>
                        </div>
                        <span class="text-lg font-black text-emerald-400" id="specs-val-refund">-</span>
                    </div>
                </div>
            </div>

            <!-- Footer -->
            <div class="p-4 border-t border-white/5 flex justify-end bg-black/20 rounded-b-2xl">
                <button onclick="closeSpecsModal()"
                    class="px-6 py-2 rounded-lg bg-white/5 hover:bg-white/10 text-white text-sm font-bold transition-colors">Close</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    (function () {
        window.selectedDistro = 'debian';
        if (window.lucide) window.lucide.createIcons();

        // --- History Modal ---
        window.openHistoryModal = async function () {
            const modal = document.getElementById('history-modal');
            window.openModalAnimation(modal);
            const content = document.getElementById('history-content');

            try {
                const res = await fetch('/shells/history');
                const text = await res.text();
                const data = (function () { try { return JSON.parse(text); } catch (_) { return null; } })();
                if (!res.ok) {
                    const errMsg = data && data.error ? data.error : (res.status === 401 ? 'Please sign in to view history.' : `Request failed (${res.status})`);
                    if (data && data.traceback) console.error('[shells/history] Traceback:', data.traceback);
                    else if (text && !data) console.error('[shells/history] Response body:', text);
                    throw new Error(errMsg + (data && data.traceback ? '\n\n(Check console for traceback)' : ''));
                }
                const history = Array.isArray(data) ? data : (data || []);
                if (!Array.isArray(history)) {
                    throw new Error('Invalid response format');
                }

                if (history.length === 0) {
                    content.innerHTML = `
                <div class="flex flex-col items-center justify-center py-20 text-zinc-500">
                    <div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mb-4 text-zinc-700">
                         <i data-lucide="clock" class="w-8 h-8"></i>
                    </div>
                    <p class="text-sm font-medium">No history found yet.</p>
                </div>
            `;
                    if (window.lucide) window.lucide.createIcons();
                    return;
                }

                content.innerHTML = history.map(item => {
                    let colorClass = 'text-zinc-400';
                    let icon = 'trash-2';
                    let badgeColor = 'bg-zinc-500/10 text-zinc-500';

                    if (item.action === 'created') {
                        colorClass = 'text-emerald-400';
                        icon = 'plus-circle';
                        badgeColor = 'bg-emerald-500/10 text-emerald-400';
                    } else if (item.action === 'deleted') {
                        if (item.reason === 'Storage Quota Exceeded') {
                            colorClass = 'text-red-400';
                            badgeColor = 'bg-red-500/10 text-red-400';
                            icon = 'shield-alert';
                        } else if (item.reason === 'Lifespan Expired' || (item.reason && item.reason.includes('Deleted by'))) {
                            colorClass = 'text-amber-400';
                            badgeColor = 'bg-amber-500/10 text-amber-400';
                            icon = 'clock';
                        }
                    }

                    const date = new Date(item.event_time);
                    const timeStr = date.toLocaleString();

                    const serializedData = btoa(encodeURIComponent(JSON.stringify(item)));

                    return `
                <div class="group flex items-center gap-4 p-4 rounded-xl hover:bg-white/[0.03] border border-transparent hover:border-white/5 transition-all duration-200 cursor-pointer" onclick="openSpecsModal('${serializedData}')">
                    <div class="w-10 h-10 rounded-xl ${badgeColor} flex items-center justify-center shrink-0">
                        <i data-lucide="${icon}" class="w-5 h-5"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex justify-between items-start gap-2">
                             <h4 class="font-bold text-white text-sm truncate uppercase tracking-tight">${item.shell_name.split('_').pop()}</h4>
                             <span class="text-[10px] font-mono text-zinc-500 whitespace-nowrap">${timeStr}</span>
                        </div>
                        <div class="flex items-center gap-2 mt-1">
                            <span class="px-1.5 py-0.5 rounded text-[9px] font-black uppercase tracking-tighter bg-white/5 text-zinc-500 border border-white/5">
                                ${item.distro}
                            </span>
                            <span class="text-xs font-bold ${colorClass}">
                                ${item.action === 'created' ? 'Shell Created' : (item.reason || 'Shell Deleted')}
                            </span>
                        </div>
                    </div>
                </div>
            `;
                }).join('');

                if (window.lucide) window.lucide.createIcons();

            } catch (e) {
                const msg = e && e.message ? e.message : 'Failed to load history.';
                console.error('[shells/history]', e);
                content.innerHTML = `<p class="text-red-500 p-8 text-center">${msg}</p><p class="text-zinc-500 text-xs p-4 text-center">Open DevTools (F12) → Console for details</p>`;
            }
        }

        window.closeHistoryModal = function () {
            const modal = document.getElementById('history-modal');
            window.closeModalAnimation(modal);
        }

        window.openSpecsModal = function (serializedObj) {
            try {
                const item = JSON.parse(decodeURIComponent(atob(serializedObj)));

                document.getElementById('specs-modal-title').textContent = item.shell_name.split('_').pop();
                document.getElementById('specs-modal-subtitle').textContent = new Date(item.event_time).toLocaleString();

                const specs = item.specs || {};
                document.getElementById('specs-val-ram').textContent = (specs.ram || '?') + 'MB';
                document.getElementById('specs-val-cpu').textContent = specs.cpu || '?';
                document.getElementById('specs-val-storage').textContent = (specs.storage || '?') + 'GB';
                document.getElementById('specs-val-runtime').textContent = (specs.runtime || '?') + 'M';

                document.getElementById('specs-val-cost').textContent = (specs.cost !== undefined ? specs.cost : '?') + ' CR';

                const refundBlock = document.getElementById('specs-refund-block');
                if (item.action === 'deleted') {
                    const reasonContainer = document.getElementById('specs-modal-reason-container');
                    const reasonText = document.getElementById('specs-modal-reason-text');

                    reasonContainer.classList.remove('hidden');
                    reasonText.textContent = item.reason || 'Destroyed';

                    if (item.reason && item.reason.includes('Quota')) {
                        reasonContainer.className = 'mb-6 p-4 rounded-xl border text-center bg-red-500/10 border-red-500/20 text-red-500';
                    } else if (item.reason === 'Lifespan Expired') {
                        reasonContainer.className = 'mb-6 p-4 rounded-xl border text-center bg-amber-500/10 border-amber-500/20 text-amber-500';
                    } else {
                        reasonContainer.className = 'mb-6 p-4 rounded-xl border text-center bg-zinc-500/10 border-zinc-500/20 text-zinc-400';
                    }

                    if (specs.refund > 0) {
                        refundBlock.classList.remove('hidden');
                        document.getElementById('specs-val-refund').textContent = specs.refund + ' CR';
                    } else {
                        refundBlock.classList.add('hidden');
                    }
                } else {
                    document.getElementById('specs-modal-reason-container').classList.add('hidden');
                    refundBlock.classList.add('hidden');
                }

                // Modal styling logic based on Action
                const iconBg = document.getElementById('specs-modal-icon-bg');
                const iconEl = document.getElementById('specs-modal-icon');
                if (item.action === 'created') {
                    iconBg.className = 'w-10 h-10 rounded-xl flex items-center justify-center bg-emerald-500/10 text-emerald-400';
                    iconEl.setAttribute('data-lucide', 'plus-circle');
                } else {
                    iconBg.className = 'w-10 h-10 rounded-xl flex items-center justify-center bg-amber-500/10 text-amber-400';
                    iconEl.setAttribute('data-lucide', 'clock');
                    if (item.reason && item.reason.includes('Quota')) {
                        iconBg.className = 'w-10 h-10 rounded-xl flex items-center justify-center bg-red-500/10 text-red-500';
                        iconEl.setAttribute('data-lucide', 'shield-alert');
                    }
                }

                if (window.lucide) window.lucide.createIcons();

                const modal = document.getElementById('history-details-modal');
                window.openModalAnimation(modal);
            } catch (e) {
                console.error("Failed to open specs modal", e);
            }
        };

        window.closeSpecsModal = function () {
            const modal = document.getElementById('history-details-modal');
            window.closeModalAnimation(modal);
        };

        // --- Sliders ---
        window.calculateCost = () => {
            const ram = parseInt(document.getElementById('input-ram').value) || 512;
            const cpu = parseFloat(document.getElementById('input-cpu').value) || 0.5;
            const storage = parseInt(document.getElementById('input-storage').value) || 5;
            const runtime = parseInt(document.getElementById('input-runtime').value) || 30;
            const network = parseInt(document.getElementById('input-netspeed').value) || 50;

            const ramCredits = Math.floor(ram / 512);
            const cpuCredits = Math.floor(cpu / 0.5);
            const storageCredits = Math.floor(storage / 5);

            const netCredits = Math.floor(network / 50);

            const multiplier = Math.floor(runtime / 30);
            const total = (ramCredits + cpuCredits + storageCredits + netCredits) * multiplier;

            const costEl = document.getElementById('shell-cost-total');
            if (costEl) costEl.textContent = total;
            return total;
        };

        function updateSliderFill(el) {
            const min = parseFloat(el.min) || 0;
            const max = parseFloat(el.max) || 1;
            const val = parseFloat(el.value) || min;
            const pct = max > min ? ((val - min) / (max - min)) * 100 : 0;
            el.style.setProperty('--slider-pct', pct + '%');
        }
        const setupSlider = (id, valId, unit, isStorage = false) => {
            const el = document.getElementById(id);
            const valEl = document.getElementById(valId);
            if (!el || !valEl) return;
            updateSliderFill(el);
            el.addEventListener('input', e => {
                let val = parseFloat(e.target.value);
                if (isStorage) {
                    if (val <= 5) val = 5;
                    else if (val <= 10) val = 10;
                    else if (val <= 15) val = 15;
                    else val = 20;
                    e.target.value = val;
                }
                updateSliderFill(el);
                valEl.textContent = val + ' ' + unit;
                window.calculateCost();
            });
        };
        setupSlider('input-ram', 'ram-val', 'MB');
        setupSlider('input-cpu', 'cpu-val', 'Core');
        setupSlider('input-storage', 'storage-val', 'GB', true);
        setupSlider('input-runtime', 'runtime-val', 'Mins');
        setupSlider('input-netspeed', 'netspeed-val', 'Mbps');

        // --- Logic ---
        window.openCreateModal = async function () {
            resetModal();
            const modal = document.getElementById('create-modal');
            window.openModalAnimation(modal);
            const repoOptions = document.getElementById('repo-options');
            const repoId = repoOptions?.dataset?.repoId || '';
            if (repoId) {
                await loadBranches(repoId);
            }
        }

        window.closeCreateModal = function () {
            const modal = document.getElementById('create-modal');
            window.closeModalAnimation(modal);
        }

        function resetModal() {
            // 1. Reset Distro to Debian
            window.selectDistro('debian');

            // 2. Reset Sliders to defaults
            const defaults = {
                'input-ram': '{{ limits.ram.default }}',
                'ram-val': '{{ limits.ram.default }} MB',
                'input-cpu': '{{ limits.cpu.default }}',
                'cpu-val': '{{ limits.cpu.default }} Core',
                'input-storage': '{{ limits.storage.default }}',
                'storage-val': '{{ limits.storage.default }} GB',
                'input-runtime': '{{ limits.runtime.default }}',
                'runtime-val': '{{ limits.runtime.default }} Mins',
                'input-netspeed': '{{ limits.network.default }}',
                'netspeed-val': '{{ limits.network.default }} Mbps'
            };

            for (const [id, val] of Object.entries(defaults)) {
                const el = document.getElementById(id);
                if (el) {
                    if (el.tagName === 'INPUT') {
                        el.value = val.split(' ')[0];
                        if (el.type === 'range') updateSliderFill(el);
                    } else el.textContent = val;
                }
            }
            const webPortIn = document.getElementById('input-web-port');
            if (webPortIn) webPortIn.value = '8080';

            // 3. Reset Checkboxes
            const checkboxes = ['check-create-user', 'check-clone-repo'];
            checkboxes.forEach(id => {
                const el = document.getElementById(id);
                if (el) {
                    el.checked = false;
                    if (id === 'check-clone-repo') toggleRepoOptions(false);
                }
            });

            // 4. Reset Branch select
            const defaultBranch = document.getElementById('repo-options')?.dataset?.defaultBranch || 'main';
            if (typeof window.populateCustomSelect === 'function') {
                window.populateCustomSelect('select-branch', [{ value: defaultBranch, label: defaultBranch }], defaultBranch);
            }
            if (typeof window.setModalSelectDisabled === 'function') {
                window.setModalSelectDisabled('select-branch', true);
            }
            if (window.calculateCost) window.calculateCost();
        }

        // Initialize defaults on load
        window.addEventListener('DOMContentLoaded', resetModal);

        window.selectDistro = function (distro) {
            window.selectedDistro = distro;
            document.querySelectorAll('.distro-btn').forEach(btn => {
                // Reset all to glass state
                btn.className = "distro-btn group relative p-5 rounded-2xl border border-white/5 hover:border-blue-500/30 bg-white/[0.03] text-center transition-all duration-300";

                const img = btn.querySelector('img');
                if (img) {
                    const isDebian = btn.id === 'btn-debian';
                    const debianClasses = "grayscale brightness-200 opacity-60 group-hover:grayscale-0 group-hover:brightness-100 group-hover:opacity-100";
                    const otherClasses = "grayscale opacity-40 group-hover:grayscale-0 group-hover:opacity-100";
                    img.className = (isDebian ? "h-8 mt-1 mb-5 " + debianClasses : "h-10 mb-4 " + otherClasses) + " mx-auto transition-all duration-500 ";
                }

                const label = btn.querySelector('div:not(.absolute)');
                if (label) {
                    label.className = "font-black text-zinc-400 group-hover:text-white transition-colors text-xs uppercase tracking-tight";
                }
            });

            const activeBtn = document.getElementById(`btn-${distro}`);
            if (activeBtn) {
                // Apply active glow state
                activeBtn.className = "distro-btn group relative p-5 rounded-2xl border-blue-500/50 bg-blue-500/10 text-center transition-all duration-300 shadow-[0_0_20px_rgba(59,130,246,0.1)]";

                const img = activeBtn.querySelector('img');
                if (img) {
                    const isDebian = activeBtn.id === 'btn-debian';
                    img.className = (isDebian ? "h-8 mt-1 mb-5 brightness-100" : "h-10 mb-4") + " mx-auto grayscale-0 opacity-100";
                }

                const label = activeBtn.querySelector('div:not(.absolute)');
                if (label) {
                    label.className = "font-black text-white text-xs uppercase tracking-tight";
                }
            }
        }

        window.toggleRepoOptions = function (checked) {
            const opts = document.getElementById('repo-options');
            if (checked) opts.classList.remove('hidden');
            else opts.classList.add('hidden');
            if (checked && window.lucide) window.lucide.createIcons();
        }

        // --- Dynamic Shells Grid ---
        function esc(s) {
            if (s == null || s === undefined) return '';
            return String(s)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;');
        }

        function renderShellCard(shell) {
            const s = shell.stats || {};
            const storagePct = (shell.storage_limit_gb > 0 && s.storage_usage_mb != null)
                ? ((s.storage_usage_mb / (shell.storage_limit_gb * 1024)) * 100).toFixed(2) : 0;
            const lifePending = shell.lifespan_pending === true;
            const lifeClass = lifePending ? 'text-zinc-500'
                : shell.time_left_percent < 20 ? 'text-red-400 animate-pulse'
                : shell.time_left_percent < 50 ? 'text-orange-400' : 'text-emerald-400';
            const barClass = lifePending ? 'bg-zinc-600/40'
                : shell.time_left_percent < 20 ? 'bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.5)]'
                : shell.time_left_percent < 50 ? 'bg-orange-500' : 'bg-emerald-500';
            const lifeValText = lifePending ? '—' : `${shell.time_left_mins || 0}m`;
            const lifeBarW = lifePending ? 100 : (shell.time_left_percent || 0);
            const engine = shell.engine || 'podman';
            const engineClass = engine === 'kata' ? 'bg-green-500/10 text-green-400' : 'bg-zinc-500/10 text-zinc-400';
            const pubId = esc(shell.public_id || shell.id || '');
            const webviewLink = shell.is_ready
                ? `<a href="/shells/webview/${pubId}/" target="_blank" rel="noopener noreferrer"
                    class="p-2.5 bg-white/5 hover:bg-violet-600/20 text-zinc-400 hover:text-violet-300 border border-white/5 hover:border-violet-500/30 rounded-xl transition-all inline-flex"
                    title="Open web preview" id="shell-${esc(shell.id)}-webview-btn">
                    <i data-lucide="globe" class="w-5 h-5"></i>
                </a>`
                : '';
            const readyBtn = shell.setup_failed
                ? `<div class="p-2.5 text-amber-400 flex items-center justify-center relative max-w-[140px]"
                    title="Provisioning failed (packages, network, or git clone). Enable Git HTTP for unauthenticated clone of public repos."
                    id="shell-${esc(shell.id)}-setup-failed">
                    <i data-lucide="alert-triangle" class="w-5 h-5 shrink-0"></i>
                </div>`
                : shell.is_ready
                ? `<button onclick="window.open('/shells/terminal/${esc(shell.id)}', '_blank', 'width=1000,height=700')"
                    class="p-2.5 bg-white/5 hover:bg-blue-600/20 text-zinc-400 hover:text-blue-400 border border-white/5 hover:border-blue-500/30 rounded-xl transition-all"
                    title="Open Terminal" id="shell-${esc(shell.id)}-terminal-btn">
                    <i data-lucide="terminal" class="w-5 h-5"></i>
                </button>${webviewLink}`
                : `<div class="p-2.5 text-blue-400 flex items-center justify-center relative"
                    title="Deploying (first image pull can take minutes—avoid launching again)..." id="shell-${esc(shell.id)}-deploying-spinner">
                    <i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i>
                </div>`;

            return `<div id="shell-${esc(shell.id)}"
                class="group relative bg-[#0d1117]/40 backdrop-blur-md border border-white/5 rounded-2xl overflow-hidden hover:bg-[#0d1117]/60 hover:border-blue-500/30 transition-all duration-300 shadow-xl p-5">
                <div class="flex flex-col lg:flex-row lg:items-center gap-6">
                    <div class="flex items-start lg:w-1/4 gap-4">
                        <div class="relative mt-1">
                            <span class="block w-3 h-3 rounded-full ${shell.status === 'running' ? 'bg-emerald-500 shadow-[0_0_12px_rgba(16,185,129,0.5)]' : 'bg-zinc-500'}"></span>
                            ${shell.status === 'running' ? '<span class="absolute inset-0 w-3 h-3 rounded-full bg-emerald-500 animate-ping opacity-75"></span>' : ''}
                        </div>
                        <div class="flex-1 min-w-0">
                            <h3 class="font-black text-white text-lg truncate leading-none mb-2 group-hover:text-blue-400 transition-colors">${esc(shell.name)}</h3>
                            <div class="flex items-center gap-2">
                                <span class="px-2 py-0.5 rounded-md bg-white/5 text-[10px] text-zinc-400 font-mono border border-white/5 flex items-center gap-1">
                                    <i data-lucide="hash" class="w-3 h-3"></i>${esc(shell.short_id)}
                                </span>
                                <span class="px-2 py-0.5 rounded-md bg-blue-500/10 text-[10px] text-blue-400 font-black uppercase tracking-wider border border-blue-500/10">${esc(shell.distro)}</span>
                                <span class="px-2 py-0.5 rounded-md ${engineClass} text-[10px] font-black uppercase tracking-wider border border-white/5">${esc(engine)}</span>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 lg:max-w-xs flex flex-col gap-3">
                        <div class="space-y-1">
                            <div class="flex justify-between items-center text-[9px] font-black tracking-widest leading-none">
                                <span class="text-zinc-500 uppercase">CPU LOAD</span>
                                <span id="stat-${esc(shell.id)}-cpu-val" class="text-emerald-400 font-mono">${(s.cpu_percent || 0)}%</span>
                            </div>
                            <div class="h-1 w-full bg-white/5 rounded-full overflow-hidden">
                                <div id="stat-${esc(shell.id)}-cpu-bar" class="h-full bg-emerald-500 transition-all duration-500 rounded-full" style="width: ${s.cpu_percent || 0}%"></div>
                            </div>
                        </div>
                        <div class="space-y-1">
                            <div class="flex justify-between items-center text-[9px] font-black tracking-widest leading-none">
                                <span class="text-zinc-500 uppercase">Memory</span>
                                <span id="stat-${esc(shell.id)}-mem-val" class="text-blue-400 font-mono">${Math.round(s.mem_usage_mb || 0)}MB</span>
                            </div>
                            <div class="h-1 w-full bg-white/5 rounded-full overflow-hidden">
                                <div id="stat-${esc(shell.id)}-mem-bar" class="h-full bg-blue-500 transition-all duration-500 rounded-full" style="width: ${s.mem_percent || 0}%"></div>
                            </div>
                        </div>
                        <div class="space-y-1">
                            <div class="flex justify-between items-center text-[9px] font-black tracking-widest leading-none">
                                <span class="text-zinc-500 uppercase">Storage</span>
                                <span id="stat-${esc(shell.id)}-storage-val" class="text-blue-400 font-mono">${Math.round(s.storage_usage_mb || 0)}MB</span>
                            </div>
                            <div class="h-1 w-full bg-white/5 rounded-full overflow-hidden">
                                <div id="stat-${esc(shell.id)}-storage-bar" class="h-full bg-blue-500 transition-all duration-500 rounded-full" style="width: ${storagePct}%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="lg:w-56 space-y-3 flex flex-col justify-center border-l-0 lg:border-l border-white/5 pl-0 lg:pl-6 shrink-0">
                        <div class="space-y-1">
                            <div class="flex justify-between items-center text-[9px] font-black tracking-widest leading-none">
                                <span class="text-zinc-500 flex items-center gap-2"><i data-lucide="arrow-down" class="w-3 h-3 text-emerald-500/50"></i> DOWN</span>
                                <span id="stat-${esc(shell.id)}-dl-val" class="text-emerald-400 font-mono">${s.net_rx_mb || 0} MB</span>
                            </div>
                            <div class="h-1 w-full bg-white/5 rounded-full overflow-hidden">
                                <div id="stat-${esc(shell.id)}-dl-bar" class="h-full bg-emerald-500 transition-all duration-500 rounded-full" style="width: ${Math.min(100, ((s.net_rx_speed_kbps || 0) / ((shell.net_limit_mbps || 50) * 1024)) * 100)}%"></div>
                            </div>
                        </div>
                        <div class="space-y-1">
                            <div class="flex justify-between items-center text-[9px] font-black tracking-widest leading-none">
                                <span class="text-zinc-500 flex items-center gap-2"><i data-lucide="arrow-up" class="w-3 h-3 text-blue-500/50"></i> UP</span>
                                <span id="stat-${esc(shell.id)}-ul-val" class="text-blue-400 font-mono">${s.net_tx_mb || 0} MB</span>
                            </div>
                            <div class="h-1 w-full bg-white/5 rounded-full overflow-hidden">
                                <div id="stat-${esc(shell.id)}-ul-bar" class="h-full bg-blue-500 transition-all duration-500 rounded-full" style="width: ${Math.min(100, ((s.net_tx_speed_kbps || 0) / ((shell.net_limit_mbps || 50) * 1024)) * 100)}%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 flex items-center gap-8 border-l-0 lg:border-l border-white/5 pl-0 lg:pl-6">
                        <div class="w-full min-w-[200px] lg:w-48">
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-[10px] text-zinc-500 uppercase font-black tracking-widest">Lifespan</span>
                                <span id="stat-${esc(shell.id)}-life-val" class="text-[10px] font-black font-mono ${lifeClass}" ${lifePending ? 'title="Timer starts when the shell is ready to open"' : ''}>${lifeValText}</span>
                            </div>
                            <div class="h-1.5 w-full bg-white/5 rounded-full overflow-hidden">
                                <div id="stat-${esc(shell.id)}-life-bar" class="h-full transition-all duration-1000 rounded-full ${barClass}" style="width: ${lifeBarW}%"></div>
                            </div>
                        </div>
                        <div class="flex items-center gap-2 lg:ml-auto" id="shell-${esc(shell.id)}-actions">
                            ${readyBtn}
                            <button onclick="openDeleteModal('${esc(shell.id)}')"
                                class="p-2.5 bg-white/5 hover:bg-red-600/20 text-zinc-400 hover:text-red-400 border border-white/5 hover:border-red-500/30 rounded-xl transition-all"
                                title="Destroy Shell">
                                <i data-lucide="trash-2" class="w-5 h-5"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="absolute inset-0 pointer-events-none border border-white/0 group-hover:border-white/5 rounded-2xl transition-colors duration-500"></div>
            </div>`;
        }

        function renderProvisioningShellCard(pendingId, opts) {
            const distro = esc(opts.distro || 'debian');
            const engine = esc(opts.engine || 'podman');
            const engineClass = engine === 'kata' ? 'bg-green-500/10 text-green-400' : 'bg-zinc-500/10 text-zinc-400';
            const rt = esc(String(opts.runtimeMins != null ? opts.runtimeMins : '30'));
            return `<div id="shell-${esc(pendingId)}"
                class="group relative bg-[#0d1117]/40 backdrop-blur-md border border-blue-500/20 rounded-2xl overflow-hidden shadow-xl p-5 ring-1 ring-blue-500/10">
                <div class="flex flex-col lg:flex-row lg:items-center gap-6">
                    <div class="flex items-start lg:w-1/4 gap-4">
                        <div class="relative mt-1">
                            <span class="block w-3 h-3 rounded-full bg-amber-500 shadow-[0_0_12px_rgba(245,158,11,0.5)]"></span>
                            <span class="absolute inset-0 w-3 h-3 rounded-full bg-amber-500 animate-ping opacity-75"></span>
                        </div>
                        <div class="flex-1 min-w-0">
                            <h3 class="font-black text-white text-lg truncate leading-none mb-2">Creating environment…</h3>
                            <div class="flex items-center gap-2 flex-wrap">
                                <span class="px-2 py-0.5 rounded-md bg-white/5 text-[10px] text-zinc-400 font-mono border border-white/5">pending</span>
                                <span class="px-2 py-0.5 rounded-md bg-blue-500/10 text-[10px] text-blue-400 font-black uppercase tracking-wider border border-blue-500/10">${distro}</span>
                                <span class="px-2 py-0.5 rounded-md ${engineClass} text-[10px] font-black uppercase tracking-wider border border-white/5">${engine}</span>
                                <span class="text-[10px] text-zinc-500">${rt}m session</span>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 lg:max-w-xs flex flex-col gap-3 justify-center text-[11px] text-zinc-500">
                        Request sent — this can take a few minutes while the image is pulled and packages install.
                    </div>
                    <div class="flex-1 flex items-center gap-8 border-l-0 lg:border-l border-white/5 pl-0 lg:pl-6">
                        <div class="w-full min-w-[200px] lg:w-48">
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-[10px] text-zinc-500 uppercase font-black tracking-widest">Lifespan</span>
                                <span class="text-[10px] font-black font-mono text-zinc-500" title="Timer starts when the shell is ready">—</span>
                            </div>
                            <div class="h-1.5 w-full bg-white/5 rounded-full overflow-hidden">
                                <div class="h-full rounded-full bg-zinc-600/40 transition-all duration-1000" style="width:100%"></div>
                            </div>
                        </div>
                        <div class="flex items-center gap-2 lg:ml-auto p-2.5 text-zinc-600" title="Wait until the shell appears">
                            <i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i>
                        </div>
                    </div>
                </div>
            </div>`;
        }

        window.updateShellGridBadgeCount = function () {
            const grid = document.getElementById('shells-grid');
            const badge = document.getElementById('shell-count-badge');
            const createBtn = document.getElementById('create-shell-btn');
            if (!grid || !badge) return;
            const limitMax = parseInt(badge.dataset?.limitMax || '1', 10);
            const n = grid.querySelectorAll(':scope > [id^="shell-"]').length;
            badge.textContent = `${n} / ${limitMax}`;
            if (createBtn) {
                createBtn.disabled = n >= limitMax;
                createBtn.title = n >= limitMax ? 'Shell limit reached' : '';
            }
        };

        window.appendProvisioningShellCard = function (pendingId, opts) {
            const grid = document.getElementById('shells-grid');
            if (!grid) return;
            const empty = grid.querySelector('[class*="min-h-"]');
            if (empty && empty.querySelector('h3')) grid.innerHTML = '';
            grid.insertAdjacentHTML('afterbegin', renderProvisioningShellCard(pendingId, opts || {}));
            window.updateShellGridBadgeCount();
            if (window.lucide) window.lucide.createIcons();
        };

        window.removeShellCardById = function (pendingId, opts) {
            const el = document.getElementById('shell-' + String(pendingId).replace(/^shell-/, ''));
            if (!el) return;
            el.remove();
            window.updateShellGridBadgeCount();
            const skipEmpty = opts && opts.skipEmptyState;
            const grid = document.getElementById('shells-grid');
            if (!skipEmpty && grid && grid.querySelectorAll(':scope > [id^="shell-"]').length === 0) {
                window.showEmptyShellsState();
            }
        };

        const emptyShellsHtml = `
            <div class="rounded-xl border border-white/5 bg-black/20 overflow-hidden min-h-[400px] flex items-center justify-center">
                <div class="flex flex-col items-center justify-center py-20 text-center">
                    <div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mb-4">
                        <i data-lucide="box" class="h-8 w-8 text-zinc-600"></i>
                    </div>
                    <h3 class="text-lg font-bold text-zinc-300">No Shells Found</h3>
                    <p class="text-zinc-500 text-sm mt-1 max-w-sm">Create a disposable environment to start testing
                        repository in a secure, isolated container.</p>
                    <button onclick="openCreateModal()"
                        class="mt-6 glass-button-primary px-6 py-2 rounded-lg text-sm font-bold shadow-lg">
                        Create Shell
                    </button>
                </div>
            </div>`;

        window.showEmptyShellsState = function () {
            const grid = document.getElementById('shells-grid');
            if (!grid) return;
            grid.innerHTML = emptyShellsHtml;
            const badge = document.getElementById('shell-count-badge');
            const limitMax = parseInt(badge?.dataset?.limitMax || '1', 10);
            if (badge) badge.textContent = `0 / ${limitMax}`;
            const createBtn = document.getElementById('create-shell-btn');
            if (createBtn) { createBtn.disabled = false; }
            if (window.lucide) window.lucide.createIcons();
        };

        window.refreshShellsGrid = async function () {
            const grid = document.getElementById('shells-grid');
            if (!grid) return;
            const repoId = grid.dataset.repoId || '';

            try {
                const url = repoId ? `/shells/api/list?repo_id=${repoId}` : '/shells/api/list';
                const res = await fetch(url);
                const shells = await res.json();

                if (shells.length === 0) {
                    grid.innerHTML = emptyShellsHtml;
                } else {
                    grid.innerHTML = shells.map(renderShellCard).join('');
                }
                const badge = document.getElementById('shell-count-badge');
                const limitMax = parseInt(badge?.dataset?.limitMax || '1', 10);
                if (badge) badge.textContent = `${shells.length} / ${limitMax}`;
                const createBtn = document.getElementById('create-shell-btn');
                if (createBtn) { createBtn.disabled = shells.length >= limitMax; createBtn.title = shells.length >= limitMax ? 'Shell limit reached' : ''; }
                if (window.lucide) window.lucide.createIcons();
            } catch (e) {
                console.error('Failed to refresh shells', e);
            }
        };

        /** Poll for expired/removed shells – remove them from the grid without full refresh */
        window.pollShellsRemoved = async function () {
            const grid = document.getElementById('shells-grid');
            if (!grid) return;
            const repoId = grid.dataset.repoId || '';
            const currentCards = [...grid.querySelectorAll(':scope > [id^="shell-"]')];
            if (currentCards.length === 0) return;
            try {
                const url = repoId ? `/shells/api/list?repo_id=${repoId}` : '/shells/api/list';
                const res = await fetch(url);
                const shells = await res.json();
                const liveIds = new Set((shells || []).map(s => String(s.id)));
                let removed = false;
                for (const card of currentCards) {
                    const id = card.id.replace(/^shell-/, '');
                    if (id.startsWith('pending-')) continue;
                    if (!liveIds.has(id)) {
                        card.classList.add('removing-shell');
                        setTimeout(() => card.remove(), 400);
                        removed = true;
                    }
                }
                if (removed) {
                    const remaining = grid.querySelectorAll(':scope > [id^="shell-"]').length;
                    setTimeout(() => {
                        const count = grid.querySelectorAll(':scope > [id^="shell-"]').length;
                        const badge = document.getElementById('shell-count-badge');
                        const limitMax = parseInt(badge?.dataset?.limitMax || '1', 10);
                        if (badge) badge.textContent = `${count} / ${limitMax}`;
                        const createBtn = document.getElementById('create-shell-btn');
                        if (createBtn) { createBtn.disabled = count >= limitMax; createBtn.title = count >= limitMax ? 'Shell limit reached' : ''; }
                        if (count === 0) window.showEmptyShellsState();
                    }, 450);
                }
            } catch (e) {
                console.error('Shell poll error', e);
            }
        };

        // Start polling for removed shells (e.g. lifetime expired) every 20 seconds
        if (typeof setInterval !== 'undefined') {
            setInterval(window.pollShellsRemoved, 20000);
        }

        // --- Data Fetching ---
        var reposCache = window.reposCache || [];

        async function loadRepos() {
            try {
                const res = await fetch('/api/user/repos');
                if (!res.ok) {
                    console.error("API error", res.status);
                    return;
                }
                const repos = await res.json();
                reposCache = repos;
                const select = document.getElementById('select-repo');
                select.innerHTML = '<option value="" disabled selected>Select a repository...</option>';
                repos.forEach(repo => {
                    const opt = document.createElement('option');
                    opt.value = repo.id;
                    opt.textContent = repo.repo_name;
                    select.appendChild(opt);
                });
            } catch (e) {
                console.error("Failed to load repos", e);
            }
        }

        window.loadBranches = async function (repoId) {
            const repoOptions = document.getElementById('repo-options');
            const loader = document.getElementById('branch-loader');
            const defaultBranch = repoOptions?.dataset?.defaultBranch || 'main';

            if (typeof window.setModalSelectDisabled === 'function') {
                window.setModalSelectDisabled('select-branch', true);
            }
            if (typeof window.populateCustomSelect === 'function') {
                window.populateCustomSelect('select-branch', [{ value: '', label: 'Loading...' }], '');
            }
            if (loader) loader.classList.remove('hidden');

            try {
                const res = await fetch(`/api/repo/${repoId}/branches`);
                const branches = await res.json();

                const hasDefault = branches.includes(defaultBranch);
                const fallback = branches.includes('main') ? 'main' : (branches.includes('master') ? 'master' : branches[0]);
                const sel = hasDefault ? defaultBranch : fallback;
                const opts = branches.map(b => ({ value: b, label: b }));
                if (typeof window.populateCustomSelect === 'function') {
                    window.populateCustomSelect('select-branch', opts, sel);
                }
            } catch (e) {
                if (typeof window.populateCustomSelect === 'function') {
                    window.populateCustomSelect('select-branch', [{ value: defaultBranch, label: defaultBranch + ' (fallback)' }], defaultBranch);
                }
            } finally {
                if (typeof window.setModalSelectDisabled === 'function') {
                    window.setModalSelectDisabled('select-branch', false);
                }
                if (loader) loader.classList.add('hidden');
            }
        }

        window.createShell = async function () {
            const totalCost = window.calculateCost ? window.calculateCost() : 0;
            window.confirmCreditAction({
                cost: totalCost,
                title: 'Confirm Environment Details',
                message: `Launching this environment will reserve <span class="text-yellow-400 font-bold">${totalCost}</span> Credits. Unused 30-minute chunks will be refunded if destroyed early. Continue?`,
                onConfirm: async () => {
                    if (window._shellCreateInFlight) return;
                    window._shellCreateInFlight = true;
                    const btn = document.getElementById('create-btn');
                    const originalText = btn ? btn.innerHTML : '';

                    const formData = new FormData();
                    formData.append('distro', window.selectedDistro);
                    formData.append('ram', document.getElementById('input-ram').value);
                    formData.append('cpu', document.getElementById('input-cpu').value);
                    formData.append('storage', document.getElementById('input-storage').value);
                    formData.append('runtime', document.getElementById('input-runtime').value);
                    formData.append('net_speed', document.getElementById('input-netspeed').value);
                    const wpEl = document.getElementById('input-web-port');
                    formData.append('web_port', wpEl ? wpEl.value : '8080');

                    formData.append('create_user', document.getElementById('check-create-user').checked);

                    const repoOptions = document.getElementById('repo-options');
                    const repoId = repoOptions?.dataset?.repoId || '';
                    if (repoId) formData.append('repo_id', repoId);

                    const cloneCheck = document.getElementById('check-clone-repo');
                    if (cloneCheck?.checked) {
                        if (!repoId) {
                            window._shellCreateInFlight = false;
                            alert('No repository in context.');
                            return;
                        }
                        formData.append('clone_repo', true);
                        formData.append('branch', document.getElementById('select-branch').value);
                    }

                    const grid = document.getElementById('shells-grid');
                    const engine = grid?.dataset?.shellEngine || 'podman';
                    const runtimeMins = document.getElementById('input-runtime')?.value || '30';
                    const pendingId = 'pending-' + Date.now();
                    closeCreateModal();
                    if (btn) {
                        btn.disabled = false;
                        btn.innerHTML = originalText;
                    }
                    window.appendProvisioningShellCard(pendingId, {
                        distro: window.selectedDistro,
                        engine,
                        runtimeMins
                    });
                    window.createToast('shell-queued-' + Date.now(), 'Environment starting', 'Creating your shell in the background…', true);

                    try {
                        const res = await fetch('/shells/create', { method: 'POST', body: formData });
                        let data;
                        try {
                            data = await res.json();
                        } catch (je) {
                            data = { error: 'Invalid response from server' };
                        }

                        window.removeShellCardById(pendingId, { skipEmptyState: true });

                        if (data.success) {
                            if (window.refreshShellsGrid) await window.refreshShellsGrid();
                        } else {
                            alert('Error: ' + (data.error || res.statusText || 'Unknown error'));
                            if (window.refreshShellsGrid) await window.refreshShellsGrid();
                        }
                    } catch (e) {
                        window.removeShellCardById(pendingId, { skipEmptyState: true });
                        alert(e.message || 'Error creating shell');
                        if (window.refreshShellsGrid) await window.refreshShellsGrid();
                    } finally {
                        window._shellCreateInFlight = false;
                    }
                }
            });
        }

        // ... deleteShell ...
        var shellToDelete = window.shellToDelete || null;

        window.openDeleteModal = function (id) {
            shellToDelete = id;
            const modal = document.getElementById('delete-confirm-modal');
            window.openModalAnimation(modal);

            const confirmBtn = document.getElementById('confirm-delete-btn');
            confirmBtn.onclick = async () => {
                confirmBtn.disabled = true;
                confirmBtn.innerHTML = '<i class="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full mx-auto"></i>';
                await confirmDelete();
            };
        }

        window.closeDeleteModal = function () {
            const modal = document.getElementById('delete-confirm-modal');
            window.closeModalAnimation(modal);
            shellToDelete = null;
        }

        async function confirmDelete() {
            if (!shellToDelete) return;

            const shellId = shellToDelete;
            const card = document.getElementById('shell-' + shellId);

            // Optimistic Remove
            if (card) card.classList.add('removing-shell');

            try {
                const fd = new FormData();
                fd.append("id", shellId);
                const res = await fetch("/shells/delete", { method: "POST", body: fd });
                const data = await res.json();

                if (data.success) {
                    window.createToast('shell-del-' + Date.now(), 'Shell Purged', 'Environment destroyed successfully.', true);
                    // Remove from DOM after animation
                    setTimeout(() => {
                        if (card) card.remove();
                        const remaining = document.querySelectorAll('#shells-grid > div[id^="shell-"]').length;
                        const badge = document.getElementById('shell-count-badge');
                        const limitMax = parseInt(badge?.dataset?.limitMax || '1', 10);
                        if (badge) badge.textContent = `${remaining} / ${limitMax}`;
                        const createBtn = document.getElementById('create-shell-btn');
                        if (createBtn) { createBtn.disabled = remaining >= limitMax; createBtn.title = remaining >= limitMax ? 'Shell limit reached' : ''; }
                        // If no more cards, show empty state dynamically
                        if (remaining === 0) {
                            showEmptyShellsState();
                        }
                    }, 400);
                } else {
                    if (card) card.classList.remove('removing-shell');
                    alert("Error: " + data.error);
                }
            } catch (e) {
                if (card) card.classList.remove('removing-shell');
                alert("Error deleting shell");
            } finally {
                const confirmBtn = document.getElementById('confirm-delete-btn');
                if (confirmBtn) {
                    confirmBtn.disabled = false;
                    confirmBtn.innerHTML = 'Confirm Delete';
                }
                window.closeDeleteModal();
            }
        }

        // --- Real-time Stats ---
        const socket = window.socket || io();
        window.socket = socket;

        // Only attach connect if it's new
        if (!socket.has_shells_connect) {
            socket.on('connect', () => {
                socket.emit('join_shells_stats');
            });
            socket.has_shells_connect = true;
        } else if (socket.connected) {
            // If already connected from a previous run, re-emit to ensure we're joined
            socket.emit('join_shells_stats');
        }

        socket.off('shell_stats_update'); // Prevent stacking listeners over multiple SPA loads
        socket.on('shell_stats_update', (shells) => {
            shells.forEach(s => {
                // CPU
                const cpuVal = document.getElementById(`stat-${s.id}-cpu-val`);
                const cpuBar = document.getElementById(`stat-${s.id}-cpu-bar`);
                if (cpuVal) cpuVal.textContent = s.stats.cpu_percent + '%';
                if (cpuBar) cpuBar.style.width = s.stats.cpu_percent + '%';

                // Memory
                const memVal = document.getElementById(`stat-${s.id}-mem-val`);
                const memBar = document.getElementById(`stat-${s.id}-mem-bar`);
                if (memVal) memVal.textContent = `${s.stats.mem_usage_mb} / ${s.stats.mem_limit_mb} MB`;
                if (memBar) memBar.style.width = s.stats.mem_percent + '%';

                // Storage
                const storageVal = document.getElementById(`stat-${s.id}-storage-val`);
                const storageBar = document.getElementById(`stat-${s.id}-storage-bar`);
                const totalStorageMb = s.storage_limit_gb * 1024;
                if (storageVal) storageVal.textContent = `${s.stats.storage_usage_mb} / ${totalStorageMb} MB`;
                if (storageBar) storageBar.style.width = (totalStorageMb > 0 ? (s.stats.storage_usage_mb / totalStorageMb * 100) : 0) + '%';

                // Network
                const dlVal = document.getElementById(`stat-${s.id}-dl-val`);
                const ulVal = document.getElementById(`stat-${s.id}-ul-val`);
                const dlBar = document.getElementById(`stat-${s.id}-dl-bar`);
                const ulBar = document.getElementById(`stat-${s.id}-ul-bar`);
                const netLimitKbps = (s.net_limit_mbps || 50) * 1024;
                const dlPct = Math.min(100, ((s.stats.net_rx_speed_kbps || 0) / netLimitKbps) * 100);
                const ulPct = Math.min(100, ((s.stats.net_tx_speed_kbps || 0) / netLimitKbps) * 100);

                if (dlVal) dlVal.textContent = `${s.stats.net_rx_mb} MB`;
                if (ulVal) ulVal.textContent = `${s.stats.net_tx_mb} MB`;
                if (dlBar) dlBar.style.width = dlPct + '%';
                if (ulBar) ulBar.style.width = ulPct + '%';

                // Life (timer frozen until shell is ready; then counts from first-ready anchor)
                const lifeVal = document.getElementById(`stat-${s.id}-life-val`);
                const lifeBar = document.getElementById(`stat-${s.id}-life-bar`);
                if (lifeVal && lifeBar) {
                    if (s.lifespan_pending) {
                        lifeVal.textContent = '—';
                        lifeVal.className = 'text-[10px] font-black font-mono text-zinc-500';
                        lifeVal.title = 'Timer starts when the shell is ready to open';
                        lifeBar.style.width = '100%';
                        lifeBar.className = 'h-full transition-all duration-1000 rounded-full bg-zinc-600/40';
                    } else {
                        lifeVal.textContent = `${s.time_left_mins}m`;
                        lifeVal.title = '';
                        lifeVal.className = s.time_left_percent < 20
                            ? 'text-[10px] font-black font-mono text-red-400 animate-pulse'
                            : s.time_left_percent < 50
                                ? 'text-[10px] font-black font-mono text-orange-400'
                                : 'text-[10px] font-black font-mono text-emerald-400';
                        lifeBar.style.width = (s.time_left_percent || 0) + '%';
                        lifeBar.className = s.time_left_percent < 20
                            ? 'h-full transition-all duration-1000 rounded-full bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.5)]'
                            : s.time_left_percent < 50
                                ? 'h-full transition-all duration-1000 rounded-full bg-orange-500'
                                : 'h-full transition-all duration-1000 rounded-full bg-emerald-500';
                    }
                }

                // Ready / failed (replace deploying spinner)
                const actionsEl = document.getElementById(`shell-${s.id}-actions`);
                const spinner = document.getElementById(`shell-${s.id}-deploying-spinner`);
                if (actionsEl && spinner && s.setup_failed) {
                    spinner.outerHTML = `
                        <div class="p-2.5 text-amber-400 flex items-center justify-center relative max-w-[140px]"
                            title="Provisioning failed — check Git HTTP / public repo for clone, or image pull."
                            id="shell-${s.id}-setup-failed">
                            <i data-lucide="alert-triangle" class="w-5 h-5 shrink-0"></i>
                        </div>`;
                    if (window.lucide) window.lucide.createIcons();
                } else if (actionsEl && spinner && s.is_ready) {
                    const pubId = String(s.public_id || s.id || '');
                    spinner.outerHTML = `
                        <button
                            onclick="window.open('/shells/terminal/${s.id}', '_blank', 'width=1000,height=700')"
                            class="p-2.5 bg-white/5 hover:bg-blue-600/20 text-zinc-400 hover:text-blue-400 border border-white/5 hover:border-blue-500/30 rounded-xl transition-all"
                            title="Open Terminal" id="shell-${s.id}-terminal-btn">
                            <i data-lucide="terminal" class="w-5 h-5"></i>
                        </button>
                        <a href="/shells/webview/${pubId}/" target="_blank" rel="noopener noreferrer"
                            class="p-2.5 bg-white/5 hover:bg-violet-600/20 text-zinc-400 hover:text-violet-300 border border-white/5 hover:border-violet-500/30 rounded-xl transition-all inline-flex"
                            title="Open web preview" id="shell-${s.id}-webview-btn">
                            <i data-lucide="globe" class="w-5 h-5"></i>
                        </a>`;
                    if (window.lucide) window.lucide.createIcons();
                }
            });
        });
    })();
</script>
{% endblock %}