{{define "content"}}
<div class="bg-white rounded shadow p-4">
  <h1 class="text-2xl font-bold">Storage</h1>
  <div class="mt-4">
    <button class="px-3 py-2 bg-blue-500 text-white rounded" hx-get="/hx/pools" hx-swap="outerHTML" hx-target="#pools">Refresh pools</button>
  </div>
  <div id="pools" class="mt-4">
    {{template "hx_pools" .}}
  </div>
  <div class="mt-6">
    <h2 class="text-lg font-semibold">Create Pool</h2>
    <form hx-post="/storage/pool/create" hx-swap="afterbegin" class="mt-2">
      <div class="flex space-x-2">
        <input name="name" placeholder="pool name" class="border rounded p-1" />
        <input name="vdevs" placeholder="/dev/sda,/dev/sdb" class="border rounded p-1" />
        <button class="px-3 py-1 bg-green-500 text-white rounded" type="submit">Create</button>
      </div>
    </form>
  </div>
</div>
{{end}}