<fieldset
  class="c8y-fieldset"
  *ngIf="formConfig"
>
  <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">
        <button
          class="btn btn-default"
          [attr.aria-label]="'Use selected asset location' | translate"
          [tooltip]="'Use selected asset location' | translate"
          placement="top"
          container="body"
          *ngIf="canAutoCenter; else fitToBoundsButton"
          (click)="centerToAsset()"
        >
          <i
            class="icon-14"
            c8yIcon="location"
          ></i>
        </button>
      </div>
    </div>

    <ng-template #fitToBoundsButton>
      <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>
    </ng-template>
    <c8y-messages [helpMessage]="'Drag the map to the desired position' | translate"></c8y-messages>
  </c8y-form-group>
</fieldset>

<fieldset
  class="c8y-fieldset"
  *ngIf="formConfig"
>
  <legend>{{ 'Auto refresh' | translate }}</legend>
  <div class="row tight-grid d-flex a-i-center">
    <div class="col-xs-6">
      <c8y-form-group class="m-b-16 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-6">
      <div class="form-group form-group-sm m-b-16">
        <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>
</fieldset>

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