<ng-container *transloco="let t; read: 'reading-activity'">
  <ng-container>
    <div class="dashboard-card-content">
      <div class="row g-0 mb-2 align-items-center">
        <div class="col-4">
          <h4>{{t('title')}}</h4>
        </div>
        <div class="col-8">
          <form [formGroup]="formGroup" class="d-inline-flex float-end">
            <div class="d-flex me-1" *ngIf="isAdmin && !individualUserMode">
              <label for="time-select-read-by-day" class="form-check-label"></label>
              <select id="time-select-read-by-day" class="form-select" formControlName="users"
                      [class.is-invalid]="formGroup.get('users')?.invalid && formGroup.get('users')?.touched">
                <option [value]="0">All Users</option>
                <option *ngFor="let item of users$ | async" [value]="item.id">{{item.username}}</option>
              </select>
            </div>
            <div class="d-flex">
              <label for="time-select-top-reads" class="form-check-label">
                <span class="visually-hidden">{{t('time-frame-label')}}</span>
              </label>
              <select id="time-select-top-reads" class="form-select" formControlName="days"
                      [class.is-invalid]="formGroup.get('days')?.invalid && formGroup.get('days')?.touched">
                <option *ngFor="let item of timePeriods" [value]="item.value">{{t(item.title)}}</option>
              </select>
            </div>
          </form>
        </div>
      </div>
      <div class="row g-0">
        <ng-container *ngIf="data$ | async as data">
          <ngx-charts-line-chart
            *ngIf="data.length > 0; else noData"
            class="dark"
            [legend]="true"
            [legendTitle]="t('legend-label')"
            [showXAxisLabel]="true"
            [showYAxisLabel]="true"
            [xAxis]="true"
            [yAxis]="true"
            [showGridLines]="false"
            [showRefLines]="true"
            [roundDomains]="true"
            [autoScale]="true"
            [xAxisLabel]="t('x-axis-label')"
            [yAxisLabel]="t('y-axis-label')"
            [timeline]="false"
            [results]="data"
          >
          </ngx-charts-line-chart>
        </ng-container>
      </div>
      <ng-template #noData>
        {{t('no-data')}}
      </ng-template>
    </div>
  </ng-container>
</ng-container>
