{% extends "base.html" %}
{% block title %}LASSO Dashboard — Sandboxes{% endblock %}

{% block breadcrumb %}
<li class="breadcrumb-item">
    <span class="breadcrumb-current">Dashboard</span>
</li>
{% endblock %}

{% block content %}
<style>
    /* ---- Onboarding / Empty State ---- */
    .onboarding {
        max-width: 720px;
        margin: var(--sp-12) auto;
        text-align: center;
    }
    .onboarding h1 {
        font-size: var(--text-3xl);
        font-weight: 700;
        margin-bottom: var(--sp-3);
    }
    .onboarding .subtitle {
        color: var(--text-secondary);
        font-size: var(--text-md);
        margin-bottom: var(--sp-10);
        line-height: 1.6;
    }

    /* ---- Agent Grid ---- */
    .agent-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-4);
        margin-bottom: var(--sp-8);
    }
    @media (max-width: 560px) {
        .agent-grid {
            grid-template-columns: 1fr;
        }
    }
    .agent-card {
        background: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-xl);
        padding: var(--sp-6);
        cursor: pointer;
        transition: border-color var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);
        text-align: left;
        display: flex;
        align-items: flex-start;
        gap: var(--sp-4);
    }
    .agent-card:hover {
        border-color: var(--brand-primary-border);
        background: var(--bg-hover);
        box-shadow: var(--shadow-glow);
    }
    .agent-card:focus-visible {
        outline: 2px solid var(--border-focus);
        outline-offset: 2px;
    }
    .agent-card.selected {
        border-color: var(--brand-primary);
        background: var(--brand-primary-bg);
        box-shadow: var(--shadow-glow);
    }
    .agent-icon {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: var(--radius-lg);
        background: var(--bg-elevated);
        border: 1px solid var(--border-default);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-size: var(--text-lg);
        font-weight: 700;
        color: var(--brand-accent);
    }
    .agent-card.selected .agent-icon {
        background: var(--brand-primary);
        color: #fff;
        border-color: var(--brand-primary);
    }
    .agent-card h3 {
        font-size: var(--text-md);
        margin-bottom: 2px;
    }
    .agent-card p {
        color: var(--text-secondary);
        font-size: var(--text-sm);
        margin: 0;
    }
    .btn-text {
        background: none;
        border: none;
        color: var(--text-tertiary);
        font-size: var(--text-sm);
        cursor: pointer;
        padding: var(--sp-2) var(--sp-4);
        transition: color var(--transition-fast);
    }
    .btn-text:hover {
        color: var(--text-secondary);
    }

    /* ---- Config Panel ---- */
    #create-config {
        max-width: 640px;
        margin: 0 auto;
        text-align: left;
    }
    #create-config h2 {
        font-size: var(--text-xl);
        margin-bottom: var(--sp-6);
        text-align: center;
    }
    .config-section {
        margin-bottom: var(--sp-6);
    }
    .config-section h3 {
        font-size: var(--text-md);
        margin-bottom: var(--sp-3);
        color: var(--text-secondary);
        font-weight: 500;
    }
    .selected-agent-banner {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        background: var(--brand-primary-bg);
        border: 1px solid var(--brand-primary-border);
        border-radius: var(--radius-lg);
        padding: var(--sp-3) var(--sp-4);
        margin-bottom: var(--sp-6);
    }
    .selected-agent-banner .agent-icon {
        width: 32px;
        height: 32px;
        font-size: var(--text-sm);
        background: var(--brand-primary);
        color: #fff;
        border-color: var(--brand-primary);
    }
    .selected-agent-banner span {
        font-weight: 600;
        font-size: var(--text-md);
    }
    .selected-agent-banner button {
        margin-left: auto;
        background: none;
        border: none;
        color: var(--text-tertiary);
        cursor: pointer;
        font-size: var(--text-sm);
        padding: var(--sp-1) var(--sp-2);
    }
    .selected-agent-banner button:hover {
        color: var(--text-secondary);
    }

    /* ---- Policy Cards ---- */
    .policy-cards {
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
    }
    .policy-card {
        display: block;
        background: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        padding: var(--sp-4) var(--sp-5);
        cursor: pointer;
        transition: border-color var(--transition-normal), background var(--transition-normal);
    }
    .policy-card:hover {
        border-color: var(--border-strong);
        background: var(--bg-hover);
    }
    .policy-card.selected {
        border-color: var(--brand-primary);
        background: var(--brand-primary-bg);
    }
    .policy-card input[type="radio"] {
        display: none;
    }
    .policy-card strong {
        display: block;
        font-size: var(--text-md);
        margin-bottom: var(--sp-1);
    }
    .policy-card p {
        color: var(--text-secondary);
        font-size: var(--text-sm);
        margin: 0;
        line-height: 1.5;
    }

    .form-input-lg {
        width: 100%;
        max-width: 500px;
        background: var(--bg-input);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        padding: var(--sp-3) var(--sp-4);
        color: var(--text-primary);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        transition: border-color var(--transition-fast);
    }
    .form-input-lg:focus {
        outline: none;
        border-color: var(--border-focus);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }
    .hint {
        color: var(--text-tertiary);
        font-size: var(--text-xs);
        margin-top: var(--sp-2);
    }

    .btn-lg {
        padding: var(--sp-3) var(--sp-8);
        font-size: var(--text-md);
        margin-top: var(--sp-4);
    }
    .back-link {
        display: inline-block;
        margin-bottom: var(--sp-4);
        color: var(--text-tertiary);
        font-size: var(--text-sm);
        cursor: pointer;
        border: none;
        background: none;
        padding: 0;
    }
    .back-link:hover { color: var(--text-secondary); }

    /* ---- Sandbox Header ---- */
    .sandbox-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--sp-6);
        flex-wrap: wrap;
        gap: var(--sp-3);
    }
    .sandbox-header h1 {
        font-size: var(--text-2xl);
    }

    /* ---- Sandbox Grid (card layout) ---- */
    .sandbox-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: var(--sp-4);
        margin-bottom: var(--sp-8);
    }
    .sandbox-card {
        background: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-xl);
        padding: var(--sp-5);
        transition: border-color var(--transition-normal);
    }
    .sandbox-card:hover {
        border-color: var(--border-strong);
    }
    .sandbox-card-header {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        margin-bottom: var(--sp-3);
    }
    .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .status-dot.status-running {
        background: var(--color-success);
        box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
    }
    .status-dot.status-stopped { background: var(--color-muted); }
    .status-dot.status-error { background: var(--color-error); }
    .status-dot.status-created { background: var(--color-info); }
    .status-dot.status-configuring { background: var(--color-warning); }
    .status-dot.status-paused { background: var(--color-warning); }
    .agent-badge {
        font-size: var(--text-xs);
        background: var(--brand-primary-bg);
        color: var(--brand-accent);
        border: 1px solid var(--brand-primary-border);
        padding: 2px 8px;
        border-radius: 999px;
        margin-left: auto;
    }
    .sandbox-meta {
        display: flex;
        gap: var(--sp-4);
        color: var(--text-tertiary);
        font-size: var(--text-sm);
        margin-bottom: var(--sp-4);
    }
    .sandbox-card-actions {
        display: flex;
        gap: var(--sp-2);
        flex-wrap: wrap;
    }
    .sandbox-card-actions .btn {
        font-size: var(--text-xs);
        padding: var(--sp-1) var(--sp-3);
    }

    /* ---- Stats Row (compact) ---- */
    .stats-compact {
        display: flex;
        gap: var(--sp-6);
        margin-bottom: var(--sp-6);
        flex-wrap: wrap;
    }
    .stat-inline {
        display: flex;
        align-items: baseline;
        gap: var(--sp-2);
    }
    .stat-inline .stat-num {
        font-size: var(--text-xl);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    .stat-inline .stat-label {
        font-size: var(--text-sm);
        color: var(--text-tertiary);
    }
    .stat-num.text-success { color: var(--color-success); }
    .stat-num.text-error { color: var(--color-error); }
    .stat-num.text-warning { color: var(--color-warning); }

    /* ---- Wizard inline create (when sandboxes exist) ---- */
    #inline-wizard {
        margin-bottom: var(--sp-8);
    }
    #inline-wizard .onboarding {
        margin: 0 auto;
        max-width: 720px;
    }

    /* ---- Extra Mounts ---- */
    .mount-row {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        margin-bottom: var(--sp-2);
    }
    .mount-row .form-input {
        background: var(--bg-input);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        padding: var(--sp-2) var(--sp-3);
        color: var(--text-primary);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        transition: border-color var(--transition-fast);
    }
    .mount-row .form-input:focus {
        outline: none;
        border-color: var(--border-focus);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }
    .mount-arrow {
        padding: 0 var(--sp-1);
        color: var(--text-muted);
        flex-shrink: 0;
        font-size: var(--text-sm);
    }
    .mount-ro {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: var(--text-xs);
        color: var(--text-secondary);
        white-space: nowrap;
        flex-shrink: 0;
        cursor: pointer;
    }
    .mount-ro input[type="checkbox"] {
        accent-color: var(--brand-primary);
    }
    .btn-remove {
        background: none;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        color: var(--text-tertiary);
        cursor: pointer;
        font-size: var(--text-md);
        padding: var(--sp-1) var(--sp-2);
        line-height: 1;
        transition: color var(--transition-fast), border-color var(--transition-fast);
        flex-shrink: 0;
    }
    .btn-remove:hover {
        color: var(--color-error);
        border-color: var(--color-error);
    }
    .btn-outline {
        background: none;
        border: 1px dashed var(--border-default);
        border-radius: var(--radius-md);
        color: var(--text-tertiary);
        cursor: pointer;
        font-size: var(--text-sm);
        padding: var(--sp-2) var(--sp-3);
        transition: color var(--transition-fast), border-color var(--transition-fast);
    }
    .btn-outline:hover {
        color: var(--text-secondary);
        border-color: var(--border-strong);
    }
    .optional {
        color: var(--text-tertiary);
        font-weight: 400;
        font-size: var(--text-sm);
    }
