<mat-toolbar class="simple-toolbar">
    <span>Example filters ({{ table?.size }})</span>
    <div class="show-simple">
        <button
            mat-raised-button
            (click)="filterFromFifth()"
        >
            filter from fifth
        </button>
        <button
            mat-raised-button
            (click)="clearFilter()"
        >
            clear filter
        </button>
        <button
            mat-raised-button
            (click)="showSample()"
        >
            show code sample
        </button>
    </div>
</mat-toolbar>

<ngx-table-builder
    #table
    enable-filtering
    enable-selection
    class="filter-example"
    [row-height]="40"
    [source]="data"
>
    <ngx-options
        is-draggable
        is-filterable
        is-resizable
        is-sortable
    />
    <ngx-source-null>Loading...</ngx-source-null>
    <ngx-empty><not-found /></ngx-empty>

    <ngx-header
        height="65"
        [css-class]="['my-filter']"
    >
        <div class="filter-form">
            <mat-form-field appearance="outline">
                <mat-label>Filter</mat-label>
                <input
                    autocomplete="off"
                    matInput
                    name="width"
                    [(ngModel)]="table.filterable.filterValue"
                    (ngModelChange)="table.filter()"
                />
                <mat-icon matSuffix>search</mat-icon>
            </mat-form-field>

            <mat-form-field
                appearance="outline"
                class="filter-options"
            >
                <mat-label>Find options</mat-label>
                <mat-select
                    [(value)]="table.filterable.filterType"
                    (valueChange)="table.filter()"
                >
                    <mat-option
                        *ngFor="let type of table.filterable.types | keyvalue"
                        [value]="type.value"
                    >
                        {{ type.key }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
    </ngx-header>

    <ngx-column
        custom-key
        key="selection"
        sticky
        width="55"
    >
        <ng-template ngx-th>
            <mat-checkbox
                [checked]="table.selectionModel.isAll"
                [indeterminate]="table.selectionModel.isIndeterminate"
                (change)="table.selection.toggleAll(data)"
            />
        </ng-template>
        <ng-template
            let-row
            ngx-td
            row
            (onClick)="$event.preventDefault()"
        >
            <!-- eslint-disable @angular-eslint/template/no-call-expression -->
            <mat-checkbox
                [checked]="table.selectionModel.get($any(row).id)"
                (change)="table.selection.toggle(row)"
            />
        </ng-template>
    </ngx-column>

    <ngx-column key="someDate">
        <ng-template
            let-cell
            ngx-td
        >
            {{ cell | date: 'dd.MM.yyyy HH:mm:ss' }}
        </ng-template>
    </ngx-column>

    <ngx-column
        *ngFor="let key of table.modelColumnKeys"
        [key]="key"
    >
        <ng-template
            let-cell
            ngx-td
            [nowrap]="false"
        >
            <a onclick="javascript:void(0)">
                <ngx-filter-viewer
                    [key]="key"
                    [text]="cell"
                />
            </a>
        </ng-template>
    </ngx-column>

    <ngx-column
        custom-key
        empty-head
        key="action"
        sticky-end
        width="50"
    >
        <ng-template ngx-td>
            <mat-icon>all_inbox</mat-icon>
        </ng-template>
    </ngx-column>

    <ngx-filter #filter>
        <context-menu-sample
            [state]="filter.state"
            [table]="table"
        />
    </ngx-filter>

    <ngx-footer>
        <p style="padding: 3px 0 0 20px">
            <b>Size</b>
            : {{ table.source?.length }} x {{ table?.displayedColumns?.length }}
        </p>
    </ngx-footer>
</ngx-table-builder>
