<div class="c8y-map-status">
  <div class="leaflet-touch">
    <div
      class="leaflet-bar"
      role="group"
    >
      @if (buttonsConfig.realtime.show) {
        <button
          class="c8y-realtime"
          title="{{ 'Realtime' | translate }}"
          type="button"
          (click)="toggleRealtime()"
          [disabled]="buttonsConfig.realtime.disabled"
        >
          <span
            class="c8y-pulse"
            [ngClass]="{
              active: clusterMap?.config.realtime,
              inactive: !clusterMap?.config.realtime
            }"
          ></span>
        </button>
      }
      @if (
        buttonsConfig.autoRefresh.show &&
        !config.widgetInstanceGlobalAutoRefreshContext &&
        clusterMap?.config.refreshInterval &&
        !clusterMap?.config.follow
      ) {
        <label
          class="toggle-countdown vertical"
          [attr.aria-label]="
            (refreshPaused ? autoRefreshPausedLabel : autoRefreshEnabledLabel) | translate
          "
          [tooltip]="(refreshPaused ? autoRefreshPausedLabel : autoRefreshEnabledLabel) | translate"
          placement="left"
          [adaptivePosition]="false"
          [container]="'body'"
          [delay]="1000"
        >
          <input
            type="checkbox"
            (click)="toggleAutoRefresh($event)"
          />
          <c8y-countdown-interval
            [hidden]="refreshPaused"
            [countdownInterval]="clusterMap?.config.refreshInterval"
          ></c8y-countdown-interval>
          @if (refreshPaused) {
            <i c8yIcon="pause"></i>
          }
        </label>
      }
      @if (
        buttonsConfig.refresh.show &&
        (clusterMap?.isLoading$ | async) &&
        !config.widgetInstanceGlobalAutoRefreshContext
      ) {
        <button
          title="{{ 'Cancel reload' | translate }}"
          type="button"
          (click)="cancelReload()"
        >
          <i
            class="icon-spin"
            c8yIcon="refresh"
          ></i>
        </button>
      }
      @if (
        buttonsConfig.refresh.show &&
        !clusterMap?.config.realtime &&
        !clusterMap?.assets &&
        !(clusterMap?.isLoading$ | async) &&
        !config.widgetInstanceGlobalAutoRefreshContext
      ) {
        <button
          [title]="'Reload' | translate"
          type="button"
          (click)="reload()"
        >
          <i c8yIcon="refresh"></i>
        </button>
      }
      <ng-content></ng-content>
      @if (buttonsConfig.center.show) {
        <button
          title="{{ 'Center map' | translate }}"
          type="button"
          (click)="center()"
          [disabled]="buttonsConfig.center.disabled || clusterMap?.config.follow"
        >
          <i c8yIcon="target1"></i>
        </button>
      }
      @if (buttonsConfig.fitToBounds.show) {
        <button
          title="{{ 'Fit to assets bounds' | translate }}"
          type="button"
          (click)="fitToBounds()"
          [disabled]="buttonsConfig.fitToBounds.disabled || clusterMap?.config.follow"
        >
          <i c8yIcon="waypoint-map"></i>
        </button>
      }
      @if (clusterMap?.config.follow) {
        <button
          title="{{ 'Unfollow' | translate }}"
          type="button"
          (click)="unfollow()"
        >
          <i c8yIcon="marker-off"></i>
        </button>
      }
      @if (initConfig.follow && !clusterMap?.config.follow) {
        <button
          title="{{ 'Follow' | translate }}"
          type="button"
          (click)="follow()"
        >
          <i c8yIcon="marker"></i>
        </button>
      }
    </div>
  </div>
</div>