<div dir="ltr">
    <button mat-button color="primary" (click)="edit()">
        <mat-icon>add</mat-icon>
    </button>
    <button mat-button [matMenuTriggerFor]="menu">
        <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
        <button (click)='toggle(column)' *ngFor="let column of allColumns" mat-menu-item>
            <input
                    type='checkbox'
                    [id]="column.prop"

                    [checked]='isChecked(column)'
                    [disabled]="(column.prop == 'id')"
            />
            {{column.name}}
        </button>
    </mat-menu>
</div>
<ngx-datatable
        #myTable
        class="material"
        [rows]="rows"
        [columns]="columns"
        [columnMode]="'force'"
        [headerHeight]="30"
        [footerHeight]="50"
        [rowHeight]="30"
        [limit]="limit"
        [count]="count"
        [offset]="offset"
        [filterRow]="true"
        [groupRowsBy]="'group'"
        [groupExpansionDefault]="true"
        [externalSorting]="true"
        [loadingIndicator]="is_loading"
        [externalPaging]="true"
        [appUrl] = "appUrl"
        (sort)="fetchList($event)"
        (page)='fetchList($event)'
        [filters] = "filters"
        [sortDir]="sortDir"
        [sortProp]="sortProp"
        [includes]="includes"
        [resource] = 'listService.type'
>
    <ngx-datatable-group-header [rowHeight]="50" #myGroupHeader>
        <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
            <div style="padding-left:5px;">
                <a
                        [class.datatable-icon-right]="!expanded"
                        [class.datatable-icon-down]="expanded"
                        title="Expand/Collapse Group"
                        (click)="toggleExpandGroup(group)">
                    <b>{{group.value[0].group}}</b>
                </a>
            </div>
        </ng-template>
    </ngx-datatable-group-header>

    <ngx-datatable-column *ngFor="let column of columns" prop="{{column.prop}}" name="{{column.name}}"
                          [filterTemplate]="column.filter">
        <ng-template *ngIf="column.prop == 'id'" let-row="row" let-value="value" ngx-datatable-cell-template>
            <button mat-button color="primary" (click)="remove(value)">
                <mat-icon svgIcon="delete"></mat-icon>
            </button>
            <button mat-button color="primary" (click)="edit(value)">
                <mat-icon>edit</mat-icon>
            </button>
        </ng-template>
    </ngx-datatable-column>


</ngx-datatable>


<!--todo ino beporse-->
<ng-template #filter_group>
    <mat-form-field style="width: 100%" floatLabel="never">
        <mat-select multiple placeholder="گروه" [(ngModel)]="filters['group']" (change)="fetchList('filter')">
            <mat-option *ngFor="let permission_group of permission_groups" [value]="permission_group.id">
                {{ permission_group.name }}
            </mat-option>
        </mat-select>
    </mat-form-field>
</ng-template>


<ng-template #filter_name>
    <mat-form-field>
        <input matInput [(ngModel)]="filters['name']" (change)="fetchList('filter')">
    </mat-form-field>
</ng-template>

<ng-template #filter_slug>
    <mat-form-field style="width: 100%" floatLabel="never">
        <input matInput [(ngModel)]="filters['slug']" (change)="fetchList('filter')">
    </mat-form-field>
</ng-template>

    <ng-template #filter_id>
        <button mat-icon-button (click)="fetchList('refresh')">
            <mat-icon svgIcon="refresh"></mat-icon>
        </button>
    </ng-template>



