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

    <div id="dashboardGrid" class="dashboard-grid">

      <% ui.buttons.forEach(btn => { %>
        <div class="dashboard-item"
             data-id="<%= btn.id %>"
             data-type="button"
             style="grid-column-start:<%= btn.posX %>; grid-row-start:<%= btn.posY %>;">
             
          <div class="tile-header"><%= btn.label %></div>

          <button class="btn btn-primary w-100 mt-2 send-btn"
                  data-topic="<%= btn.topic %>"
                  data-payload="<%= btn.payload %>">
            <%= btn.label %>
          </button>
        </div>
      <% }) %>

      <% ui.displays.forEach(d => { %>
        <div class="dashboard-item"
             data-id="<%= d.id %>"
             data-type="display"
             style="grid-column-start:<%= d.posX %>; grid-row-start:<%= d.posY %>;">
             
          <div class="tile-header"><%= d.label %></div>

          <div class="tile-value"
               data-topic="<%= d.topic %>"
               data-jsonpath="<%= d.jsonPath %>">
            ---
          </div>
        </div>
      <% }) %>

    </div>

  </div>
</div>
