<div class="content">
    <div [ngClass]="{'grid-ibox-content-options': resourceAuth, 'grid-ibox-content': resourceAuth === undefined}" *ngIf="dataSource.data.length > 0">
        <div class="filter-panel mat-elevation-z8" *ngIf="showFilterBar">
            <!-- <xdf-ngx-tags-input class="input-lg" [tags]="filterTags" [fields]="fieldFilters"
                (filterEvent)="onFilter($event)"></xdf-ngx-tags-input> -->
                <div class="tags-input">
                    <span class="filter-label label label-default d-none d-xl-block small">{{ 'action.grid.filter' | translate }}</span>
                    <span class="filter-label label label-default d-xl-none"><i class="fa fa-filter"></i></span>
                
                    <input type="text" class="tags-input__input-field ngx-daterangepicker-action" #txtVal [(ngModel)]="filterValue"  (keyup)="onFilter($event.target.value)">
                
                
                    <!-- <button type="button" class="btn btn-default btn-options border-left" matTooltip="{  {'action.grid.filter.help' | translate}}" (click)="showHelp()"><i class="fa fa-commenting-o"></i></button> -->
                    <!-- <button type="button" class="ngx-daterangepicker-action btn btn-primary"
                        matTooltip="{{'action.grid.filter.button' | translate}}" onclick="onFilter($event.target.value)"><i class="fa fa-search"
                            aria-hidden="true"></i></button> -->
                    <button type="button" class="btn btn-default btn-options" matTooltip="{{'action.grid.filter.clear' | translate}}" (click)="deleteFilter()"><i class="fa fa-times-circle"></i></button>
                </div>
        </div>
        

        <div class="grid-container mat-elevation-z8" >
            <!-- <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
                <mat-spinner diameter="40"></mat-spinner>
            </div> -->
            <table #calendarTable class="crud-table table" mat-table multiTemplateDataRows [dataSource]="dataSource" matSort #sort
                matSortDisableClear #paginator>

                <!-- Checkbox Column -->
                <ng-container matColumnDef="select" *ngIf="editMultiple">
                    <th mat-header-cell *matHeaderCellDef style="width: 30px;">
                        <mat-checkbox (change)="$event ? masterToggle() : null"
                            [checked]="selection.hasValue() && isAllSelected()"
                            [indeterminate]="selection.hasValue() && !isAllSelected()">
                        </mat-checkbox>
                    </th>
                    <td mat-cell *matCellDef="let row">
                        <mat-checkbox (click)="$event.stopPropagation()"
                            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                        </mat-checkbox>
                    </td>
                </ng-container>

                <ng-container matColumnDef="expand">
                    <th mat-header-cell *matHeaderCellDef style="width: 40px;"> </th>
                    <td mat-cell *matCellDef="let item" style="cursor: pointer" (click)="expandClick(item)">
                        <i class="fa fa-angle-right" *ngIf="expandedElement !== item"></i>
                        <i class="fa fa-angle-down" *ngIf="expandedElement === item"></i>
                    </td>
                </ng-container>

                <ng-container matColumnDef="{{template.name}}" *ngFor="let template of columnTemplateArray">
                    <div *ngIf="template.sortable">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]="template.style"
                            [ngClass]="template.responsive">
                            {{ template.title | translate }}
                            <mat-icon *ngIf="sortColumn===template?.name" class="text-right">
                                <i class="fa fa-sort-amount-desc" *ngIf="sortDirection === 'desc'"></i>
                                <i class="fa fa-sort-amount-asc" *ngIf="sortDirection === 'asc'"></i>
                            </mat-icon>
                        </th>

                    </div>
                    <div *ngIf="!template.sortable">
                        <th mat-header-cell *matHeaderCellDef [ngStyle]="template.style"
                            [ngClass]="template.responsive">
                            {{ template.title | translate }}
                        </th>
                    </div>
                    <td mat-cell *matCellDef="let item" [ngStyle]="template.style" class="{{template.responsive}}"
                        [ngClass]="getClassCol(item, template)" (click)="onRowClicked(item)">
                        <span [ngClass]="getClassText(item, template)"
                            [ngStyle]="getStyleText(template?.colStyle, item)">{{ getValue(item, template) }}</span>
                    </td>
                </ng-container>

                <ng-container matColumnDef="expandedDetail">
                    <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns?.length">
                        <div class="inner-element-detail"
                            [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
                            <template #innerContainer></template>
                        </div>

                    </td>
                </ng-container>

                <ng-container matColumnDef="actions">
                    <th mat-header-cell *matHeaderCellDef></th>
                    <td mat-cell *matCellDef="let item ; let i = dataIndex" class="text-center">
                        <div class="btn-group btn-actions" *ngIf="mode !== 'view'">
                            <button type="button" class="btn btn-default btn-sm" (click)="onRowEdited(item, dataSource.data.indexOf(item))">

                                <i class="fa fa-edit d-xl-none"></i>
                                <span class="d-none d-xl-block">
                                    <i class="fa fa-edit"></i>&nbsp;{{'btn.edit' | translate}}
                                </span>
                            </button>

                            <button type="button" class="btn btn-default btn-sm" (click)="onDeleteRecord(item, dataSource.data.indexOf(item))">

                                <i class="fa fa-trash d-xl-none"></i>
                                <span class="d-none d-xl-block">
                                    <i class="fa fa-trash"></i>&nbsp;{{'btn.delete' | translate}}
                                </span>
                            </button>
                        </div>

                    </td>
                </ng-container>
                <!--  -->
                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = dataIndex" class="inner-element-row"
                    [ngClass]="{'mat-row-auth': resourceAuth && resourceAuth['view'], 'odd': isOdd(i)}"
                    [class.inner-expanded-row]="expandedElement === row"></tr>
                <ng-container>
                    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']; let i = dataIndex"
                        class="inner-detail-row" [ngClass]="{'odd': isOdd(i)}"></tr>
                </ng-container>

            </table>
        </div>
    </div>

    <div class="content-vertical-bar" *ngIf="dataSource.data.length > 0 && mode !== 'view'">
        <button type="button" mat-mini-fab color="default" (click)="onNewRecord()"
            matTooltip="{{ 'btn.new' | translate }}">
            <i class="fa fa-file-o"></i>
        </button>
    </div>
</div>