</style>

{% if has_sandboxes %}
<!-- ========== EXISTING SANDBOXES VIEW ========== -->

<div class="sandbox-header">
    <h1>Your Sandboxes</h1>
    <button onclick="showCreateWizard()" class="btn btn-primary" id="new-sandbox-btn">+ New Sandbox</button>
</div>

<!-- Compact stats -->
<div class="stats-compact">
    <div class="stat-inline">
        <span class="stat-num">{{ stats.total }}</span>
        <span class="stat-label">total</span>
    </div>
    <div class="stat-inline">
        <span class="stat-num text-success">{{ stats.running }}</span>
        <span class="stat-label">running</span>
    </div>
    {% if stats.errors > 0 %}
    <div class="stat-inline">
        <span class="stat-num text-error">{{ stats.errors }}</span>
        <span class="stat-label">errors</span>
    </div>
    {% endif %}
    <div class="stat-inline">
        <span class="stat-num">{{ stats.total_execs }}</span>
        <span class="stat-label">commands</span>
    </div>
    {% if stats.total_blocked > 0 %}
    <div class="stat-inline">
        <span class="stat-num text-warning">{{ stats.total_blocked }}</span>
        <span class="stat-label">blocked</span>
    </div>
    {% endif %}
</div>

<!-- Inline create wizard (hidden until "New Sandbox" clicked) -->
<div id="inline-wizard" style="display:none;">
    <div class="onboarding">
        <h1>Launch an AI Agent Sandbox</h1>
        <p class="subtitle">Run AI coding agents safely inside isolated containers with full audit logging.</p>

        <div class="agent-grid" id="agent-grid">
            <div class="agent-card" tabindex="0" role="button" aria-label="Select Claude Code" onclick="selectAgent('claude-code', 'C', 'Claude Code')" onkeydown="if(event.key==='Enter')this.click()">
                <div class="agent-icon">C</div>
                <div>
                    <h3>Claude Code</h3>
                    <p>AI pair programming by Anthropic</p>
                </div>
            </div>
            <div class="agent-card" tabindex="0" role="button" aria-label="Select Aider" onclick="selectAgent('aider', 'A', 'Aider')" onkeydown="if(event.key==='Enter')this.click()">
                <div class="agent-icon">A</div>
                <div>
                    <h3>Aider</h3>
                    <p>Terminal-based AI coding assistant</p>
                </div>
            </div>
            <div class="agent-card" tabindex="0" role="button" aria-label="Select OpenAI Codex" onclick="selectAgent('codex', 'X', 'OpenAI Codex')" onkeydown="if(event.key==='Enter')this.click()">
                <div class="agent-icon">X</div>
                <div>
                    <h3>OpenAI Codex</h3>
                    <p>Code generation by OpenAI</p>
                </div>
            </div>
            <div class="agent-card" tabindex="0" role="button" aria-label="Select OpenCode" onclick="selectAgent('opencode', 'O', 'OpenCode')" onkeydown="if(event.key==='Enter')this.click()">
                <div class="agent-icon">O</div>
                <div>
                    <h3>OpenCode</h3>
                    <p>Open source AI coding tool</p>
                </div>
            </div>
        </div>

        <button class="btn-text" onclick="selectAgent('', '', '')">Just a sandbox (no AI agent)</button>
    </div>

    <form method="post" action="{{ url_for('dashboard.sandbox_create') }}" id="create-config" style="display:none;" onsubmit="serializeMounts(this)">
        {{ csrf_token() }}
        <input type="hidden" name="agent" id="agent-input" value="">
        <input type="hidden" name="mounts" id="mounts-input" value="">

        <button type="button" class="back-link" onclick="backToAgents()">&larr; Change agent</button>

        <div id="selected-agent-banner" class="selected-agent-banner" style="display:none;">
            <div class="agent-icon" id="banner-icon"></div>
            <span id="banner-name"></span>
            <button type="button" onclick="backToAgents()">Change</button>
        </div>

        <h2>Configure Your Sandbox</h2>

        <div class="config-section">
            <h3>Security Policy</h3>
            <div class="policy-cards">
                <label class="policy-card selected" onclick="selectPolicy(this)">
                    <input type="radio" name="profile" value="development" checked>
                    <strong>Standard</strong>
                    <p>Allows git, npm, pip, python + 30 more tools.
                       Internet limited to package registries.
                       All commands logged.</p>
                </label>
                <label class="policy-card" onclick="selectPolicy(this)">
                    <input type="radio" name="profile" value="strict">
                    <strong>Strict</strong>
                    <p>Python, R, git (read-only) only.
                       No internet access.
                       Full audit with command output capture.</p>
                </label>
                <label class="policy-card" onclick="selectPolicy(this)">
                    <input type="radio" name="profile" value="minimal">
                    <strong>Minimal</strong>
                    <p>ls, cat, grep only. No network.
                       For untrusted agent evaluation.</p>
                </label>
            </div>
        </div>

        <div class="config-section">
            <h3>Project Directory</h3>
            <input type="text" name="working_dir" value="/tmp/lasso-sandbox" class="form-input-lg">
            <p class="hint">The path to your project <strong>on your computer</strong>. This folder will be shared with the sandbox so the AI agent can read and edit your code. All other folders on your computer are hidden from the sandbox.</p>
        </div>

        <div class="config-section">
            <h3>Additional Folders <span class="optional">(optional)</span></h3>
            <p class="hint" style="margin-top: 0; margin-bottom: var(--sp-3);">Mount extra directories from your computer into the sandbox. Useful for shared team context, reference data, or other project files.</p>
            <div class="extra-mounts-container">
            </div>
            <button type="button" class="btn-outline" onclick="addMountRow(this.previousElementSibling)">+ Add Folder</button>
        </div>

        <button type="submit" class="btn btn-primary btn-lg">
            <span class="btn-default-text">Create Sandbox</span>
            <span class="btn-loading-text"><span class="spinner"></span> Creating (first time may take 1-2 minutes to build the image)...</span>
        </button>
        <p class="hint" style="margin-top: 0.75rem; font-size: 0.8rem;">First-time creation with an AI agent takes 1-2 minutes to install the agent. Subsequent creates are near-instant (cached).</p>
    </form>
