<ng-container *transloco="let t; prefix: 'manage-media-issues'">
  <p>{{t('description-part-1')}} <a rel="noopener noreferrer" target="_blank" [href]="WikiLink.MediaIssues">{{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>

  @let filteredRows = data | filter: filterList;
  <app-responsive-table [rows]="filteredRows" [trackByFn]="trackBy">
    <ng-template #tableTemplate>
      <ngx-datatable
        class="bootstrap"
        [rows]="filteredRows"
        [columnMode]="'flex'"
        rowHeight="auto"
        [footerHeight]="50"
        [limit]="15"
      >

        <ngx-datatable-column prop="filePath" [sortable]="true" [draggable]="false" [resizeable]="false" [flexGrow]="3">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{t('file-header')}}
          </ng-template>
          <ng-template let-item="row" ngx-datatable-cell-template>
            {{item.filePath}}
          </ng-template>
        </ngx-datatable-column>


        <ngx-datatable-column prop="comment" [sortable]="true" [draggable]="false" [resizeable]="false" [flexGrow]="1">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{t('comment-header')}}
          </ng-template>
          <ng-template let-item="row" ngx-datatable-cell-template>
            {{item.comment}}
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column prop="createdUtc" [sortable]="true" [draggable]="false" [resizeable]="false" [flexGrow]="1">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{t('created-header')}}
          </ng-template>
          <ng-template let-item="row" ngx-datatable-cell-template>
            {{item.createdUtc | utcToLocalTime | defaultDate}}
          </ng-template>
        </ngx-datatable-column>
      </ngx-datatable>
    </ng-template>

    <ng-template #cardTemplate let-item let-idx="index">
      <div class="card mb-3">
        <div class="card-body">
          <h6 class="card-title mb-3 text-break">{{item.filePath}}</h6>

          <div class="row g-2">
            <div class="col-12">
              <div class="text-muted small">{{t('comment-header')}}</div>
              <div>{{item.comment}}</div>
            </div>

            <div class="col-12">
              <div class="text-muted small">{{t('created-header')}}</div>
              <div>{{item.createdUtc | utcToLocalTime | defaultDate}}</div>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
  </app-responsive-table>
</ng-container>
