<ng-container *transloco="let t; read: 'publication-status-stats'">
  <div class="dashboard-card-content">

    <div class="row g-0 mb-2">
      <div class="col-8">
        <h4><span>{{t('title')}}</span>
        </h4>
      </div>
      <div class="col-4">
        <form>
          <div class="form-check form-switch mt-2">
            <input id="pub-status-viz" type="checkbox" class="form-check-input" [formControl]="formControl" role="switch">
            <label for="pub-status-viz" class="form-check-label">{{formControl.value ? t('visualisation-label') : t('data-table-label') }}</label>
          </div>
        </form>
      </div>
    </div>


    <ng-container *ngIf="publicationStatues$ | async as statuses">
      <ng-container *ngIf="formControl.value; else tableLayout">
        <ngx-charts-advanced-pie-chart
          [results]="statuses"
        >
        </ngx-charts-advanced-pie-chart>
      </ng-container>
      <ng-template #tableLayout>
        <table class="table table-striped table-hover table-striped table-sm scrollable">
          <thead>
          <tr>
            <th scope="col" sortable="name" (sort)="onSort($event)">
              {{t('year-header')}}
            </th>
            <th scope="col" sortable="value" (sort)="onSort($event)">
              {{t('count-header')}}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of statuses; let idx = index;">
            <td id="adhoctask--{{idx}}">
              {{item.name}}
            </td>
            <td>
              {{item.value | number:'1.0-0'}}
            </td>
          </tr>
          </tbody>
        </table>
      </ng-template>
    </ng-container>
  </div>




</ng-container>
