{% extends "base.html" %}
{% from "_macros.html" import volume_status, empty %}
{% block title %}Volumes · mgf-cloud-web{% endblock %}
{% block content %}
<header class="page-header">
  <div>
    <p class="eyebrow">block storage</p>
    <h1>Volumes</h1>
  </div>
</header>
<div class="split">
  <div>
    {% if volumes %}
    <div class="table-wrap">
      <table class="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>{{ volume_status(v.status) }}</td>
            <td>{{ v.bootable }}</td>
            <td class="mono">{{ v.attached_server_id or "—" }}</td>
            <td class="actions">
              <form method="post" action="/volumes/{{ v.name }}/attach"><input class="input input-sm" name="server" placeholder="server" size="8" required><button class="button button-secondary button-sm">attach</button></form>
              <form method="post" action="/volumes/{{ v.name }}/detach"><input class="input input-sm" name="server" placeholder="server" size="8" required><button class="button button-secondary button-sm">detach</button></form>
              <form method="post" action="/volumes/{{ v.name }}/delete"><button class="button button-danger button-sm">delete</button></form>
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    {{ empty("No volumes yet.", "Create a block volume to attach to an instance.") }}
    {% endif %}
  </div>
  <aside class="card">
    <p class="eyebrow">create volume</p>
    <form class="form" method="post" action="/volumes">
      <div class="field"><label class="label" for="vname">Name</label><input class="input" id="vname" name="name" required></div>
      <div class="field"><label class="label" for="vsize">Size (GB)</label><input class="input" id="vsize" name="size" type="number" value="20" required></div>
      <button class="button button-accent" type="submit">Create</button>
    </form>
  </aside>
</div>
{% endblock %}