@if (showLegend()) {
  <table class="container">
    <tr>
      <td colspan="3">
        <div class="title">
          @if (showTitle) {
            <h4>{{layer.name}}</h4>
          }
          @if (layer.unit) {
            <b>({{layer.unit}})</b>
          }
        </div>
      </td>
      <td>
        <a i18n-title title="more info"><i class="fal fa-info-circle text-primary" (click)="hideHistogramDetails = !hideHistogramDetails"></i></a>
      </td>
      <td colspan="2">
        @if (histogramenabled) {
          <div class="title">
            <h4>{{histogram}}</h4>
            @if (histogramunit) {
              <b>({{histogramunit}})</b>
            }
          </div>
        }
      </td>
    </tr>
    @for (entry of layer.renderer.colorMap.entries; track $index; let i = $index) {
      <tr>
        <td class="legend-items"><span [style.background-color]="getAlphaHex(entry.color)" [style.border-color]="getHex(entry.color)"class="color"></span></td>
        <td class="legend-items-text">@if (!entry.label) {
          <span>{{getScaledValue(entry.value,layer.scale) | number:'1.0-2'}} {{legendunit}}</span>
          }@if (entry.label) {
          <span>{{entry.label}}</span>
        }</td>
        <td class="histogram-items">
          @if (showHistogram()) {
            <div>
              <span class="bar" [style.background-color]="getHex(entry.color)" [style.width]="getPart(layer.renderer, i)">
              </span>
              @if (getPercentage(layer.renderer,i); as percentage) {
                <span class="bar-label">{{percentage | number:'1.0-2'}} %</span>
              }
            </div>
          }
        </td>
      </tr>
    }
    @if (showHistogram()) {
      <tr>
        <td colspan="4" class="pb-1 pt-1">
          <div class="info" [ngbCollapse]="hideHistogramDetails">
            @if (bandContainsStatistics()) {
              <fm-map-statistics-details [statistics]="layer.renderer.band.statistics" [scale]="layer.scale"></fm-map-statistics-details>
            } @else {
              <fm-map-histogram-details [histogram]="layer.renderer.band.histogram" [scale]="layer.scale"></fm-map-histogram-details>
            }
          </div>
        </td>
      </tr>
    }
  </table>
}