Untitled

<st-base-card [showSideOpts]="true" [showPicture]="true" [imageSrc]="device.person?.imagePath || defaultImage"
  class="popup-detail">
  <ng-container side-options>
    <button (click)="onSendAlarm('call')">
      <img src="assets/icon/pop-voice.svg">
    </button>
    <button (click)="onSendAlarm('sos')">
      <img src="assets/icon/popup-alert.svg">
    </button>
    <button (click)="onSendAlarm('vibration')">
      <img src="assets/icon/popup-vibrator.svg">
    </button>
  </ng-container>
  <ng-container content>
    <div class="header-pop">
      <ng-container *ngIf=" device.attribute?.battery >=  3 '; else elseBlock2;">
        <h1 class="lowBattery">
          <ng-container>Apagado</ng-container>
          <span> / {{ device.lastUpdate | dateAgo }}</span>
        </h1>
      </ng-container>
      <ng-template #elseBlock2>
        <h1 [ngSwitch]="device.status" [class]="device.status">
          <!-- <ng-container *ngSwitchCase="'offline'">Fuera de línea</ng-container> -->
          <ng-container *ngSwitchCase="'online'">En línea</ng-container>
          <ng-container *ngSwitchCase="'unknown'">Desconocido</ng-container>
          <ng-container *ngSwitchCase="'maintenance'">Mantenimiento</ng-container>
          <span> / {{ device.lastUpdate | dateAgo }}</span>
        </h1>
      </ng-template>

      <button>
        <img src="assets/icon/popup-close.svg">
      </button>
    </div>

    <main class="info-pop">
      <div *ngIf="device.person; else elseBlock1;" class="person-name">
        <h2>{{device.person?.lastname}} {{device.person?.secondSurname}} {{device.person?.name}}</h2>
        <button title="Mostrar Sentencia" (click)="onJudgment()">
          <img src="assets/icon/not-note.svg" width="24" height="24">
        </button>
      </div>
      <ng-template #elseBlock1>
        <h2>Beneficiado no asociado</h2>
      </ng-template>
      <h3>ID: {{device.uniqueid}}</h3>
      <ng-container *ngIf="device.person; else elseBlock2;">
        <p>
          {{ latLng | reverseGeocoder | async }}
        </p>
      </ng-container>
      <ng-template #elseBlock2>
        <p>-</p>
      </ng-template>
      <figcaption>
        <img src="assets/icon/menu-gps.svg">
        <p> {{lat}} </p>
      </figcaption>
      <figcaption>
        <img src="assets/icon/menu-gps.svg">
        <p> {{lng}} </p>
      </figcaption>
    </main>

    <div class="extra-pop">

      <div class="extra-box">
        <figure>
          <img src="assets/icon/popup-time.svg">
        </figure>
        <figcaption>
          <p>Última actualización:</p>
          <strong>Fecha: {{device.lastUpdate?.toString() | dateFormatUTC: 'dd-MM-YYYY'}} </strong><br>
          <strong>Hora: {{device.lastUpdate?.toString() | dateFormatUTC: 'HH:mm:ss'}}</strong>
        </figcaption>
      </div>

      <div class="extra-box">
        <figure>
          <img src="assets/icon/popup-sim.svg">
        </figure>
        <figcaption>
          <p>Última lectura:</p>
          <strong>Fecha: {{device.lastReading?.toString() | dateFormatUTC: 'dd-MM-YYYY'}}</strong><br>
          <strong>Hora: {{device.lastReading?.toString() | dateFormatUTC: 'HH:mm:ss'}}</strong>
        </figcaption>
      </div>

      <div class="extra-box">
        <figure>
          <img src="assets/icon/popup-staelite.svg">
        </figure>
        <figcaption>
          <p>Satélite:</p>
          <strong>{{ device.attribute?.sat || '8' }}</strong>
        </figcaption>
      </div>

      <div class="extra-box">
        <figure>
          <img src="{{ device.attribute?.batteryLevel || device.attribute?.battery | batteryIcon }}">
        </figure>
        <figcaption>
          <p>Carga de la batería:</p>
          <strong>{{ device.attribute?.batteryLevel || device.attribute?.battery || '0' }}%</strong>
        </figcaption>
      </div>
    </div>
  </ng-container>
</st-base-card>