<!-------------------------------------------------------------------------------
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 -------------------------------------------------------------------------------->

<table [dataSource]="appEntries" class="predecessors--table" mat-table>

  <caption hidden>{{ "shared.statementTable.caption" | translate}}</caption>

  <ng-container matColumnDef="select">
    <th *matHeaderCellDef
        class="predecessors--table--cell predecessors--table--cell---border predecessors--table--cell---bold"
        mat-header-cell scope="col"></th>
    <td *matCellDef="let statement" class="predecessors--table--cell predecessors--table--cell---border"
        mat-cell>
      <div class="predecessors--table--cell--checkbox">
        <input #inputElement (keydown.enter)="inputElement.click()"
               (ngModelChange)="$event ? select(statement.id) : deselect(statement.id)"
               [class.cursor-pointer]="!appDisabled"
               [disabled]="appDisabled"
               [ngModel]="statement?.isSelected"
               class="predecessors--table--cell--checkbox---size"
               type="checkbox">
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="id">
    <th *matHeaderCellDef
        class="predecessors--table--cell predecessors--table--cell---border predecessors--table--cell---bold predecessors--table--cell---center"
        mat-header-cell scope="col">{{"shared.statementTable.id" | translate}}</th>
    <td *matCellDef="let statement"
        class="predecessors--table--cell predecessors--table--cell---border predecessors--table--cell---center"
        mat-cell>{{statement?.id}}</td>
  </ng-container>

  <ng-container matColumnDef="title">
    <th *matHeaderCellDef
        class="predecessors--table--cell predecessors--table--cell---border predecessors--table--cell---bold"
        mat-header-cell scope="col">{{"shared.statementTable.title" | translate}}</th>
    <td *matCellDef="let statement" class="predecessors--table--cell predecessors--table--cell---border"
        mat-cell>{{statement?.title}}</td>
  </ng-container>

  <ng-container matColumnDef="type">
    <th *matHeaderCellDef
        class="predecessors--table--cell predecessors--table--cell---border predecessors--table--cell---bold"
        mat-header-cell scope="col">{{"shared.statementTable.statementType" | translate}}</th>
    <td *matCellDef="let statement" class="predecessors--table--cell predecessors--table--cell---border"
        mat-cell>{{ (appStatementTypeOptions | selected : statement?.typeId)?.label }}</td>
  </ng-container>

  <ng-container matColumnDef="date">
    <th *matHeaderCellDef
        class="predecessors--table--cell predecessors--table--cell---border predecessors--table--cell---bold"
        mat-header-cell scope="col">{{"shared.statementTable.receiptDate" | translate}}</th>
    <td *matCellDef="let statement" class="predecessors--table--cell predecessors--table--cell---border"
        mat-cell>{{statement?.receiptDate ? (statement.receiptDate | appMomentPipe).format(appTimeDisplayFormat) : ""}} </td>
  </ng-container>

  <ng-container matColumnDef="city">
    <th *matHeaderCellDef
        class="predecessors--table--cell predecessors--table--cell---border predecessors--table--cell---bold"
        mat-header-cell scope="col">{{"shared.statementTable.city" | translate}}</th>
    <td *matCellDef="let statement" class="predecessors--table--cell predecessors--table--cell---border"
        mat-cell>{{statement?.city}}</td>
  </ng-container>

  <ng-container matColumnDef="district">
    <th *matHeaderCellDef
        class="predecessors--table--cell predecessors--table--cell---border predecessors--table--cell---bold"
        mat-header-cell scope="col">{{"shared.statementTable.district" | translate}}</th>
    <td *matCellDef="let statement" class="predecessors--table--cell predecessors--table--cell---border"
        mat-cell>{{statement?.district}}</td>
  </ng-container>

  <ng-container matColumnDef="link">
    <th *matHeaderCellDef
        class="predecessors--table--cell predecessors--table--cell---border predecessors--table--cell---bold"
        mat-header-cell scope="col"></th>
    <td *matCellDef="let statement" class="predecessors--table--cell predecessors--table--cell---border"
        mat-cell>
      <a [queryParams]="{id: statement.id}"
         class="openk-button openk-button-rounded openk-info predecessors--table--cell--btn" routerLink="/details"
         target="_blank">
        <mat-icon>call_made</mat-icon>
      </a>
    </td>
  </ng-container>

  <tr *matHeaderRowDef="appColumnsToDisplay; sticky: true" class="predecessors--table--row" mat-header-row></tr>
  <tr *matRowDef="let myRowData; columns: appColumnsToDisplay"
      class="predecessors--table--row predecessors--table--row---alternating-color" mat-row></tr>
</table>