<div data-test-topo-viz-datacenter class="boxed-section topo-viz-datacenter">
  <div data-test-topo-viz-datacenter-label class="boxed-section-head is-hollow">
    <strong>{{@datacenter.name}}</strong>
    <span class="bumper-left">{{this.scheduledAllocations.length}} Allocs</span>
    <span class="bumper-left">{{@datacenter.nodes.length}} Nodes</span>
    <span class="bumper-left is-faded">{{format-bytes this.aggregatedAllocationResources.memory start="MiB"}}/{{format-bytes this.aggregatedNodeResources.memory start="MiB"}},
      {{format-hertz this.aggregatedAllocationResources.cpu}}/{{format-hertz this.aggregatedNodeResources.cpu}}</span>
  </div>
  <div class="boxed-section-body">
    <FlexMasonry @columns={{if @isSingleColumn 1 2}} @items={{@datacenter.nodes}} as |node|>
      <TopoViz::Node
        @node={{node}}
        @isDense={{@isDense}}
        @heightScale={{@heightScale}}
        @onAllocationSelect={{@onAllocationSelect}}
        @onAllocationFocus={{@onAllocationFocus}}
        @onAllocationBlur={{@onAllocationBlur}}
        @onNodeSelect={{@onNodeSelect}} />
    </FlexMasonry>
  </div>
</div>
