{% extends "base.html" %}
{% block title %}LASSO — Sandbox {{ sandbox.id }}{% endblock %}

{% block breadcrumb %}
<li class="breadcrumb-item">
    <a href="{{ url_for('dashboard.index') }}">Dashboard</a>
</li>
<li><span class="breadcrumb-separator" aria-hidden="true">/</span></li>
<li class="breadcrumb-item">
    <span class="breadcrumb-current">{{ sandbox.name }}</span>
</li>
{% endblock %}

{% block content %}
<!-- Sandbox Header -->
<div class="card mb-6">
    <div class="card-header">
        <h3>
            <span class="badge badge-{{ sandbox.state }}">
                <span class="badge-dot" aria-hidden="true"></span>
                {{ sandbox.state | upper }}
            </span>
            <span style="margin-left: var(--sp-2);">{{ sandbox.name }}</span>
            <span class="badge badge-net-{{ sandbox.network_mode }}" style="margin-left: var(--sp-2);">
                {% if sandbox.network_mode == 'none' %}&#128274;{% elif sandbox.network_mode == 'restricted' %}&#9888;{% else %}&#9888;{% endif %}
                NET: {{ sandbox.network_mode | upper }}
            </span>
        </h3>
        <div class="flex items-center gap-4" style="gap: var(--sp-3);">
            <a href="{{ url_for('dashboard.audit_log', sandbox_id=sandbox.id) }}" class="btn btn-secondary btn-sm">
                View Full Audit
            </a>
            {% if sandbox.state == 'running' %}
            <form method="post" action="{{ url_for('dashboard.sandbox_stop', sandbox_id=sandbox.id) }}" style="margin: 0;"
                  onsubmit="return confirmStop(this, '{{ sandbox.name }}');">
                {{ csrf_token() }}
                <button type="submit" class="btn btn-danger btn-sm">
                    Stop Sandbox
                </button>
            </form>
            {% endif %}
        </div>
    </div>

    <!-- Status Details (auto-refreshing) -->
    <div class="card-body"
         id="sandbox-status-area"
         hx-get="{{ url_for('dashboard.partial_sandbox_status', sandbox_id=sandbox.id) }}"
         hx-trigger="every 5s"
         hx-swap="innerHTML">
        {% include "partials/sandbox_status.html" %}
    </div>
</div>

