<ng-container *transloco="let t; read: 'file-breakdown-stats'">
  <div class="dashboard-card-content">
    <div class="row g-0 mb-2">
      <div class="col-8">
        <h4><span>{{t('format-title')}}</span>
          <i class="fa fa-info-circle ms-1" aria-hidden="true" placement="right" [ngbTooltip]="tooltip" role="button" tabindex="0"></i>
        </h4>
      </div>
      <div class="col-4">
        <form>
          <div class="form-check form-switch mt-2">
            <input id="pub-file-breakdown-viz" type="checkbox" class="form-check-input" [formControl]="formControl" role="switch">
            <label for="pub-file-breakdown-viz" class="form-check-label">{{formControl.value ? t('visualisation-label') : t('data-table-label') }}</label>
          </div>
        </form>
      </div>
    </div>

    <ng-template #tooltip>{{t('format-tooltip')}}</ng-template>


    <ng-container *ngIf="files$ | async as files">
      <ng-container *ngIf="formControl.value; else tableLayout">
        <ngx-charts-advanced-pie-chart [results]="vizData2$ | async"></ngx-charts-advanced-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="extension" (sort)="onSort($event)">
              {{t('extension-header')}}
            </th>
            <th scope="col" sortable="format" (sort)="onSort($event)">
              {{t('format-header')}}
            </th>
            <th scope="col" sortable="totalSize" (sort)="onSort($event)">
              {{t('total-size-header')}}
            </th>
            <th scope="col" sortable="totalFiles" (sort)="onSort($event)">
              {{t('total-files-header')}}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of files; let idx = index;">
            <td id="adhoctask--{{idx}}">
              {{item.extension || t('not-classified')}}
            </td>
            <td>
              {{item.format | mangaFormat}}
            </td>
            <td>
              {{item.totalSize | bytes}}
            </td>
            <td>
              {{item.totalFiles | number:'1.0-0'}}
            </td>
          </tr>
          </tbody>
          <tfoot>
          <tr>
            <td>{{t('total-file-size-title')}}</td>
            <td></td>
            <td></td>
            <td>{{((rawData$ | async)?.totalFileSize || 0) | bytes}}</td>
          </tr>
          </tfoot>
        </table>
      </ng-template>
    </ng-container>


  </div>



</ng-container>
