<c8y-action-bar-item placement="right">
  <button
    class="btn btn-link c8y-realtime"
    title="{{ 'Toggle realtime' | translate }}"
    type="button"
    (click)="toggleRealtime()"
  >
    <span
      class="c8y-pulse"
      [ngClass]="{ active: config.realtime, inactive: !config.realtime }"
    ></span>
    <span translate>Realtime</span>
  </button>
</c8y-action-bar-item>
<c8y-action-bar-item placement="right">
  <button
    class="btn btn-clean"
    title="{{ 'Center`verb`' | translate }}"
    (click)="centerMap()"
  >
    <i [c8yIcon]="'target1'"></i>
    <span translate>Center`verb`</span>
  </button>
</c8y-action-bar-item>

<div class="card card--grid content-fullpage d-grid grid__col--8-4--md">
  <div
    class="bg-white p-relative"
    style="min-height: 30vh"
  >
    <c8y-map
      [assets]="[position]"
      [config]="config"
      (onRealtimeUpdate)="positionChanged($event)"
    ></c8y-map>
  </div>

  <form
    class="d-flex d-col bg-inherit content-fullpage bg-gray-white"
    #positionForm="ngForm"
    (ngSubmit)="save()"
  >
    <div class="card-header large-padding separator sticky-top">
      <span
        class="card-title"
        translate
      >
        Device location
      </span>
    </div>
    <div class="inner-scroll">
      <div
        class="m-16"
        *ngIf="!isEdit"
      >
        <div class="p-b-40">
          <div
            class="text-bold"
            translate
          >
            Latitude (°)
          </div>
          {{ position.c8y_Position.lat }}
        </div>
        <div class="p-b-40">
          <div
            class="text-bold"
            translate
          >
            Longitude (°)
          </div>
          {{ position.c8y_Position.lng }}
        </div>
        <div class="p-b-40">
          <div
            class="text-bold"
            translate
          >
            Altitude (m)
          </div>
          {{ position.c8y_Position.alt }}
        </div>
      </div>
      <div
        class="m-16"
        *ngIf="isEdit"
      >
        <c8y-form-group>
          <label
            for="lat"
            translate
          >
            Latitude (°)
          </label>

          <input
            class="form-control"
            [title]="'Latitude (°)' | translate"
            id="lat"
            name="lat"
            type="number"
            required
            min="-90"
            max="90"
            (blur)="positionForm.valid && updateMarkerPosition()"
            [(ngModel)]="position.c8y_Position.lat"
          />
          <c8y-messages>
            <c8y-message
              name="min"
              [text]="'The minimum latitude value is -90°.' | translate"
            ></c8y-message>
            <c8y-message
              name="max"
              [text]="'The maximum latitude value is 90°.' | translate"
            ></c8y-message>
          </c8y-messages>
        </c8y-form-group>
        <c8y-form-group>
          <label
            for="lat"
            translate
          >
            Longitude (°)
          </label>

          <input
            class="form-control"
            [title]="'Longitude (°)' | translate"
            id="lng"
            name="lng"
            type="number"
            required
            min="-180"
            max="180"
            (blur)="positionForm.valid && updateMarkerPosition()"
            [(ngModel)]="position.c8y_Position.lng"
          />
          <c8y-messages>
            <c8y-message
              name="min"
              [text]="'The minimum longitude value is -180°.' | translate"
            ></c8y-message>
            <c8y-message
              name="max"
              [text]="'The maximum longitude value is 180°.' | translate"
            ></c8y-message>
          </c8y-messages>
        </c8y-form-group>
        <c8y-form-group>
          <label
            for="alt"
            translate
          >
            Altitude (m)
          </label>

          <input
            class="form-control"
            [title]="'Altitude (m)' | translate"
            id="alt"
            name="alt"
            type="number"
            [(ngModel)]="position.c8y_Position.alt"
          />
        </c8y-form-group>
      </div>

      <form
        class="card-block bg-level-1"
        #addressSearch="ngForm"
        novalidate
        (submit)="searchAddress(addressSearchTerm)"
        *ngIf="isEdit && !hideAddressSearchFeature"
      >
        <div class="form-group">
          <label
            for="searchAddress"
            translate
          >
            Find lat/long by address
          </label>
          <div class="input-group input-group-search">
            <input
              class="form-control"
              id="searchAddress"
              name="addressSearchTerm"
              type="text"
              [placeholder]="'e.g. Speditionstraße 13, Düsseldorf`LOCALIZE`' | translate"
              [(ngModel)]="addressSearchTerm"
            />
            <span class="input-group-btn">
              <button
                class="btn btn-dot"
                [title]="'Search' | translate"
                type="submit"
              >
                <i
                  class="dlt-c8y-icon-search"
                  c8y-icon="search"
                ></i>
              </button>
            </span>
          </div>
        </div>
      </form>
    </div>
    <div class="card-footer separator">
      <button
        class="btn btn-default"
        [title]="'Edit location' | translate"
        type="button"
        *ngIf="canEdit && !isEdit"
        (click)="edit()"
        translate
      >
        Edit location
      </button>
      <button
        class="btn btn-default"
        [title]="'Cancel' | translate"
        type="button"
        (click)="cancel()"
        *ngIf="isEdit"
        translate
      >
        Cancel
      </button>
      <button
        class="btn btn-primary"
        [title]="'Save' | translate"
        type="submit"
        *ngIf="isEdit"
        translate
        [disabled]="!positionForm.valid"
      >
        Save
      </button>
    </div>
  </form>
</div>