<div
  class="row p-t-16"
  *ngIf="formConfig"
>
  <div class="col-xs-2">
    <c8y-form-group class="m-b-0 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-10">
    <div class="row tight-grid separator-bottom">
      <div class="col-xs-4">
        <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="2"
              max="18"
              step="1"
            />
          </c8y-range>
        </div>
      </div>
      <div class="col-xs-8">
        <c8y-form-group class="form-group-sm m-b-8">
          <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"
              *ngIf="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>
            </div>
          </div>
          <c8y-messages
            [helpMessage]="'Drag the map to the desired position' | translate"
          ></c8y-messages>
        </c8y-form-group>
      </div>
    </div>

    <div class="row tight-grid p-t-8 d-flex a-i-center">
      <div class="col-xs-6">
        <c8y-form-group class="m-b-0 form-group-sm">
          <div class="c8y-select-wrapper">
            <select
              class="form-control"
              title="{{ 'Refresh options`options for refreshing a view`' | translate }}"
              id="selectExample"
              name="refreshSelection"
              [(ngModel)]="refreshOption"
              (change)="updateRefreshOption()"
            >
              <option
                [title]="'Only refreshing on interaction' | translate"
                value="none"
                translate
              >
                No automatic refresh
              </option>
              <option
                [title]="'Refreshing after the given interval and on interaction' | translate"
                value="interval"
                *ngIf="!isPositionedDevice"
                translate
              >
                Use refresh interval
              </option>
              <option
                [title]="
                  'Refreshing after the given interval and on interaction, synchronized globally'
                    | translate
                "
                value="dashboard-auto-refresh-context"
                *ngIf="!isPositionedDevice"
                translate
              >
                Use global refresh interval
              </option>
              <option
                [title]="'Live updating on each position change' | translate"
                value="realtime"
                *ngIf="isPositionedDevice"
                translate
              >
                Realtime
              </option>
              <option
                [title]="'Bind widget to dashboard realtime context' | translate"
                value="dashboard-realtime-context"
                *ngIf="isPositionedDevice"
                translate
              >
                Dashboard realtime context
              </option>
            </select>
          </div>
        </c8y-form-group>
      </div>
      <div class="col-xs-8">
        <div class="form-group form-group-sm m-b-0">
          <c8y-range
            class="label-bottom"
            name="refreshInterval"
            #intervalRange
            *ngIf="refreshOption === 'interval'"
            [(ngModel)]="formConfig.refreshInterval"
          >
            <ng-template #c8yRangeValue>
              <div>
                <span
                  [translateParams]="{ intervalInSeconds: intervalRange.value * 0.001 }"
                  translate
                  ngNonBindable
                >
                  {{ intervalInSeconds }} s
                </span>
              </div>
            </ng-template>
            <input
              type="range"
              min="5000"
              max="100000"
              step="1000"
            />
          </c8y-range>
        </div>
        <label
          class="c8y-switch c8y-switch--inline"
          *ngIf="refreshOption === 'realtime' || refreshOption === 'dashboard-realtime-context'"
        >
          <input
            name="follow"
            type="checkbox"
            [(ngModel)]="formConfig.follow"
          />
          <span></span>
          <span
            class="text-12"
            translate
          >
            Follow selected
          </span>
        </label>
      </div>
    </div>
  </div>
</div>

<div
  class="p-t-16 p-b-16"
  style="width: 100%; height: 240px"
>
  <c8y-map
    *ngIf="config.mapConfig"
    [assets]="assets"
    [config]="config.mapConfig"
    (onMove)="onPreviewMapMove($event)"
    (onZoomStart)="onPreviewZoomStart()"
    (onZoomEnd)="onPreviewZoomEnd($event)"
    (onInit)="previewMapInit($event)"
  ></c8y-map>
</div>