{% extends 'layout.html' %}
{% block content %}
<h2>Virtual Machines (VMs)</h2>

<!-- Form to Add a New VM -->
<form method="POST">
    <input type="text" name="name" placeholder="VM Name" required>
    <input type="number" name="cpu_cores" placeholder="CPU Cores" required>
    <input type="number" name="ram_gb" placeholder="RAM (GB)" required>
    <input type="number" name="storage_gb" placeholder="Storage (GB)" required>
    <select name="vdc_id">
        {% for vdc in vdcs %}
        <option value="{{ vdc.id }}">{{ vdc.name }}</option>
        {% endfor %}
    </select>
    <button type="submit">Add VM</button>
</form>

<!-- Table to Display VMs -->
<table class="table table-bordered">
    <thead>
        <tr>
            <th>ID</th><th>Name</th><th>CPU</th><th>RAM</th><th>Storage</th><th>VDC</th><th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for vm in vms %}
        <tr>
            <td>{{ vm.id }}</td>
            <td>{{ vm.name }}</td>
            <td>{{ vm.cpu_cores }}</td>
            <td>{{ vm.ram_gb }} GB</td>
            <td>{{ vm.storage_gb }} GB</td>
            <td>{{ vm.vdc.name }}</td>
            <td><a href="/vms/delete/{{ vm.id }}">Delete</a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}