@if (document?.records) {
  <div>{{shortRecords | json}}</div>
}
<form [formGroup]="form" novalidate>
  <mat-card>
    <mat-card-header style="display: block;">
      <mat-card-title style="display:flex">
        Layer details
        <span style="flex: 1;"></span>
        <button mat-button (click)="export()">Export</button>
        <button mat-button *ngIf="document && document.type === LayerType.Administration"
        [routerLink]="['/app/layers/Edit/', document.id, 'duplicate']">Duplicate</button>
        <button mat-button *ngIf="document && document.type === LayerType.Administration"
        [routerLink]="['/app/layers/Edit/', document.id]">Edit</button>
        <button mat-button *ngIf="document && document.type === LayerType.Processed"
          (click)="processLayer()">Process layer</button>
      </mat-card-title>
      <mat-card-subtitle>&nbsp;</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <div class="row">
        <div class="col">
          <mat-form-field class="full-width" appearance="outline">
            <mat-label>Name</mat-label>
            <input matInput formControlName="name">
          </mat-form-field>
        </div>
        <div class="col">
          <mat-form-field class="full-width" appearance="outline">
            <mat-label>Source</mat-label>
            <input matInput formControlName="source">
          </mat-form-field>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <mat-form-field class="full-width" appearance="outline" *ngIf="document">
            <mat-label>Created</mat-label>
            <input matInput disabled [value]="document.created">
          </mat-form-field>
        </div>
        <div class="col">
          <mat-form-field class="full-width" appearance="outline" *ngIf="document">
            <mat-label>Modified</mat-label>
            <input matInput disabled [value]="document.modified">
          </mat-form-field>
        </div>
      </div>

      <table mat-table [dataSource]="dataSource" matSort matSortActive="code" matSortDisableClear
        matSortDirection="desc">
        <ng-container matColumnDef="code">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Code</th>
          <td mat-cell *matCellDef="let row"> {{row.code}} </td>
          <td mat-footer-cell *matFooterCellDef><b>Value1 sum</b></td>
        </ng-container>

        <ng-container matColumnDef="value1">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value1</th>
          <td mat-cell *matCellDef="let row"> {{row.value1 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef><b>{{valueSum | number:'1.2-2'}}</b></td>
        </ng-container>

        <ng-container matColumnDef="value2">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value2</th>
          <td mat-cell *matCellDef="let row"> {{row.value2 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value3">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value3</th>
          <td mat-cell *matCellDef="let row"> {{row.value3 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value4">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value4</th>
          <td mat-cell *matCellDef="let row"> {{row.value4 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value5">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value5</th>
          <td mat-cell *matCellDef="let row"> {{row.value5 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value6">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value6</th>
          <td mat-cell *matCellDef="let row"> {{row.value6 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value7">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value7</th>
          <td mat-cell *matCellDef="let row"> {{row.value7 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value8">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value8</th>
          <td mat-cell *matCellDef="let row"> {{row.value8 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value9">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value9</th>
          <td mat-cell *matCellDef="let row"> {{row.value9 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value10">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value10</th>
          <td mat-cell *matCellDef="let row"> {{row.value10 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value11">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value11</th>
          <td mat-cell *matCellDef="let row"> {{row.value11 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value12">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value12</th>
          <td mat-cell *matCellDef="let row"> {{row.value12 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value13">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value13</th>
          <td mat-cell *matCellDef="let row"> {{row.value13 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value14">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value14</th>
          <td mat-cell *matCellDef="let row"> {{row.value14 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value15">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value15</th>
          <td mat-cell *matCellDef="let row"> {{row.value15 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value16">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value16</th>
          <td mat-cell *matCellDef="let row"> {{row.value16 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value17">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value17</th>
          <td mat-cell *matCellDef="let row"> {{row.value17 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value18">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value18</th>
          <td mat-cell *matCellDef="let row"> {{row.value18 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value19">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value19</th>
          <td mat-cell *matCellDef="let row"> {{row.value19 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value20">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value20</th>
          <td mat-cell *matCellDef="let row"> {{row.value20 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value21">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value21</th>
          <td mat-cell *matCellDef="let row"> {{row.value21 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value22">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value22</th>
          <td mat-cell *matCellDef="let row"> {{row.value22 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value23">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value23</th>
          <td mat-cell *matCellDef="let row"> {{row.value23 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value24">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value24</th>
          <td mat-cell *matCellDef="let row"> {{row.value24 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value25">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value25</th>
          <td mat-cell *matCellDef="let row"> {{row.value25 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value26">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value26</th>
          <td mat-cell *matCellDef="let row"> {{row.value26 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value27">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value27</th>
          <td mat-cell *matCellDef="let row"> {{row.value27 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value28">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value28</th>
          <td mat-cell *matCellDef="let row"> {{row.value28 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value29">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value29</th>
          <td mat-cell *matCellDef="let row"> {{row.value29 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value30">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value30</th>
          <td mat-cell *matCellDef="let row"> {{row.value30 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value31">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value31</th>
          <td mat-cell *matCellDef="let row"> {{row.value31 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="value32">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value32</th>
          <td mat-cell *matCellDef="let row"> {{row.value32 | number:'1.2-2'}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="desc1">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Description1</th>
          <td mat-cell *matCellDef="let row"> {{row.desc1}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="desc2">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Description2</th>
          <td mat-cell *matCellDef="let row"> {{row.desc2}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="desc3">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Description3</th>
          <td mat-cell *matCellDef="let row"> {{row.desc3}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="desc4">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Description4</th>
          <td mat-cell *matCellDef="let row"> {{row.desc4}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <ng-container matColumnDef="desc5">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Description5</th>
          <td mat-cell *matCellDef="let row"> {{row.desc5}} </td>
          <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns, sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
      </table>
    </mat-card-content>
  </mat-card>
</form>