{% extends "base.html" %}{% block content %}
<div class="page-header">
 <div class="titles"><h1>Volumes</h1></div>
</div>
<div class="table-wrap">
<table>
<thead><tr><th>Name</th><th class="num">Size (GB)</th><th>Status</th><th>Bootable</th><th>Attached</th><th class="actions"></th></tr></thead>
<tbody>
{% for v in volumes %}
<tr>
 <td>{{ v.name }}</td><td class="num">{{ v.size_gb }}</td>
 <td><span class="badge {% if v.status == 'available' %}badge-ok{% elif v.status == 'in-use' %}badge-info{% elif v.status == 'error' %}badge-danger{% else %}badge-neutral{% endif %}">{{ v.status }}</span></td>
 <td>{{ v.bootable }}</td>
 <td class="mono">{{ v.attached_server_id or "—" }}</td>
 <td class="actions">
  <form class="inline" method="post" action="/volumes/{{ v.name }}/attach"><input name="server" placeholder="server" size="8" required><button>attach</button></form>
  <form class="inline" method="post" action="/volumes/{{ v.name }}/detach"><input name="server" placeholder="server" size="8" required><button>detach</button></form>
  <form class="inline" method="post" action="/volumes/{{ v.name }}/delete"><button class="danger">delete</button></form>
 </td>
</tr>
{% else %}<tr><td colspan="6" class="muted">No volumes.</td></tr>{% endfor %}
</tbody>
</table>
</div>
<div class="card" style="max-width:540px">
 <p class="card-title">Create volume</p>
 <form class="form-row" method="post" action="/volumes">
  <label class="field">Name<input name="name" required></label>
  <label class="field">Size GB<input name="size" type="number" value="20" required></label>
  <button class="primary">Create</button>
 </form>
</div>
{% endblock %}