<div class="row">
  <div class="col-md-12 mt-2">

    <!-- Add Warehouse Button -->
    <div class="mb-3 text-right">
      <% if (menuPermission?.create_status) { %>
        <a href="/warehouses/add" class="btn btn-sm btn-success p-2">
          <i class="fas fa-plus"></i> Lager hinzufügen
        </a>
        <% } %>
    </div>

    <!-- Warehouse Boxes -->
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">
          <%= sectionTitle %>
        </h3>
      </div>

      <div class="card-body">

        <div class="row mb-4">

          <% if (warehouses.length> 0) { %>
            <% warehouses.forEach(wh=> { %>
              <div class="col-md-3 col-sm-6 mb-3">
                <div class="warehouse-box position-relative" data-id="<%= wh.warehouse_id %>"
                  style="background-color: #73b33b; color: #fff; padding: 15px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;">

                  <!-- Text Left -->
                  <div>
                    <h5 class="fw-bold mb-0">
                      <%= wh.warehouse_name %>
                    </h5>
                  </div>

                  <!-- Buttons Right -->
                  <div style="display:flex; gap:5px;">
                    <% if (menuPermission?.read_status) { %>
                    <a class="btn btn-primary btn-sm" href="/warehouses/details/<%= wh.warehouse_id %>" title="View"
                      onclick="event.stopPropagation();" style="padding:2px 5px; font-size:12px;">
                      <i class="fas fa-eye"></i>
                    </a>
                    <% } %>
                    <% if (menuPermission?.update_status) { %>
                    <a class="btn btn-info btn-sm" href="/warehouses/edit/<%= wh.warehouse_id %>" title="Edit"
                      onclick="event.stopPropagation();" style="padding:2px 5px; font-size:12px;">
                      <i class="fas fa-pencil-alt"></i>
                    </a>
                    <% } %>
                    <% if (menuPermission?.delete_status) { %>
                    <a class="btn btn-danger btn-sm"
                      onclick="event.stopPropagation(); deleteDataFunc('<%= wh.warehouse_id %>', 'warehouses/delete/<%= wh.warehouse_id %>')"
                      title="Delete" style="padding:2px 5px; font-size:12px;">
                      <i class="fas fa-trash"></i>
                    </a>
                    <% } %>
                  </div>
                </div>
              </div>
              <% }) %>
                <% } else { %>
                  <div class="col-12 text-center">
                    <p>Keine Daten gefunden</p>
                  </div>
                  <% } %>
        </div>

        <!-- Stock Overview Table -->
        <!-- Stock Overview Table -->
        <table class="table table-bordered table-striped">
          <thead class="thead-dark">
            <tr>
              <th>Produkt</th>
              <th>Artikel-Nr</th>
              <th>Lieferant</th>
              <% warehouses.forEach(w=> { %>
                <th>
                  <%= w.warehouse_name %>
                </th>
                <% }); %>
                  <th>GESAMT</th>
            </tr>
          </thead>

          <tbody>
            <% if (serialRows.length> 0) { %>
              <% serialRows.forEach(row=> { %>
                <tr>
                  <td>
                    <%= row.product_name %>
                  </td>

                  <td>
                    <a
                      href="/warehouses/serialDetails?product=<%= row.product_name %>&partNumber=<%= row.part_number %>">
                      <%= row.part_number %>
                    </a>
                  </td>

                  <td>
                    <%= row.supplier %>
                  </td>

                  <% let rowTotal=0; warehouses.forEach(w=> {
                    rowTotal += row[w.warehouse_name];
                    %>
                    <td>
                      <span class="<%= row[w.warehouse_name] > 0 ? 'text-danger font-weight-bold' : '' %>">
                        <%= row[w.warehouse_name] %>
                      </span>
                    </td>
                    <% }); %>

                      <td>
                        <%= rowTotal %>
                      </td>
                </tr>
                <% }); %>
                  <% } else { %>
                    <tr>
                      <td colspan="<%= warehouses.length + 4 %>" class="text-center">
                        Keine Daten gefunden
                      </td>
                    </tr>
                    <% } %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>