<ng-container *transloco="let t; prefix: 'reading-activity'">
  <div class="card stats-card p-4">
    <div class="row g-0 mb-2 align-items-center">
      <div class="col-4">
        <h3 class="stats-title">{{t('title')}}</h3>
      </div>
      <div class="col-8">
        <form [formGroup]="formGroup" class="d-inline-flex float-end">
          @if (isAdmin() && !individualUserMode()) {
            <div class="d-flex">
              <label for="user-select-read-by-day" class="visually-hidden">{{t('select-user-alt')}}</label>
              <select id="user-select-read-by-day" class="form-select" formControlName="users"
                      [attr.aria-busy]="isLoading()">
                <option [value]="0">{{t('all-users')}}</option>
                @for (item of users$ | async; track item.id) {
                  <option [value]="item.id">{{item.username}}</option>
                }
              </select>
            </div>
          }
        </form>
      </div>
    </div>

    <div class="row g-0">
      @if (isLoading()) {
        <div class="d-flex justify-content-center p-4" role="status" aria-label="Loading">
          <span class="spinner-border"></span>
        </div>
      } @else if (chartData(); as chart) {
        @if (chart.hasData) {
          <app-line-chart
            [axisLabels]="chart.axisLabels"
            [data]="chart.data"
            [legendLabels]="chart.legendLabels"
            [showLegend]="true"
          />
        } @else {
          <app-stats-no-data [message]="t('no-data')" />
        }
      }
    </div>
  </div>
</ng-container>
