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>
          <div class="actions">
            <form action="/wake" method="post">
              <input type="number" name="Index" value="{{$i}}" hidden>
              <input type="submit" value="&#x23FB;" title="Wake">
            </form>
            <form action="/remove" method="post">
              <input type="number" name="Index" value="{{$i}}" hidden>
              <input type="submit" value="&#x1F5D1;" title="Delete">
            </form>
          </div>
        </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 {
    flex-flow: row wrap;
    justify-content: center;
    padding: 0;
    gap: 0.5rem;
  }
</style>