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

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

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

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

    <hr>

    <h5>Neue Anzeige anlegen</h5>

    <form action="/ui/display" 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>

      <select name="type" class="form-control mb-2">
        <option value="text">Text</option>
        <option value="number">Zahl</option>
        <option value="status">Status</option>
      </select>

      <input name="jsonPath" class="form-control mb-2" placeholder="JSON-Feld">

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

    </form>

  </div>
</div>
