<ng-container *transloco="let t; prefix: 'statsLibrary.authorUniverse'">
<div class="author-universe-container">
  <div class="chart-header">
    <div class="chart-title">
      <h3>
        <i class="pi pi-globe author-title-icon"></i>
        {{ t('title') }}
      </h3>
      <p class="chart-description">{{ t('description') }}</p>
    </div>
    @if (totalAuthors > 0) {
      <div class="author-count-badge">
        {{ t('authorsBadge', { count: totalAuthors }) }}
      </div>
    }
  </div>

  @if (totalAuthors > 0) {
    <div class="chart-legend-info">
      <span class="legend-note">
        <i class="pi pi-info-circle"></i>
        {{ t('legendNote') }}
      </span>
    </div>

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

    @if (insights.length > 0) {
      <div class="insights-section">
        <div class="insights-grid">
          @for (insight of insights; track insight) {
            <div class="insight-card">
              <i class="pi pi-star-fill insight-icon"></i>
              <span class="insight-text">{{ insight }}</span>
            </div>
          }
        </div>
      </div>
    }
  }

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