miniwol/web/template/device.html

<form action="/add" method="post">
  <fieldset>
    <legend>Add Device</legend>

    <label for="alias">Alias</label><input id="alias" name="Alias">
    <label for="mac">MAC</label><input id="mac" name="MAC">
    <label for="ip">IP</label><input id="ip" name="IP" value="255.255.255.255">
    <input type="submit" value="Submit">
  </fieldset>
</form>

<fieldset>
  <legend>Devices</legend>

  <table>
    <tr>
      <th>Alias</th>
      <th>MAC</th>
      <th>IP/Broadcast</th>
      <th>Actions</th>
    </tr>
    {{range $i, $d := .Devices}}
      <tr>
        <td>{{$d.Alias}}</td>
        <td>{{$d.MAC}}</td>
        <td>{{$d.IP}}</td>
        <td class="actions">
          <form action="/wake" method="post">
            <input type="text" name="Alias" value="{{$d.Alias}}" hidden>
            <input type="text" name="MAC" value="{{$d.MAC}}" hidden>
            <input type="text" name="IP" value="{{$d.IP}}" hidden>
            <input type="submit" value="Wake">
          </form>
          <form action="/remove" method="post">
            <input type="text" name="Alias" value="{{$d.Alias}}" hidden>
            <input type="text" name="MAC" value="{{$d.MAC}}" hidden>
            <input type="text" name="IP" value="{{$d.IP}}" hidden>
            <input type="submit" value="Remove">
          </form>
        </td>
      </tr>
    {{end}}
  </table>
</fieldset>

<style>
  body > div {
    flex-flow: row wrap;
    align-items: flex-start;
  }
  
  body > div > form {
    flex-grow: 1;
  }

  table {
    grid-column: 1 / 3;
    border-collapse: collapse;
  }

  th, td {
    padding: 0.25rem;
  }

  .actions {
    text-align: center;
  }

  .actions > form {
    display: contents;
  }
</style>