{% extends "base.html" %}
{% block content %}
<section class="section">
    <h1 class="title">VBox — Disposable Docker VMs</h1>
    <div class="columns">
        <div class="column is-4">
            <div class="box">
                <h2 class="subtitle">Create</h2>
                <form hx-post="/vbox/create" hx-target="#vbox-result">
                    <div class="field">
                        <label class="label">Name</label>
                        <input class="input" name="name" placeholder="my-vm" required>
                    </div>
                    <div class="field">
                        <label class="label">Image</label>
                        <input class="input" name="image" value="ubuntu:22.04">
                    </div>
                    <div class="field">
                        <label class="label">Directory (optional)</label>
                        <input class="input" name="directory" placeholder="e.g. /home/user/project">
                    </div>
                    <button class="button is-primary">Create</button>
                </form>
            </div>
        </div>
        <div class="column">
            <div class="box">
                <h2 class="subtitle">Containers</h2>
                <pre class="log-box">{{ containers }}</pre>
            </div>
        </div>
    </div>
    <div id="vbox-result"></div>
</section>
{% endblock %}