@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 }
    }"
  >
    @if (controls) {
      <c8y-global-context-widget-wrapper
        [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 }}"
      >
        @if (context.name) {
          <strong>{{ context.name }}</strong>
        } @else {
          <strong
            ngNonBindable
            translate
            [translateParams]="{ id: context.id }"
          >
            Device {{ id }}
          </strong>
        }
      </a>
      <c8y-map-event-info [asset]="context">
        @if (!mapConfig.follow) {
          <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)"
            translate
          >
            Follow
          </button>
        } @else {
          <button
            class="btn btn-default btn-xs btn-block m-t-8"
            [title]="'Stop following this asset.' | translate"
            type="button"
            (click)="stopFollow()"
            translate
          >
            Unfollow
          </button>
        }
      </c8y-map-event-info>
    </div>
  </c8y-cluster-map>
}