@if (mapConfig) {
  <c8y-map-status
    [clusterMap]="mapWidget"
    [(config)]="mapConfig"
    (onUnfollow)="stopFollow()"
    (fitAssetsToBounds)="fitToBounds()"
    [assets]="assets"
    [buttonsConfig]="{
      autoRefresh: { show: false },
      refresh: { show: false },
      realtime: { show: false },
      fitToBounds: { show: true }
    }"
  >
    <c8y-global-context-widget-wrapper
      *ngIf="controls"
      [widgetControls]="controls"
      [config]="config"
      [isLoading]="mapWidget.isLoading$ | async"
      (globalContextChange)="onGlobalContext($event)"
    ></c8y-global-context-widget-wrapper>
  </c8y-map-status>

  <c8y-cluster-map
    #mapWidget
    [rootNode]="rootNode"
    [config]="mapConfig"
    [asset]="assets"
  >
    <div
      class="map-marker"
      *c8yMapPopup="let context"
    >
      <a
        class="text-truncate deviceLink text-12"
        routerLink="{{ context | assetLink }}"
      >
        <strong>{{ context.name }}</strong>
      </a>
      <c8y-map-event-info [asset]="context">
        <button
          class="btn btn-default btn-xs btn-block m-t-8"
          [title]="'Activate realtime on this asset and follow it if it moves' | translate"
          type="button"
          (click)="startFollow(context)"
          *ngIf="!mapConfig.follow"
          translate
        >
          Follow
        </button>
        <button
          class="btn btn-default btn-xs btn-block m-t-8"
          [title]="'Stop following this asset.' | translate"
          type="button"
          (click)="stopFollow()"
          *ngIf="mapConfig.follow"
          translate
        >
          Unfollow
        </button>
      </c8y-map-event-info>
    </div>
  </c8y-cluster-map>
}