<div class="map-marker">
  <a
    class="text-truncate text-14 text-medium p-0 m-b-8 deviceLink"
    [title]="context?.name"
    *ngIf="isDevice"
    [routerLink]="['/device/', context?.id]"
  >
    {{ context?.name }}
  </a>
  <div
    class="m-b-8"
    ng-if="lastUpdated"
  >
    <p class="m-0">{{ 'Position:' | translate }}</p>
    <div class="text-muted">
      <p class="m-b-0">{{ context?.c8y_Position?.lat }},</p>
      <p class="m-t-0">{{ context?.c8y_Position?.lng }}</p>
    </div>
    @if (!!context?.c8y_Position?.alt || context?.c8y_Position?.alt === 0) {
      <p class="m-0">{{ 'Altitude:' | translate }}</p>
      <div class="text-muted">
        <p
          class="m-b-0"
          [translate]="'{{alt}} m`meters, altitude`'"
          [translateParams]="{ alt: context?.c8y_Position?.alt }"
        ></p>
      </div>
    }
    @if (!!date) {
      <p class="m-0 p-t-4">{{ 'Date and time:' | translate }}</p>
      <span class="text-muted">{{ date | c8yDate }}</span>
    }
  </div>

  @if (isDevice) {
    @if (showTrackingLink) {
      <span>
        Go to
        <a [routerLink]="['/device', context?.id, 'tracking']">Tracking</a>
      </span>
    } @else {
      <div class="d-flex a-i-center">
        <label
          class="c8y-switch"
          for="switch"
        >
          <input
            id="switch"
            type="checkbox"
            [checked]="trackingService.trackVisible"
            (change)="trackingService.toggleTrack()"
          />
          <span></span>
        </label>
        <div class="description p-b-0">
          {{ 'Show track' | translate }}
        </div>
      </div>
    }
  }
</div>