@if (formConfig) {
  <fieldset class="c8y-fieldset">
    <legend>{{ 'Map' | translate }}</legend>
    <div class="row tight-grid">
      <div class="col-xs-3">
        <c8y-form-group class="m-b-16 text-center form-group-sm">
          <label translate>Marker icon</label>
          <c8y-icon-selector-wrapper
            [canRemoveIcon]="true"
            [selectedIcon]="formConfig.icon"
            (onSelect)="selectIcon($event)"
          ></c8y-icon-selector-wrapper>
        </c8y-form-group>
      </div>
      <div class="col-xs-9">
        <div class="form-group form-group-sm">
          <label translate>Zoom level</label>
          <c8y-range
            class="label-bottom"
            name="zoomLevel"
            #range
            [(ngModel)]="formConfig.zoomLevel"
            (change)="zoomLevelChanged()"
          >
            <input
              type="range"
              min="0"
              max="18"
              step="1"
            />
          </c8y-range>
        </div>
      </div>
    </div>
    <c8y-form-group class="form-group-sm">
      <label translate>Center bound</label>
      <div class="input-group input-group-sm">
        <input
          class="form-control"
          placeholder="{{ 'lat.`latitude`' | translate }}"
          name="centerLat"
          type="number"
          required
          [(ngModel)]="formConfig.center[0]"
          (change)="changeCenter()"
          (keydown.enter)="changeCenterOnEnterKey($event)"
          min="-90"
          max="90"
          step="0.1"
        />
        <input
          class="form-control"
          placeholder="{{ 'lng.`longitude`' | translate }}"
          name="centerLng"
          type="number"
          required
          min="-180"
          max="180"
          [(ngModel)]="formConfig.center[1]"
          (change)="changeCenter()"
          (keydown.enter)="changeCenterOnEnterKey($event)"
          min="-180"
          max="180"
          step="0.1"
        />
        <div class="input-group-btn">
          <button
            class="btn btn-default"
            [attr.aria-label]="'Use your location' | translate"
            [tooltip]="'Use your location' | translate"
            placement="top"
            container="body"
            (click)="useOwnPosition()"
          >
            <i
              class="icon-14"
              c8yIcon="location-arrow"
            ></i>
          </button>
        </div>
        <div class="input-group-btn">
          @if (canAutoCenter()) {
            <button
              class="btn btn-default"
              [attr.aria-label]="'Use selected asset location' | translate"
              [tooltip]="'Use selected asset location' | translate"
              placement="top"
              container="body"
              (click)="centerToAsset()"
            >
              <i
                class="icon-14"
                c8yIcon="location"
              ></i>
            </button>
          } @else {
            <button
              class="btn btn-default"
              [attr.aria-label]="'Fit to assets bounds' | translate"
              [tooltip]="'Fit to assets bounds' | translate"
              placement="top"
              container="body"
              (click)="fitToBounds()"
            >
              <i
                class="icon-14"
                c8yIcon="waypoint-map"
              ></i>
            </button>
          }
        </div>
      </div>

      <c8y-messages
        [helpMessage]="'Drag the map to the desired position' | translate"
      ></c8y-messages>
    </c8y-form-group>
  </fieldset>

  @if (isPositionedDevice()) {
    <fieldset class="c8y-fieldset">
      <legend>{{ 'Follow' | translate }}</legend>
      <div class="row tight-grid d-flex a-i-center">
        <div class="col-xs-12">
          <div class="form-group form-group-sm m-b-16">
            <label class="c8y-switch c8y-switch--inline">
              <input
                name="follow"
                type="checkbox"
                [(ngModel)]="formConfig.follow"
              />
              <span></span>
              <span
                class="text-12"
                translate
              >
                Follow selected
              </span>
            </label>
          </div>
        </div>
      </div>
    </fieldset>
  }
}

<ng-template #previewMap>
  <div style="width: 100%; height: 100%">
    @if (config.mapConfig) {
      <c8y-map
        [assets]="assets()"
        [config]="config.mapConfig"
        (onMove)="onPreviewMapMove($event)"
        (onZoomStart)="onPreviewZoomStart()"
        (onZoomEnd)="onPreviewZoomEnd($event)"
        (onInit)="previewMapInit($event)"
      ></c8y-map>
    }
  </div>
</ng-template>