<div class="card mb-4">
  <div class="card-header bg-primary text-white">Buttons</div>
  <div class="card-body">

    <% ui.buttons.forEach(btn => { %>
      <div class="d-flex align-items-center mb-2">
        <div class="me-3"><%= btn.label %></div>

        <button class="btn btn-warning btn-sm me-2"
                onclick="openEditButtonModal(<%= btn.id %>)">
          Bearbeiten
        </button>

        <form action="/ui/button/<%= btn.id %>?_method=DELETE" method="POST">
          <button class="btn btn-danger btn-sm">Löschen</button>
        </form>
      </div>
    <% }) %>

    <hr>

    <h5>Neuen Button anlegen</h5>

    <form action="/ui/button" method="POST">

      <input name="label" class="form-control mb-2" placeholder="Label" required>
      <input name="topic" class="form-control mb-2" placeholder="MQTT Topic" required>
      <input name="payload" class="form-control mb-2" placeholder="Payload">
      <input name="color" class="form-control mb-2" placeholder="Farbe">

      <select name="type" class="form-control mb-2">
        <option value="button">Button</option>
        <option value="switch">Switch</option>
      </select>

      <button class="btn btn-success w-100">Speichern</button>

    </form>

  </div>
</div>
