<c8y-title>{{ 'Device map' | translate }}</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    icon="exchange"
    [label]="'Devices' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    icon="c8y-location"
    [label]="'Map' | translate"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<div class="card card--grid content-fullpage">
  <div
    class="bg-white p-relative"
    style="min-height: 30vh"
  >
    <c8y-map-status
      [clusterMap]="map"
      [(config)]="config"
    ></c8y-map-status>
    <c8y-cluster-map
      #map
      [config]="config"
    >
      <div *c8yMapPopup="let context">
        <c8y-tracking-marker-popup
          [showTrackingLink]="true"
          [context]="context"
        ></c8y-tracking-marker-popup>
      </div>
    </c8y-cluster-map>
  </div>
</div>