<ng-container *transloco="let t; prefix: 'statsLibrary.metadataScore'">
<div class="metadata-score-container">
  <div class="chart-header">
    <div class="chart-title">
      <h3>
        <i class="pi pi-check-circle score-title-icon"></i>
        {{ t('title') }}
      </h3>
      <p class="chart-description">{{ t('description') }}</p>
    </div>
  </div>

  @if (totalBooks > 0) {
    <div class="chart-wrapper">
      <canvas baseChart
              [data]="(chartData$ | async) ?? {labels: [], datasets: []}"
              [options]="chartOptions"
              [type]="chartType">
      </canvas>
    </div>
  }

  @if (totalBooks === 0) {
    <div class="no-data-message">
      <i class="pi pi-info-circle"></i>
      <p>{{ t('noData') }}</p>
    </div>
  }
</div>
</ng-container>
