{% 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">
    <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" onclick="selectAgent({{ sandbox.name|tojson }}, event)">
                        <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" onclick="selectAgent('custom', event)">
                        <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" style="display: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">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" onclick="addWizardEnvVar()">
                            <i class="bi bi-plus me-1"></i>Add Variable
                        </button>
                    </div>
                    <div class="d-flex justify-content-between">
                        <button class="btn btn-outline-secondary" onclick="wizardPrev()">Back</button>
                        <button class="btn btn-primary" onclick="wizardNext()">Next</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Step 3: Policy Presets -->
        <div id="wizard-step-3" class="wizard-content" style="display: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" onclick="wizardPrev()">Back</button>
                <button class="btn btn-primary" onclick="wizardNext()">Next</button>
            </div>
        </div>

        <!-- Step 4: Launch -->
        <div id="wizard-step-4" class="wizard-content" style="display:none">
            <div class="card">
                <div class="card-body">
                    <h5>Summary</h5>
                    <div id="wizard-summary" class="mb-3"></div>
                    <div id="wizard-progress" style="display:none">
                        <div class="progress mb-2">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" id="wizard-progress-bar" style="width: 0%"></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" onclick="wizardPrev()" id="wizard-back-btn">Back</button>
                            <button class="btn btn-outline-secondary" onclick="wizardCustomize()" id="wizard-customize-btn">
                                <i class="bi bi-pencil me-1"></i>Customize
                            </button>
                        </div>
                        <button class="btn btn-success" onclick="launchSandbox()" 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>
<script>document.addEventListener('DOMContentLoaded', initWizard);</script>
{% endblock %}