<ng-container *transloco="let t; read: 'manage-alerts'">
  <p>{{t('description-part-1')}} <a rel="noopener noreferrer" target="_blank" href="https://wiki.kavitareader.com/en/guides/managing-your-files/scanner#media-errors">{{t('description-part-2')}}</a></p>

  <form [formGroup]="formGroup">
    <div class="row g-0 mb-3">
      <div class="col-md-12">
        <label for="filter" class="visually-hidden">{{t('filter-label')}}</label>
        <div class="input-group">
          <input id="filter" type="text" class="form-control" [placeholder]="t('filter-label')" formControlName="filter" />
          <button class="btn btn-primary" type="button" (click)="clear()">{{t('clear-alerts')}}</button>
        </div>
      </div>
    </div>
  </form>
  <table class="table table-striped table-hover table-sm table-hover">
    <thead #header>
    <tr>
      <th scope="col" sortable="extension" (sort)="onSort($event)">
        {{t('extension-header')}}
      </th>
      <th scope="col" sortable="filePath" (sort)="onSort($event)">
        {{t('file-header')}}
      </th>
      <th scope="col" sortable="comment" (sort)="onSort($event)">
        {{t('comment-header')}}
      </th>
      <th scope="col" sortable="details" (sort)="onSort($event)">
        {{t('details-header')}}
      </th>
    </tr>
    </thead>
    <tbody #container>
    <tr *ngIf="isLoading"><td colspan="4" style="text-align: center;"><app-loading [loading]="isLoading"></app-loading></td></tr>
    <ng-container *ngIf="data | filter: filterList as filteredData">
      <tr *ngIf="filteredData.length === 0 && !isLoading"><td colspan="4" style="text-align: center;">No issues</td></tr>
      <tr *ngFor="let item of filteredData; index as i">
        <td>
          {{item.extension}}
        </td>
        <td>
          {{item.filePath}}
        </td>
        <td>
          {{item.comment}}
        </td>
        <td>
          {{item.details}}
        </td>
      </tr>
    </ng-container>
    </tbody>
  </table>

</ng-container>