</div>

<!-- Sandbox cards -->
<div class="sandbox-grid"
     id="sandbox-grid-wrapper"
     hx-get="{{ url_for('dashboard.partial_sandbox_cards') }}"
     hx-trigger="every 5s"
     hx-swap="innerHTML">
    {% include "partials/sandbox_cards.html" %}
</div>

{% else %}
<!-- ========== EMPTY STATE — ONBOARDING WIZARD ========== -->

<div class="onboarding">
    <h1>Launch an AI Agent Sandbox</h1>
    <p class="subtitle">Run AI coding agents safely inside isolated containers with full audit logging.</p>

    <div class="agent-grid" id="agent-grid">
        <div class="agent-card" tabindex="0" role="button" aria-label="Select Claude Code" onclick="selectAgent('claude-code', 'C', 'Claude Code')" onkeydown="if(event.key==='Enter')this.click()">
            <div class="agent-icon">C</div>
            <div>
                <h3>Claude Code</h3>
                <p>AI pair programming by Anthropic</p>
            </div>
        </div>
        <div class="agent-card" tabindex="0" role="button" aria-label="Select Aider" onclick="selectAgent('aider', 'A', 'Aider')" onkeydown="if(event.key==='Enter')this.click()">
            <div class="agent-icon">A</div>
            <div>
                <h3>Aider</h3>
                <p>Terminal-based AI coding assistant</p>
            </div>
        </div>
        <div class="agent-card" tabindex="0" role="button" aria-label="Select OpenAI Codex" onclick="selectAgent('codex', 'X', 'OpenAI Codex')" onkeydown="if(event.key==='Enter')this.click()">
            <div class="agent-icon">X</div>
            <div>
                <h3>OpenAI Codex</h3>
                <p>Code generation by OpenAI</p>
            </div>
        </div>
        <div class="agent-card" tabindex="0" role="button" aria-label="Select OpenCode" onclick="selectAgent('opencode', 'O', 'OpenCode')" onkeydown="if(event.key==='Enter')this.click()">
            <div class="agent-icon">O</div>
            <div>
                <h3>OpenCode</h3>
                <p>Open source AI coding tool</p>
            </div>
        </div>
    </div>

    <button class="btn-text" onclick="selectAgent('', '', '')">Just a sandbox (no AI agent)</button>
