<div class="c8y-map-status">
  <div class="leaflet-touch">
    <div
      class="leaflet-bar"
      role="group"
    >
      <button
        class="c8y-realtime"
        title="{{ 'Realtime' | translate }}"
        type="button"
        *ngIf="buttonsConfig.realtime.show"
        (click)="toggleRealtime()"
        [disabled]="buttonsConfig.realtime.disabled"
      >
        <span
          class="c8y-pulse"
          [ngClass]="{
            active: clusterMap?.config.realtime,
            inactive: !clusterMap?.config.realtime
          }"
        ></span>
      </button>

      <label
        class="toggle-countdown vertical"
        [attr.aria-label]="
          refreshPaused ? ('Enable auto refresh' | translate) : ('Disable auto refresh' | translate)
        "
        [tooltip]="
          refreshPaused ? ('Enable auto refresh' | translate) : ('Disable auto refresh' | translate)
        "
        placement="left"
        *ngIf="
          !config.widgetInstanceGlobalAutoRefreshContext &&
          clusterMap?.config.refreshInterval &&
          !clusterMap?.config.follow
        "
        [adaptivePosition]="false"
        [container]="'body'"
        [delay]="1000"
      >
        <input
          type="checkbox"
          (click)="toggleAutoRefresh($event)"
        />
        <c8y-countdown-interval
          [hidden]="refreshPaused"
          [countdownInterval]="clusterMap?.config.refreshInterval"
        ></c8y-countdown-interval>
        <i
          c8yIcon="pause"
          *ngIf="refreshPaused"
        ></i>
      </label>

      <button
        title="{{ 'Cancel reload' | translate }}"
        type="button"
        *ngIf="(clusterMap?.isLoading$ | async) && !config.widgetInstanceGlobalAutoRefreshContext"
        (click)="cancelReload()"
      >
        <i
          class="icon-spin"
          c8yIcon="refresh"
        ></i>
      </button>
      <button
        [title]="'Reload' | translate"
        type="button"
        *ngIf="
          !clusterMap?.config.realtime &&
          !clusterMap?.assets &&
          !(clusterMap?.isLoading$ | async) &&
          !config.widgetInstanceGlobalAutoRefreshContext
        "
        (click)="reload()"
      >
        <i c8yIcon="refresh"></i>
      </button>
      <button
        title="{{ 'Center map' | translate }}"
        type="button"
        (click)="center()"
        [disabled]="centerMapButtonDisabled || clusterMap?.config.follow"
      >
        <i c8yIcon="target1"></i>
      </button>
      <button
        title="{{ 'Unfollow' | translate }}"
        type="button"
        *ngIf="clusterMap?.config.follow"
        (click)="unfollow()"
      >
        <i c8yIcon="marker-off"></i>
      </button>

      <button
        title="{{ 'Follow' | translate }}"
        type="button"
        *ngIf="initConfig.follow && !clusterMap?.config.follow"
        (click)="follow()"
      >
        <i c8yIcon="marker"></i>
      </button>
    </div>
  </div>
</div>