<ng-container *transloco="let t; read: 'manage-scrobble-errors'">
  <p>{{t('description')}}</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-errors')}}</button>
        </div>
      </div>
    </div>
  </form>
  <table class="table table-striped table-hover table-sm table-hover">
    <thead #header>
    <tr>
      <th scope="col" sortable="seriesId" (sort)="onSort($event)">
        {{t('series-header')}}
      </th>
      <th scope="col" sortable="created" (sort)="onSort($event)">
        {{t('created-header')}}
      </th>
      <th scope="col" sortable="comment" (sort)="onSort($event)">
        {{t('comment-header')}}
      </th>
      <th scope="col">
        {{t('edit-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>
          <a href="library/{{item.libraryId}}/series/{{item.seriesId}}" target="_blank">{{item.details}}</a>
        </td>
        <td>
          {{item.createdUtc  | translocoDate: {dateStyle: 'short', timeStyle: 'medium' } | defaultValue }}
        </td>
        <td>
          {{item.comment}}
        </td>
        <td>
          <button class="btn btn-icon primary-icon" (click)="editSeries(item.seriesId)">
            <i class="fa fa-pen me-1" aria-hidden="true"></i>
            <span class="visually-hidden">{{t('edit-item-alt', {seriesName: item.details})}}</span>
          </button>
        </td>
      </tr>
    </ng-container>
    </tbody>
  </table>

</ng-container>
