<ng-container *transloco="let t; prefix: 'statsUser.peakHours'">
<div class="peak-hours-container">
  <div class="chart-header">
    <div class="chart-title">
      <h3>
        <i class="pi pi-clock peak-hours-icon"></i>
        {{ t('title') }}
        <i class="pi pi-question-circle chart-info-icon"
           [pTooltip]="t('tooltip')"
           tooltipPosition="bottom"
           tooltipStyleClass="chart-info-tooltip"
           [appendTo]="'body'"></i>
      </h3>
      <p class="chart-description">{{ t('description') }}</p>
    </div>
    <div class="filter-controls">
      <p-select
        [options]="yearOptions"
        [(ngModel)]="selectedYear"
        (onChange)="onFilterChange()"
        optionLabel="label"
        optionValue="value"
        [placeholder]="t('selectYear')"
        [style]="{'min-width': '100px'}">
      </p-select>
      <p-select
        [options]="monthOptions"
        [(ngModel)]="selectedMonth"
        (onChange)="onFilterChange()"
        optionLabel="label"
        optionValue="value"
        [placeholder]="t('selectMonth')"
        [style]="{'min-width': '130px'}">
      </p-select>
    </div>
  </div>
  <div class="chart-wrapper">
    <canvas baseChart
            [data]="(chartData$ | async) ?? {labels: [], datasets: []}"
            [options]="chartOptions"
            [type]="chartType">
    </canvas>
  </div>
</div>
</ng-container>
