<div style="width: 90%; margin: auto; padding-top: 1%">
    <mat-form-field *ngIf="filterType !== FiltersFor.NONE">
        <mat-label>Filter</mat-label>
        <input [formControl]="filterQ" (keyup)="applyFilter()" matInput>
    </mat-form-field>
</div>

<div style="width: 90%; margin: auto; padding-bottom: 1%">
    <div *ngIf="addNewButton" style="float: right">
        <button mat-raised-button color="accent" (click)="addNewEvent()">Add new</button>
    </div>
    <div style="width: 100%">
        <app-filters [filtersFor]="filterType" [filtersForm]="filters"></app-filters>
    </div>
</div>

<div class="mat-elevation-z8" style="width: 90%; margin: auto;max-height: 60%;overflow-y: scroll">
    <mat-table [dataSource]="dataSource" matSort (matSortChange)="onChangeEmit(false)">

        <ng-container *ngFor="let col of columns" matColumnDef={{col.ref}}>
            <mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!col.sortable"> {{col.label}} </mat-header-cell>
            <mat-cell
                *matCellDef="let row"> {{!!col.multiple ? getMultiple(row, col) : getObjectProperty(row, col.ref)}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="actions">
            <mat-header-cell *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let row">
                <button mat-icon-button [style.pointer-events]="'auto'" (click)="deleteRow(row);$event.stopPropagation();">
                    <mat-icon color="warn">delete</mat-icon>
                </button>
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="getDisplayedColumns(); sticky: true;"></mat-header-row>
        <mat-row mat-ripple matRipple class="hover" *matRowDef="let row; columns: getDisplayedColumns();"
                 [style.pointer-events]="!route && !routeId && !row[routeId] ? 'none' : 'auto'"
                 [style.cursor]="!route && !routeId && !row[routeId] ? 'auto' : 'pointer'"
                 [routerLink]="!!route ? [route, row[routeId]] : [row[routeId]]">
        </mat-row>

        <mat-row *matNoDataRow>
            <mat-cell aria-colspan="4" >No data matching the filter</mat-cell>
        </mat-row>
    </mat-table>

</div>
<mat-paginator *ngIf="filterType !== FiltersFor.NONE" style="width: 90%; margin: auto"
               [pageSizeOptions]="[5, 10, 25, 100]" (page)="onChangeEmit(false)"
               aria-label="Select page"></mat-paginator>
