<ng-container *transloco="let t; read: 'manga-format-stats'">
  <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="manga-format-viz" type="checkbox" class="form-check-input" [formControl]="formControl" role="switch">
          <label for="manga-format-viz" class="form-check-label">{{formControl.value ? t('visualisation-label') : t('data-table-label') }}</label>
        </div>
      </form>
    </div>
  </div>

  <ng-container *ngIf="formats$ | async as formats">
    <ng-container *ngIf="formControl.value; else tableLayout">
      <ngx-charts-pie-chart
        [view]="view"
        [results]="formats"
        [legend]="showLegend"
        [legendPosition]="legendPosition"
        [labels]="showLabels"
      >
      </ngx-charts-pie-chart>
    </ng-container>
    <ng-template #tableLayout>
      <table class="table table-striped table-striped table-hover table-sm scrollable">
        <thead>
        <tr>
          <th scope="col" sortable="name" (sort)="onSort($event)">
            {{t('format-header')}}
          </th>
          <th scope="col" sortable="value" (sort)="onSort($event)">
            {{t('count-header')}}
          </th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of formats; 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>




</ng-container>