<!-- Two Column Layout: Terminal + Command Policy -->
<div class="grid-2 mb-6">
    <!-- Command Executor -->
    <div>
        {% if sandbox.state == 'running' %}
        <div class="terminal">
            <div class="terminal-header">
                <span class="terminal-dot red" aria-hidden="true"></span>
                <span class="terminal-dot yellow" aria-hidden="true"></span>
                <span class="terminal-dot green" aria-hidden="true"></span>
                <span class="text-xs text-muted" style="margin-left: var(--sp-2);">sandbox@{{ sandbox.id[:8] }}</span>
            </div>
            <div class="terminal-toolbar">
                <button type="button" class="terminal-toolbar-btn" onclick="document.getElementById('exec-history').innerHTML = ''; showToast('Terminal cleared', 'info', 1500);" aria-label="Clear terminal">Clear</button>
            </div>
            <div class="terminal-body" id="exec-history" role="log" aria-label="Command execution history">
                <div class="text-xs text-muted" style="padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--sp-2);">
                    LASSO Sandbox Terminal &middot; {{ sandbox.command_mode }} mode &middot; Type a command below &middot; <span style="opacity: 0.6;">Press <kbd style="font-family: var(--font-mono); background: var(--bg-elevated); padding: 0 4px; border-radius: 3px; border: 1px solid var(--border-default);">/</kbd> to focus</span>
                </div>
                <!-- HTMX exec results appear here -->
            </div>
            <form class="exec-form"
                  hx-post="{{ url_for('dashboard.sandbox_exec', sandbox_id=sandbox.id) }}"
                  hx-target="#exec-history"
                  hx-swap="beforeend scroll:#exec-history:bottom"
                  hx-on::after-request="this.querySelector('input[name=command]').value = ''"
                  hx-disabled-elt="find button"
                  hx-indicator="find .htmx-indicator">
                {{ csrf_token() }}
                <span class="exec-prompt-symbol" aria-hidden="true">$</span>
                <label for="exec-command" class="sr-only" style="position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);">Command</label>
                <input type="text"
                       id="exec-command"
                       name="command"
                       class="exec-input"
                       placeholder="Enter command... (Up/Down for history)"
                       autocomplete="off"
                       autofocus
                       aria-label="Command to execute">
                <button type="submit" class="btn btn-primary btn-sm">
                    <span class="exec-run-btn-text">Run</span>
                    <span class="htmx-indicator" style="gap: 4px;"><span class="spinner"></span></span>
                </button>
            </form>
        </div>
        {% else %}
        <div class="card">
            <div class="card-body">
                <div class="empty-state" style="padding: var(--sp-8);">
                    <div class="empty-state-icon" aria-hidden="true">&#9654;</div>
                    <h3>Sandbox Not Running</h3>
                    <p>Start the sandbox to execute commands.</p>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Command Policy -->
    <div class="card">
        <div class="card-header">
            <h3><span class="card-header-icon" aria-hidden="true">&#9881;</span> Command Policy</h3>
        </div>
        <div class="card-body">
            <div class="detail-grid" style="grid-template-columns: 1fr 1fr;">
                <div class="detail-item">
                    <div class="detail-label">Mode</div>
                    <div class="detail-value font-semibold">{{ policy.mode }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Shell Operators</div>
                    <div class="detail-value">
                        {% if policy.shell_operators %}
                        <span class="text-warning font-semibold">Allowed</span>
                        {% else %}
                        <span class="text-success font-semibold">Blocked</span>
                        {% endif %}
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Max Execution</div>
                    <div class="detail-value">{{ policy.max_seconds }}s</div>
                </div>
            </div>

            {% if policy.mode == 'whitelist' and policy.allowed_commands is not string %}
            <details class="collapsible">
                <summary>Allowed Commands ({{ policy.allowed_commands | length }})</summary>
                <div class="collapsible-content">
                    <div class="cmd-list">
                        {% for cmd in policy.allowed_commands %}
                        <span class="cmd-tag">{{ cmd }}</span>
                        {% endfor %}
                    </div>
                </div>
            </details>
            {% endif %}

            {% if policy.blocked_args %}
            <details class="collapsible">
                <summary>Blocked Argument Patterns</summary>
                <div class="collapsible-content">
                    {% for cmd, patterns in policy.blocked_args.items() %}
                    <div class="mb-2">
                        <code>{{ cmd }}</code>:
                        {% for pattern in patterns %}
                        <span class="cmd-tag blocked">{{ pattern }}</span>
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>
            </details>
            {% endif %}
        </div>
    </div>
</div>

<!-- Security Controls: Network Policy + Filesystem Isolation -->
<div class="grid-2 mb-6">
    <!-- Network Policy -->
    <div class="card">
        <div class="card-header">
            <h3><span class="card-header-icon" aria-hidden="true">&#127760;</span> Network Policy</h3>
            <span class="badge badge-net-{{ sandbox.network.mode }}">
                {% if sandbox.network.mode == 'none' %}&#128274;{% elif sandbox.network.mode == 'restricted' %}&#9888;{% else %}&#9888;{% endif %}
                {{ sandbox.network.mode | upper }}
            </span>
        </div>
        <div class="card-body">
            <!-- Network mode indicator -->
            {% if sandbox.network.mode == 'none' %}
            <div class="security-indicator secure mb-4">
                <span class="security-indicator-icon" aria-hidden="true">&#128274;</span>
                <span>All network access is <strong>disabled</strong>. This sandbox cannot reach any external hosts.</span>
            </div>
            {% elif sandbox.network.mode == 'restricted' %}
            <div class="security-indicator warning mb-4">
                <span class="security-indicator-icon" aria-hidden="true">&#9888;</span>
                <span>Network access is <strong>restricted</strong> to explicitly allowed domains and ports only.</span>
            </div>
            {% else %}
            <div class="security-indicator danger mb-4">
                <span class="security-indicator-icon" aria-hidden="true">&#9888;</span>
                <span>Network access is <strong>unrestricted</strong>. Blocked ports and CIDRs still apply.</span>
            </div>
            {% endif %}

            <!-- Blocked Database Ports -->
            {% if sandbox.network.blocked_ports %}
            <details class="collapsible" open>
                <summary>Blocked Database Ports ({{ sandbox.network.blocked_ports | length }})</summary>
                <div class="collapsible-content">
                    <div class="cmd-list">
                        {% for port in sandbox.network.blocked_ports %}
                        <span class="port-tag">
                            &#128683; {{ port }} &mdash; {{ sandbox.network.blocked_ports_named[port] }}
                        </span>
                        {% endfor %}
                    </div>
                    <p class="text-xs text-muted mt-4" style="margin-top: var(--sp-3);">
                        Database ports are blocked in ALL network modes (including full). Direct database connections are never permitted.
                    </p>
                </div>
            </details>
            {% endif %}

            <!-- Blocked CIDRs -->
            {% if sandbox.network.blocked_cidrs %}
            <details class="collapsible">
                <summary>Blocked Network Ranges ({{ sandbox.network.blocked_cidrs | length }})</summary>
                <div class="collapsible-content">
                    <div class="cmd-list">
                        {% for cidr in sandbox.network.blocked_cidrs %}
                        <span class="cidr-tag">{{ cidr }}</span>
                        {% endfor %}
                    </div>
                </div>
            </details>
            {% endif %}

            <!-- Allowed Domains (restricted mode) -->
            {% if sandbox.network.mode == 'restricted' and sandbox.network.allowed_domains %}
            <details class="collapsible">
                <summary>Allowed Domains ({{ sandbox.network.allowed_domains | length }})</summary>
                <div class="collapsible-content">
                    <div class="cmd-list">
                        {% for domain in sandbox.network.allowed_domains %}
                        <span class="cmd-tag">{{ domain }}</span>
                        {% endfor %}
                    </div>
                </div>
            </details>
            {% endif %}

            <!-- Allowed Ports (restricted mode) -->
            {% if sandbox.network.mode == 'restricted' and sandbox.network.allowed_ports %}
            <details class="collapsible">
                <summary>Allowed Outbound Ports</summary>
                <div class="collapsible-content">
                    <div class="cmd-list">
                        {% for port in sandbox.network.allowed_ports %}
                        <span class="cmd-tag">{{ port }}{% if port == 80 %} (HTTP){% elif port == 443 %} (HTTPS){% endif %}</span>
                        {% endfor %}
                    </div>
                </div>
            </details>
            {% endif %}

            <!-- DNS Servers -->
            {% if sandbox.network.dns_servers %}
            <details class="collapsible">
                <summary>DNS Servers</summary>
                <div class="collapsible-content">
                    <div class="cmd-list">
                        {% for dns in sandbox.network.dns_servers %}
                        <span class="cidr-tag">{{ dns }}</span>
                        {% endfor %}
                    </div>
                </div>
            </details>
            {% endif %}
        </div>
    </div>

    <!-- Filesystem Isolation + Audit Status stacked -->
    <div class="flex flex-col gap-4" style="gap: var(--sp-4);">
        <!-- Filesystem Isolation -->
        <div class="card">
            <div class="card-header">
                <h3><span class="card-header-icon" aria-hidden="true">&#128193;</span> Filesystem Isolation</h3>
            </div>
            <div class="card-body">
                <div class="detail-grid" style="grid-template-columns: 1fr 1fr;">
                    <div class="detail-item">
                        <div class="detail-label">Working Directory</div>
                        <div class="detail-value mono text-sm" style="word-break: break-all;">{{ sandbox.filesystem.working_dir }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Disk Limit</div>
                        <div class="detail-value">{{ sandbox.filesystem.max_disk_mb }} MB</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Temp Dir Size</div>
                        <div class="detail-value">{{ sandbox.filesystem.temp_dir_mb }} MB</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Hidden Paths</div>
                        <div class="detail-value">{{ sandbox.filesystem.hidden_paths | length }} path(s) hidden</div>
                    </div>
                </div>

                {% if sandbox.filesystem.hidden_paths %}
                <details class="collapsible">
                    <summary>Hidden Paths ({{ sandbox.filesystem.hidden_paths | length }})</summary>
                    <div class="collapsible-content">
                        <div class="cmd-list">
                            {% for path in sandbox.filesystem.hidden_paths %}
                            <span class="path-tag hidden">{{ path }}</span>
                            {% endfor %}
                        </div>
                    </div>
                </details>
                {% endif %}

                {% if sandbox.filesystem.read_only_paths %}
                <details class="collapsible">
                    <summary>Read-Only Paths ({{ sandbox.filesystem.read_only_paths | length }})</summary>
                    <div class="collapsible-content">
                        <div class="cmd-list">
                            {% for path in sandbox.filesystem.read_only_paths %}
                            <span class="path-tag readonly">{{ path }}</span>
                            {% endfor %}
                        </div>
                    </div>
                </details>
                {% endif %}

                {% if sandbox.filesystem.writable_paths %}
                <details class="collapsible">
                    <summary>Additional Writable Paths ({{ sandbox.filesystem.writable_paths | length }})</summary>
                    <div class="collapsible-content">
                        <div class="cmd-list">
                            {% for path in sandbox.filesystem.writable_paths %}
                            <span class="path-tag">{{ path }}</span>
                            {% endfor %}
                        </div>
                    </div>
                </details>
                {% endif %}
            </div>
        </div>

        <!-- Audit Status -->
        <div class="card">
            <div class="card-header">
                <h3><span class="card-header-icon" aria-hidden="true">&#128209;</span> Audit Status</h3>
                {% if sandbox.audit_config.enabled %}
                <span class="badge badge-running">
                    <span class="badge-dot" aria-hidden="true"></span>
                    ENABLED
                </span>
                {% else %}
                <span class="badge badge-error">
                    <span class="badge-dot" aria-hidden="true"></span>
                    DISABLED
                </span>
                {% endif %}
            </div>
            <div class="card-body">
                <div class="detail-grid" style="grid-template-columns: 1fr 1fr;">
                    <div class="detail-item">
                        <div class="detail-label">HMAC Signing</div>
                        <div class="detail-value">
                            {% if sandbox.audit_config.sign_entries %}
                            <span class="text-success font-semibold">Enabled</span>
                            {% else %}
                            <span class="text-warning font-semibold">Disabled</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Log Directory</div>
                        <div class="detail-value mono text-xs" style="word-break: break-all;">{{ sandbox.audit_config.log_dir }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Capture Output</div>
                        <div class="detail-value">
                            {% if sandbox.audit_config.include_command_output %}
                            <span class="text-success font-semibold">Yes</span>
                            {% else %}
                            <span class="text-muted">No</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Capture Diffs</div>
                        <div class="detail-value">
                            {% if sandbox.audit_config.include_file_diffs %}
                            <span class="text-success font-semibold">Yes</span>
                            {% else %}
                            <span class="text-muted">No</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Max Log Size</div>
                        <div class="detail-value">{{ sandbox.audit_config.max_log_size_mb }} MB</div>
                    </div>
                    {% if sandbox.audit_config.webhooks_count > 0 %}
                    <div class="detail-item">
                        <div class="detail-label">Webhooks</div>
                        <div class="detail-value">{{ sandbox.audit_config.webhooks_count }} configured</div>
                    </div>
                    {% endif %}
                </div>

                {% if sandbox.audit_log %}
                <div style="margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle);">
                    <div class="detail-label">Active Log File</div>
                    <div class="detail-value mono text-xs" style="word-break: break-all; margin-top: var(--sp-1);">{{ sandbox.audit_log }}</div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Audit Feed -->
<div class="card">
    <div class="card-header">
        <h3><span class="card-header-icon" aria-hidden="true">&#9998;</span> Recent Audit Events</h3>
        <a href="{{ url_for('dashboard.audit_log', sandbox_id=sandbox.id) }}" class="btn btn-ghost btn-sm">
            View All
        </a>
    </div>
    <div id="audit-feed-area"
         hx-get="{{ url_for('dashboard.partial_audit_feed', sandbox_id=sandbox.id) }}"
         hx-trigger="every 5s"
         hx-swap="innerHTML">
        {% include "partials/audit_feed.html" %}
    </div>
</div>
{% endblock %}