@for (dataset of datasets(); track dataset; let index = $index) {
  <section
    [class]="hoveredDatasetIndex() === index ? 'is-hovered' : ''"
    (mouseenter)="triggerDatasetHover.emit(index)"
    (mouseleave)="triggerDatasetHover.emit(-1)"
  >
    <div
      [style]="{
        'border-color': dataset.borderColor,
        'background-color': dataset.backgroundColor,
      }"
    ></div>
    <label [style.color]="dataset.borderColor">
      {{ dataset.label | translate }}
    </label>
  </section>
}

<span>{{ 'common.legend' | translate }}</span>