<div #layerValues class="layer-values">
   <div class="cross"  *ngIf="enabled$ | async">
       <div class="pointer"></div>
       <div class="values-container border border-dark rounded p-2" *ngIf="(layerValues$ | async ) as layers">
           <div class="lonlat pb-2 "><span class="font-weight-bold">{{lonlat$}}</span><i class="ms-2 fal fa-copy" (click)="copyToClipboard()"></i> </div>
           <ul class="value-list p-0 mb-0" *ngIf="layers.length>0 ;else no_data">
               <li class="border-top pt-1 pb-1 value" *ngFor="let layerValue of layers">
                   <div>{{layerValue.layerName}}</div>
                   <div>{{layerValue.date|date}}</div>
                   <div><span *ngIf="layerValue.quantity"><span class="me-1">{{layerValue.quantity}}</span> </span><span class="me-1 font-weight-bold">{{getScaledValue(layerValue)}}</span><span>{{layerValue.unit}}</span></div>
               </li>
           </ul>
           <ng-template #no_data>
               <div i18n class="border-top pt-1 pb-1">No data at location</div>
           </ng-template>
       </div>
   </div>
</div>
