<div style="display: flex;">
    <div class="grid-ibox-content-options">
        <!-- <div class="filter-panel mat-elevation-z8 remove-buttons">
        <xdf-ngx-tags-input #inputComponent name="name" class="input-lg" [fields]="fieldFilters"
                            (filterEvent)="onFilter(false)">
        </xdf-ngx-tags-input>
        </div> -->
        <div class="grid-container mat-elevation-z8">
            <table class="crud-table table table-striped table-hover" mat-table [dataSource]="dataSource" matSort
                    [matSortActive]="sortColumn" [matSortDirection]="sortDirection" matSortDisableClear
                    multiTemplateDataRows>
                <ng-container matColumnDef="{{ template.name }}" *ngFor="let template of columnTemplateArray">
                    <div *ngIf="template.sortable" >
                        <th mat-header-cell *matHeaderCellDef mat-sort-header >
                        {{ template.title | translate }}
                        <mat-icon *ngIf="sortColumn === template?.name">
                            <em class="fa" [ngClass]="{
                            'fa-sort-amount-desc': sortDirection === 'desc',
                            'fa-sort-amount-asc': sortDirection === 'asc'}"></em>
                        </mat-icon>
                        </th>
                    </div>
                    <div *ngIf="!template.sortable" >
                        <th mat-header-cell *matHeaderCellDef > {{ template.title | translate }} </th>
                    </div>
                    <td mat-cell *matCellDef="let item" class="text-secondary"
                        [ngStyle]="template.style ? template.style : ''">
                        <span *ngIf="template.name === 'arrivalDate'">
                            {{ getDateFormat(item[template.name]) }}
                        </span>
                        <span *ngIf="template.name === 'departureDate'">
                            {{ getDateFormat(item[template.name]) }}
                        </span>
                    </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" style="width: 5%;">
                        <div class="btn-group btn-actions" *ngIf="mode !== 'view'">
                            <button type="button" class="btn btn-default btn-sm" (click)="onEdit(item)" [disabled]="mode === 'view'">
                                <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)="onDelete(item)" [disabled]="mode === 'view'">
                                <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"></tr>
            </table>
            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]="[5, 10, 15]">
            </mat-paginator>
        </div>
    </div>
    <div class="content-vertical-bar">
        <button type="button" mat-mini-fab color="default" *ngIf="mode !== 'view'" (click)="onCreate()" matTooltip="{{ 'btn.new' | translate }}">
            <i class="fa fa-file-o"></i>
        </button>
    </div>
</div>