<div #layerValues class="layer-values">
  @if (enabled$ | async) {
    <div class="cross" >
      <div class="pointer"></div>
      @if ((layerValues$ | async ); as layers) {
        <div class="values-container border border-dark rounded p-2">
          <div class="lonlat pb-2 "><span class="font-weight-bold">{{lonlat$}}</span><i class="ms-2 fal fa-copy" (click)="copyToClipboard()"></i> </div>
          @if (layers.length>0 ) {
            <ul class="value-list p-0 mb-0">
              @for (layerValue of layers; track $index) {
                <li class="border-top pt-1 pb-1 value">
                  <div>{{layerValue.layerName}}</div>
                  <div>{{layerValue.date|date}}</div>
                  <div>@if (layerValue.quantity) {
                    <span><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>
            } @else {
              <div i18n class="border-top pt-1 pb-1">No data at location</div>
            }
          </div>
        }
      </div>
    }
  </div>
