{% extends "base.html" %}
{% from "_macros.html" import server_status, empty %}
{% block title %}VMs · mgf-cloud-web{% endblock %}
{% block content %}
<header class="page-header">
  <div>
    <p class="eyebrow">compute</p>
    <h1>VMs</h1>
    <p class="muted mono" style="margin: var(--space-1) 0 0; font-size: 0.72rem">&#9679; live &middot; auto-refreshes every 20s</p>
  </div>
  <div class="page-header__actions">
    <a class="button button-accent" href="/vms/new">+ New VM</a>
  </div>
</header>
<div id="vms-table" hx-get="/vms" hx-trigger="every 20s" hx-select="#vms-table" hx-target="#vms-table" hx-swap="outerHTML">
{% if vms %}
<div class="table-wrap">
  <table class="table">
    <thead><tr><th>Name</th><th>Status</th><th>Flavor</th><th>Image</th><th>Floating IPs</th><th class="actions"></th></tr></thead>
    <tbody>
    {% for vm in vms %}
      <tr>
        <td><a href="/vms/{{ vm.name }}">{{ vm.name }}</a></td>
        <td>{{ server_status(vm.status) }}</td>
        <td>{{ vm.flavor }}</td>
        <td>{{ vm.image }}</td>
        <td class="mono">{{ vm.floating_ips|join(", ") or "—" }}</td>
        <td class="actions">
          <form method="post" action="/vms/{{ vm.name }}/reboot"><button class="button button-secondary button-sm">reboot</button></form>
          <form method="post" action="/vms/{{ vm.name }}/delete"><button class="button button-danger button-sm">delete</button></form>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
{{ empty("No VMs yet.", "Create your first instance to get started.") }}
{% endif %}
</div>
{% endblock %}