</div>

<form method="post" action="{{ url_for('dashboard.sandbox_create') }}" id="create-config" style="display:none;" onsubmit="serializeMounts(this)">
    {{ csrf_token() }}
    <input type="hidden" name="agent" id="agent-input" value="">
    <input type="hidden" name="mounts" id="mounts-input" value="">

    <button type="button" class="back-link" onclick="backToAgents()">&larr; Change agent</button>

    <div id="selected-agent-banner" class="selected-agent-banner" style="display:none;">
        <div class="agent-icon" id="banner-icon"></div>
        <span id="banner-name"></span>
        <button type="button" onclick="backToAgents()">Change</button>
    </div>

    <h2>Configure Your Sandbox</h2>

    <div class="config-section">
        <h3>Security Policy</h3>
        <div class="policy-cards">
            <label class="policy-card selected" onclick="selectPolicy(this)">
                <input type="radio" name="profile" value="development" checked>
                <strong>Standard</strong>
                <p>Allows git, npm, pip, python + 30 more tools.
                   Internet limited to package registries.
                   All commands logged.</p>
            </label>
            <label class="policy-card" onclick="selectPolicy(this)">
                <input type="radio" name="profile" value="strict">
                <strong>Strict</strong>
                <p>Python, R, git (read-only) only.
                   No internet access.
                   Full audit with command output capture.</p>
            </label>
            <label class="policy-card" onclick="selectPolicy(this)">
                <input type="radio" name="profile" value="minimal">
                <strong>Minimal</strong>
                <p>ls, cat, grep only. No network.
                   For untrusted agent evaluation.</p>
            </label>
        </div>
    </div>

    <div class="config-section">
        <h3>Project Directory</h3>
        <input type="text" name="working_dir" value="/tmp/lasso-sandbox" class="form-input-lg">
        <p class="hint">The path to your project <strong>on your computer</strong>. This folder will be shared with the sandbox so the AI agent can read and edit your code. All other folders on your computer are hidden from the sandbox.</p>
    </div>

    <div class="config-section">
        <h3>Additional Folders <span class="optional">(optional)</span></h3>
        <p class="hint" style="margin-top: 0; margin-bottom: var(--sp-3);">Mount extra directories from your computer into the sandbox. Useful for shared team context, reference data, or other project files.</p>
        <div class="extra-mounts-container">
        </div>
        <button type="button" class="btn-outline" onclick="addMountRow(this.previousElementSibling)">+ Add Folder</button>
    </div>

    <button type="submit" class="btn btn-primary btn-lg">
        <span class="btn-default-text">Create Sandbox</span>
        <span class="btn-loading-text"><span class="spinner"></span> Creating (first time may take 1-2 minutes)...</span>
    </button>
    <p class="hint" style="margin-top: 0.75rem; font-size: 0.8rem;">First-time creation with an AI agent takes 1-2 minutes to install the agent. Subsequent creates are near-instant (cached).</p>
