{% 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 %}
<div class="page-header">
    <h1 class="page-title">Sandbox Overview</h1>
    <p class="page-subtitle">Monitor and manage active sandbox environments</p>
</div>

<!-- Stats Row -->
<section class="stats-grid mb-6" aria-label="System statistics">
    <div class="stat-card info">
        <div class="stat-label">Total Sandboxes</div>
        <div class="stat-value">{{ stats.total }}</div>
    </div>
    <div class="stat-card success">
        <div class="stat-label">Running</div>
        <div class="stat-value">{{ stats.running }}</div>
    </div>
    <div class="stat-card muted">
        <div class="stat-label">Stopped</div>
        <div class="stat-value">{{ stats.stopped }}</div>
    </div>
    <div class="stat-card error">
        <div class="stat-label">Errors</div>
        <div class="stat-value">{{ stats.errors }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Commands Executed</div>
        <div class="stat-value">{{ stats.total_execs }}</div>
    </div>
    <div class="stat-card warning">
        <div class="stat-label">Commands Blocked</div>
        <div class="stat-value">{{ stats.total_blocked }}</div>
    </div>
</section>

<!-- Create Sandbox -->
<section class="card mb-6" aria-label="Create sandbox">
    <div class="card-header">
        <h3><span class="card-header-icon" aria-hidden="true">+</span> Create New Sandbox</h3>
    </div>
    <div class="card-body">
        <form method="post" action="{{ url_for('dashboard.sandbox_create') }}">
            {{ csrf_token() }}
            <div class="flex gap-4 flex-wrap" style="align-items: flex-end;">
                <div class="form-group flex-1" style="min-width: 220px;">
                    <label class="form-label" for="create-profile">Profile</label>
                    <select name="profile" id="create-profile" class="form-select" required aria-label="Select profile">
                        {% for p in profiles %}
                        <option value="{{ p.name }}">
                            {{ p.name }}
                            {% if p.source == 'builtin' %}(builtin){% endif %}
                            — {{ p.net_mode }} network, {{ p.cmd_mode }} commands
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group flex-1" style="min-width: 220px;">
                    <label class="form-label" for="create-workdir">Working Directory</label>
                    <input type="text"
                           name="working_dir"
                           id="create-workdir"
                           class="form-input"
                           value="/tmp/lasso-sandbox"
                           placeholder="/path/to/working/dir"
                           aria-label="Working directory">
                </div>
                <button type="submit" class="btn btn-primary">
                    <span class="btn-default-text">Create Sandbox</span>
                    <span class="btn-loading-text"><span class="spinner"></span> Creating...</span>
                </button>
            </div>
        </form>
    </div>
</section>

<!-- Sandbox Table -->
<section aria-label="Sandbox list">
    <div class="flex items-center justify-between mb-4" style="flex-wrap: wrap; gap: var(--sp-3);">
        <h2>Active Sandboxes</h2>
        <div class="flex items-center" style="gap: var(--sp-3);">
            <div class="search-filter-wrap">
                <span class="search-filter-icon" aria-hidden="true">&#128269;</span>
                <input type="text"
                       id="sandbox-filter"
                       class="search-filter-input"
                       placeholder="Filter sandboxes..."
                       oninput="filterTable(this.value)"
                       aria-label="Filter sandboxes">
                <span class="search-filter-kbd" aria-hidden="true">s</span>
            </div>
            <span class="htmx-indicator text-xs text-muted flex items-center gap-4" style="gap: 6px;">
                <span class="spinner"></span> Refreshing
            </span>
        </div>
    </div>

    <div id="sandbox-table-wrapper"
         hx-get="{{ url_for('dashboard.partial_sandbox_table') }}"
         hx-trigger="every 5s"
         hx-swap="innerHTML"
         hx-indicator=".htmx-indicator">
        {% include "partials/sandbox_table.html" %}
    </div>
</section>
{% endblock %}