{% extends "base.html" %}
{% block title %}New Sandbox — Shoreguard{% endblock %}

{% block extra_css %}
<link href="/static/css/wizard.css" rel="stylesheet">
{% endblock %}

{% block breadcrumbs %}
<ol class="breadcrumb mb-0">
    <li class="breadcrumb-item"><a href="/gateways">Gateways</a></li>
    <li class="breadcrumb-item"><a href="/gateways/{{ gateway_name }}">{{ gateway_name }}</a></li>
    <li class="breadcrumb-item"><a href="/gateways/{{ gateway_name }}/sandboxes">Sandboxes</a></li>
    <li class="breadcrumb-item active">New</li>
</ol>
{% endblock %}

{% block content %}
<div class="row justify-content-center" x-data="sandboxWizard">
    <div class="col-lg-10 col-xl-8">
        <h4 class="mb-4">Create New Sandbox</h4>

        <!-- Step indicators -->
        <div class="d-flex mb-4">
            <div class="wizard-step active" data-step="1">
                <span class="badge rounded-pill bg-primary me-2">1</span>Agent Type
            </div>
            <div class="wizard-step" data-step="2">
                <span class="badge rounded-pill bg-secondary me-2">2</span>Configuration
            </div>
            <div class="wizard-step" data-step="3">
                <span class="badge rounded-pill bg-secondary me-2">3</span>Policy
            </div>
            <div class="wizard-step" data-step="4">
                <span class="badge rounded-pill bg-secondary me-2">4</span>Launch
            </div>
        </div>

        <!-- Step 1: Agent Type (templates + community sandboxes) -->
        <div id="wizard-step-1" class="wizard-content">
            <!-- Sandbox Templates (loaded from API) -->
            <div id="wizard-templates" class="row g-3 mb-4"></div>

            <!-- Community Sandboxes (rendered from openshell.yaml) -->
            <div class="row g-3">
                {% for sandbox in community_sandboxes %}
                <div class="col-md-6">
                    <div class="card agent-card" data-action="select-agent" data-arg="{{ sandbox.name }}">
                        <div class="card-body text-center py-4">
                            <i class="bi bi-robot fs-1 text-success"></i>
                            <h5 class="mt-3">{{ sandbox.name }}</h5>
                            <p class="text-muted small">{{ sandbox.description }}</p>
                        </div>
                    </div>
                </div>
                {% endfor %}
                <div class="col-md-6">
                    <div class="card agent-card" data-action="select-agent" data-arg="custom">
                        <div class="card-body text-center py-4">
                            <i class="bi bi-gear fs-1 text-secondary"></i>
                            <h5 class="mt-3">Custom</h5>
                            <p class="text-muted small">Configure manually</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Step 2: Configuration -->
        <div id="wizard-step-2" class="wizard-content d-none">
            <div class="card">
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Sandbox Name</label>
                        <input type="text" id="wizard-name" class="form-control" placeholder="my-sandbox">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Container Image</label>
                        <input type="text" id="wizard-image" class="form-control" placeholder="(default base image)">
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="wizard-gpu">
                            <label class="form-check-label" for="wizard-gpu">Request GPU resources</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="wizard-log-level">
                            Supervisor Log Level <span class="text-muted small">(optional)</span>
                        </label>
                        <select id="wizard-log-level" class="form-select">
                            <option value="">Gateway default</option>
                            <option value="debug">debug</option>
                            <option value="info">info</option>
                            <option value="warn">warn</option>
                            <option value="error">error</option>
                        </select>
                        <div class="form-text">
                            Controls how verbose the sandbox supervisor's own logs are. Leave blank to inherit the gateway's default.
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Providers <span class="text-muted small">(optional)</span></label>
                        <div id="wizard-provider-select"></div>
                        <div class="form-text">Select providers to attach. Sandboxes can also auto-create providers on demand.</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Environment Variables <span class="text-muted small">(optional)</span></label>
                        <div id="wizard-env-vars"></div>
                        <button class="btn btn-outline-secondary btn-sm mt-1" type="button" @click="addEnv()">
                            <i class="bi bi-plus me-1"></i>Add Variable
                        </button>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description <span class="text-muted small">(optional)</span></label>
                        <input type="text" id="wizard-description" class="form-control"
                               placeholder="e.g. ML training sandbox for team-alpha" maxlength="1000">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Labels <span class="text-muted small">(optional)</span></label>
                        <div id="wizard-labels" class="mb-1"></div>
                        <div class="input-group input-group-sm sg-mw-400" id="wizard-label-input">
                            <input type="text" class="form-control font-monospace" id="wizard-label-key"
                                   placeholder="key" @keydown.enter.prevent="addLabel()">
                            <span class="input-group-text">=</span>
                            <input type="text" class="form-control" id="wizard-label-val"
                                   placeholder="value" @keydown.enter.prevent="addLabel()">
                            <button class="btn btn-outline-success" type="button" @click="addLabel()">
                                <i class="bi bi-plus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between">
                        <button class="btn btn-outline-secondary" @click="prev()">Back</button>
                        <button class="btn btn-primary" @click="next()">Next</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Step 3: Policy Presets -->
        <div id="wizard-step-3" class="wizard-content d-none">
            <p class="text-muted mb-3">Select policy presets to enable:</p>
            <div id="wizard-presets" class="mb-3"></div>
            <div class="d-flex justify-content-between">
                <button class="btn btn-outline-secondary" @click="prev()">Back</button>
                <button class="btn btn-primary" @click="next()">Next</button>
            </div>
        </div>

        <!-- Step 4: Launch -->
        <div id="wizard-step-4" class="wizard-content d-none">
            <div class="card">
                <div class="card-body">
                    <h5>Summary</h5>
                    <div id="wizard-summary" class="mb-3"></div>
                    <div id="wizard-progress" class="d-none">
                        <div class="progress mb-2">
                            <div class="progress-bar progress-bar-striped progress-bar-animated sg-w-0" id="wizard-progress-bar"></div>
                        </div>
                        <div id="wizard-log" class="log-output small"></div>
                    </div>
                    <div class="d-flex justify-content-between">
                        <div class="d-flex gap-2">
                            <button class="btn btn-outline-secondary" @click="prev()" id="wizard-back-btn">Back</button>
                            <button class="btn btn-outline-secondary" @click="customize()" id="wizard-customize-btn">
                                <i class="bi bi-pencil me-1"></i>Customize
                            </button>
                        </div>
                        <button class="btn btn-success" @click="launch()" id="wizard-launch-btn">
                            <i class="bi bi-rocket me-1"></i>Launch Sandbox
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/providers.js"></script>
<script src="/static/js/wizard.js"></script>
{% endblock %}