</form>

{% endif %}

<script>
(function() {
    // ---- Agent selection ----
    function selectAgent(agentId, icon, name) {
        // Set hidden input (handle both empty-state and inline forms)
        document.querySelectorAll('#agent-input').forEach(function(el) {
            el.value = agentId;
        });

        // Hide agent grid, show config
        var grids = document.querySelectorAll('#agent-grid');
        grids.forEach(function(g) { g.style.display = 'none'; });

        // Hide skip button
        document.querySelectorAll('.btn-text').forEach(function(b) { b.style.display = 'none'; });
        // Hide onboarding title/subtitle
        document.querySelectorAll('.onboarding h1, .onboarding .subtitle').forEach(function(el) {
            el.style.display = 'none';
        });

        // Show config form
        document.querySelectorAll('#create-config').forEach(function(f) {
            f.style.display = 'block';
        });

        // Show agent banner if agent was selected
        if (agentId) {
            document.querySelectorAll('#selected-agent-banner').forEach(function(b) {
                b.style.display = 'flex';
            });
            document.querySelectorAll('#banner-icon').forEach(function(el) {
                el.textContent = icon;
            });
            document.querySelectorAll('#banner-name').forEach(function(el) {
                el.textContent = name;
            });
        } else {
            document.querySelectorAll('#selected-agent-banner').forEach(function(b) {
                b.style.display = 'none';
            });
        }
    }

    function backToAgents() {
        document.querySelectorAll('#agent-grid').forEach(function(g) { g.style.display = 'grid'; });
        document.querySelectorAll('.btn-text').forEach(function(b) { b.style.display = ''; });
        document.querySelectorAll('.onboarding h1, .onboarding .subtitle').forEach(function(el) {
            el.style.display = '';
        });
        document.querySelectorAll('#create-config').forEach(function(f) { f.style.display = 'none'; });
    }

    function selectPolicy(el) {
        var cards = el.closest('.policy-cards').querySelectorAll('.policy-card');
        cards.forEach(function(c) { c.classList.remove('selected'); });
        el.classList.add('selected');
        el.querySelector('input[type="radio"]').checked = true;
    }

    function showCreateWizard() {
        var wizard = document.getElementById('inline-wizard');
        var btn = document.getElementById('new-sandbox-btn');
        if (wizard.style.display === 'none') {
            wizard.style.display = 'block';
            btn.textContent = 'Cancel';
            btn.classList.remove('btn-primary');
            btn.classList.add('btn-ghost');
        } else {
            wizard.style.display = 'none';
            btn.textContent = '+ New Sandbox';
            btn.classList.remove('btn-ghost');
            btn.classList.add('btn-primary');
            // Reset wizard state
            backToAgents();
        }
    }

    // ---- Extra mounts ----
    function addMountRow(container) {
        var row = document.createElement('div');
        row.className = 'mount-row';
        row.innerHTML = '<input type="text" data-mount="source" placeholder="/path/on/your/computer" class="form-input" style="flex:2">'
            + '<span class="mount-arrow">&rarr;</span>'
            + '<input type="text" data-mount="target" placeholder="/data" class="form-input" style="flex:1">'
            + '<label class="mount-ro"><input type="checkbox" data-mount="ro"> Read only</label>'
            + '<button type="button" class="btn-remove" onclick="this.parentElement.remove()">&times;</button>';
        container.appendChild(row);
    }

    function serializeMounts(form) {
        var mounts = [];
        var rows = form.querySelectorAll('.mount-row');
        rows.forEach(function(row) {
            var source = row.querySelector('[data-mount="source"]').value.trim();
            var target = row.querySelector('[data-mount="target"]').value.trim();
            var ro = row.querySelector('[data-mount="ro"]').checked;
            if (source && target) {
                mounts.push({ source: source, target: target, mode: ro ? 'ro' : 'rw' });
            }
        });
        // Set the hidden input(s) — handle both forms on the page
        form.querySelector('input[name="mounts"]').value = mounts.length ? JSON.stringify(mounts) : '';
    }

    // Expose to global scope for onclick handlers
    window.selectAgent = selectAgent;
    window.backToAgents = backToAgents;
    window.selectPolicy = selectPolicy;
    window.showCreateWizard = showCreateWizard;
    window.addMountRow = addMountRow;
    window.serializeMounts = serializeMounts;
})();
</script>
{% endblock %}