<div class="configurations-datatable table-settings serverside-table" [ngClass]="{'with-rows': (bodyContent && bodyContent.length > 0), 'no-table-rows': (bodyContent && bodyContent.length === 0)}">
    <table datatable [hidden]="!showTable" [dtOptions]="dtOptions" class="table table-bordered bodyContent" *ngIf="headerContent && headerContent.length > 0">
        <thead>
            <tr>
                <ng-container *ngIf="settings.radioButton?.show">
                    <th class="checkbox-header">
                        {{settings.radioButton.title}}
                        <label *ngIf="settings.radioButton?.showSelectAll" class="checkbox form-check-label text-left table-checkbox ml-1 mb-4">
                            <span class="checkbox-span" [hidden]="settings.radioButton?.hidden">
                                <input type="checkbox" (ngModelChange)="changeCheckBoxAll($event)"
                                    [(ngModel)]="settings.radioButton.checkAllValue">
                                <span class="checkmark"></span>
                            </span>
                        </label>
                    </th>
                </ng-container>
                <th class="table-coloum-serial-no-header" *ngIf="settings.showSerialNumber"></th>
                <th *ngFor="let th of headerContent; let head_index = index" [ngClass]="{'left_fixed_header' : (dtOptions?.fixedColumns?.left && dtOptions.fixedColumns.left > head_index),  '{{th.classList}}' : th.classList}" [style.left.px]="head_index*166">
                    <span class="table-col-title">{{th.label}}</span>
                </th>
                <ng-container *ngIf="dtOptions.tableActions?.show">
                    <th class="table-header" [ngClass]="dtOptions.tableActions?.freeze ? 'left_fixed_header' : ''" [style.right.px]="0" [style.width.px]="dtOptions.tableActions.width"></th>
                </ng-container>
            </tr>
            <tr class="searchRow" *ngIf="dtOptions.columnSearch">
                <ng-container *ngIf="settings.radioButton?.show">
                    <th class="checkbox-header">
                        {{settings.radioButton.title}}
                        <label *ngIf="settings.radioButton?.showSelectAll" class="checkbox form-check-label text-left table-checkbox ml-1 mb-4">
                            <span class="checkbox-span" [hidden]="settings.radioButton?.hidden">
                                <input type="checkbox" (ngModelChange)="changeCheckBoxAll($event)"
                                    [(ngModel)]="settings.radioButton.checkAllValue">
                                <span class="checkmark"></span>
                            </span>
                        </label>
                    </th>
                </ng-container>
                <th class="table-coloum-serial-no-header" *ngIf="settings.showSerialNumber"></th>
                <th *ngFor="let th of headerContent;let head_index = index;" [ngClass]="{'left_fixed_body' : (dtOptions?.fixedColumns?.left && dtOptions.fixedColumns.left > head_index),  '{{th.classList}}' : th.classList}" [style.left.px]="head_index*166">
                    <!-- <span class="table-col-title">{{th.label}}</span> -->
                    <span (click)="$event.stopPropagation();" class="search" *ngIf="dtOptions.columnSearch">
                        <ng-container *ngIf="th.column_search">
                            <span [ngSwitch]="th.column_search.type">
                                <ng-container *ngSwitchCase="'text'">
                                    <input [class.invisible]="!(!settings.columnSearch.searchExceptions ||
                                    (settings.columnSearch.searchExceptions.indexOf(th.key)===-1))" type="text"
                                        class="form-control" (focus)="$event.stopPropagation()"
                                        [placeholder]="th.place_holder? th.place_holder: 'Search'"
                                        [(ngModel)]="columnSearchModel[th.key]"
                                        (ngModelChange)="search(columnSearchModel[th.key])" />
                                </ng-container>

                                <span *ngSwitchCase="'select'">
                                    <!-- <select [class.invisible]="!(!settings.columnSearch.searchExceptions ||
                                    (settings.columnSearch.searchExceptions.indexOf(th.key)===-1))"
                                        [(ngModel)]="columnSearchModel[th.key]"
                                        (ngModelChange)="search(columnSearchModel[th.key])" class="form-control">
                                        <option *ngFor="let opt of th.column_search.options" [value]="opt.key">
                                            {{opt.label}}
                                        </option>
                                    </select> -->
                                    <ng-select [items]="th.column_search.options" [class.invisible]="!(!settings.columnSearch.searchExceptions ||
                                    (settings.columnSearch.searchExceptions.indexOf(th.key)===-1))"
                                        [(ngModel)]="columnSearchModel[th.key]"
                                        (change)="search(columnSearchModel[th.key])" class="customSelect"
                                        [placeholder]="th.place_holder? th.place_holder: 'Select'" [clearable]="true"
                                        bindValue="key" bindLabel="label" appendTo="body">
                                    </ng-select>
                                </span>
                    <span *ngSwitchCase="'date_range'">
                                    <div class="input-group">
                                        <input [class.invisible]="!(!settings.columnSearch.searchExceptions ||
                    (settings.columnSearch.searchExceptions.indexOf(th.key)===-1))" [owlDateTimeTrigger]="dt"
                                            [owlDateTime]="dt" class="form-control cursor-pointer date-field-diasble"
                                            [(ngModel)]="columnSearchModel[th.key]" [max]="maxDate"
                                            (ngModelChange)="search(columnSearchModel[th.key])"
                                            [placeholder]="th.place_holder? th.place_holder: 'Filter by Date Range'"
                                            [title]="getTitle(columnSearchModel[th.key])" selectMode='range' readonly
                                            type="search" style="margin-right: 9px;">
                                        <button class="btn bg-transparent calendar-icon" [class.invisible]="!(!settings.columnSearch.searchExceptions ||
                                        (settings.columnSearch.searchExceptions.indexOf(th.key)===-1))" [owlDateTimeTrigger]="dt"
                                            *ngIf="!columnSearchModel[th.key]">
                                            <i class="fa fa-calendar"></i>
                                        </button>
                                        <button class="btn bg-transparent clearDateRange"
                                            (click)="clearDateRange($event,th.key)" *ngIf="columnSearchModel[th.key]">
                                            <i class="fa fa-times"></i>
                                            <!-- <span class="ng-clear-wrapper"><span class="ng-clear">x</span></span> -->
                    </button>
                    <owl-date-time [pickerType]="'calendar'" #dt></owl-date-time>
</div>
</span>
<ng-container *ngSwitchDefault>
    <!-- Invalid Format -->

    <input [class.invisible]="!(!settings.columnSearch.searchExceptions ||
                            (settings.columnSearch.searchExceptions.indexOf(th.key)===-1))" type="text" class="form-control" (focus)="$event.stopPropagation()" [placeholder]="th.column_search.place_holder? th.column_search.place_holder: 'Search'" [(ngModel)]="columnSearchModel[th.key]"
        (ngModelChange)="search(columnSearchModel[th.key])" />
</ng-container>

</span>

</ng-container>
<ng-container *ngIf="!th.column_search">
    <input [class.invisible]="!(!settings.columnSearch.searchExceptions ||
                            (settings.columnSearch.searchExceptions.indexOf(th.key)===-1))" type="text" class="form-control" (focus)="$event.stopPropagation()" placeholder="Search" [(ngModel)]="columnSearchModel[th.key]" (ngModelChange)="search(columnSearchModel[th.key])"
    />
</ng-container>
</span>
</th>
<ng-container *ngIf="dtOptions.tableActions?.show">
    <th class="table-header" [ngClass]="dtOptions.tableActions?.freeze ? 'left_fixed_body' : ''" [style.right.px]="0" [style.width.px]="dtOptions.tableActions.width"></th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="bodyContent && bodyContent.length > 0" [ngClass]="{'table-processing': tableProcessing}">
    <tr *ngFor="let tr of bodyContent; let body_index = index" [ngClass]="tr.className">
        <ng-container *ngIf="settings.radioButton?.show">
            <td>
                <label *ngIf="!tr[settings.radioButton.hiddenKey]" class="checkbox form-check-label text-left table-checkbox ml-1" [ngClass]="{'ph-item color-light-gray text-hide cell-processing': tableProcessing}">
                            <span class="checkbox-span" [hidden]="settings.radioButton?.hidden">
                                <input type="checkbox" (ngModelChange)="changeCheckBox($event, body_index, tr)"
                                    [(ngModel)]="tr[settings.radioButton.key]">
                                <span class="checkmark"></span>
                            </span>
                        </label>
            </td>
        </ng-container>
        <td class="table-coloum-serial-no-body text-center secondColumnText" *ngIf="settings.showSerialNumber">
            <span *ngIf="dataTablesParameters" [ngClass]="{'ph-item color-light-gray text-hide': tableProcessing}">
                        {{dataTablesParameters.start + body_index + 1}}
                    </span>
        </td>
        <td *ngFor="let th of headerContent; let head_index = index" [ngClass]="(dtOptions?.fixedColumns?.left && dtOptions.fixedColumns.left > head_index) ? 'left_fixed_body' : ''" [style.left.px]="head_index*166" class="table-cell {{settings.rowClick? 'row-click-active': ''}}"
            (click)="settings.rowClick && rowClick(tr)">
            <ng-container *ngIf="!th.editable">
                <span [ngClass]="{'ph-item color-light-gray text-hide': tableProcessing}" *ngIf="th.icon && settings.columnConditions && settings.columnConditions.icons && settings.columnConditions.icons[th.key] && settings.columnConditions.icons[th.key][tr[th.key]]">
                            <i aria-hidden="true" [ngClass]="{'invisible': tableProcessing}"
                                class="{{settings.columnConditions.icons[th.key][tr[th.key]].icon + ' ' + settings.columnConditions.icons[th.key][tr[th.key]].class}}"></i>
                        </span>
                <span *ngIf="settings.columnConditions && settings.columnConditions.altText" [ngClass]="{'ph-item color-light-gray text-hide': tableProcessing}">
                            <ng-container
                                *ngIf="settings.columnConditions && settings.columnConditions.altText && settings.columnConditions.altText[th.key] && settings.columnConditions.altText[th.key][tr[th.key]] else altTextFail">
                                {{settings.columnConditions.altText[th.key][tr[th.key]].label}}
                            </ng-container>
                            <ng-template #altTextFail>
                                {{tr[th.key]}}
                            </ng-template>
                        </span>
                <span *ngIf="!th.icon && !settings?.columnConditions?.altText" class="spnDetails" [ngClass]="{'ph-item color-light-gray text-hide': tableProcessing}">
                            <ng-container
                                *ngIf="(th.clickAble && th.clickAble.show) || (settings.clickableColumns && settings.clickableColumns.show) else plainText">
                                <ng-container *ngIf="th.clickAble else clickableColumnCheck">
                                    <ng-container [ngSwitch]="th.clickAble.type">
                                        <ng-container *ngSwitchCase="'numericCondition'">
                                            <ng-container *ngIf="th.clickAble.condition.sign === '>' else lessThan">
                                                <ng-container
                                                    *ngIf="tr[th.clickAble.condition.key] > th.clickAble.condition.value; then clickableCell else plainText">
                                                </ng-container>
                                            </ng-container>
                                            <ng-template #lessThan>
                                                <ng-container
                                                    *ngIf="tr[th.clickAble.condition.key] < th.clickAble.condition.value; then clickableCell else plainText">
                                                </ng-container>
                                            </ng-template>
                                        </ng-container>



                                        <ng-container *ngSwitchCase="'alphabetCondition'">
                                            <ng-container *ngIf="th.clickAble.condition.sign === '!=' else plainText">
                                                <ng-container
                                                    *ngIf="tr[th.clickAble.condition.key] != th.clickAble.condition.value; then clickableCell else plainText">
                                                </ng-container>
                                            </ng-container>
                                        </ng-container>



                                        <ng-container *ngSwitchCase="'boolean'">
                                            <ng-container
                                                *ngIf="(tr[th.clickAble.condition.key]); then clickableCell else plainText">
                                            </ng-container>
                                        </ng-container>
                                        <ng-container *ngSwitchDefault>
                                            <ng-container
                                                *ngIf="(tr[th.clickAble.condition.key] == th.clickAble.condition.value); then clickableCell else plainText">
                                            </ng-container>
                                        </ng-container>
                                    </ng-container>
                                </ng-container>
                                <ng-template #clickableColumnCheck>
                                    <ng-container
                                        *ngIf="(settings.clickableColumns.list && settings.clickableColumns.list.indexOf(th.key) > -1) then clickableCell else plainText">
                                    </ng-container>
                                </ng-template>
                            </ng-container>
                            <ng-template #plainText>
                                <span [innerHtml]="tr[th.key]" *ngIf="th.innerHtml" class="innter-html-content"></span>
                <span class="plan-text" [title]="tr[th.key]" *ngIf="!th.innerHtml">
                                    {{tr[th.key]}}
                                </span>
                </ng-template>
                <!-- th.clickAble.condition -->
                <ng-template #clickableCell>
                    <span class="active clickable-element" [ngClass]="settings?.clickableColumns?.class" (click)="cellClick(tr,th)" [title]="tr[th.key]">
                                    <ng-container
                                        *ngIf="th.clickAble?.condition?.altText?.value ; then clickableWithAlt else clickableWithoutAlt">
                                    </ng-container>
                                    <ng-template #clickableWithAlt>
                                        {{th.clickAble.condition.altText.value}}
                                    </ng-template>

                                    <ng-template #clickableWithoutAlt>
                                        {{tr[th.key]}}
                                    </ng-template>
                                </span>
                </ng-template>
                </span>
            </ng-container>
            <ng-container *ngIf="th.editable">
                <span [ngSwitch]="th.type" [ngClass]="{'ph-item color-light-gray text-hide cell-processing': tableProcessing}">
                            <ng-container *ngSwitchCase="'number'">
                                <input type="number" [(ngModel)]="tr[th.key]" class="form-control"
                                    [attr.disabled]="(tr['disabled'] || th['disabled'])? '': null">
                            </ng-container>
                            <ng-container *ngSwitchCase="'text'">
                                <input type="text" [(ngModel)]="tr[th.key]" class="form-control"
                                    [attr.disabled]="(tr['disabled'] || th['disabled'])? '': null">
                            </ng-container>
                            <span *ngSwitchCase="'select'"
                                [ngClass]="{'ph-item color-light-gray text-hide': tableProcessing}">
                                <select [(ngModel)]="tr[th.key]" class="form-control"
                                    [attr.disabled]="(tr['disabled'] || th['disabled'])? '': null">
                                    <option *ngFor="let opt of th.options" [value]="opt.value">{{opt.label}}</option>
                                </select>
                            </span>
                <span *ngSwitchCase="'datePicker'">
                                <input [owlDateTimeTrigger]="dt" [owlDateTime]="dt"
                                    class="form-control date-field-diasble" [(ngModel)]="tr[th.key]" selectMode='single'
                                    readonly [attr.disabled]="(tr['disabled'] || th['disabled'])? '': null">
                                <owl-date-time [pickerType]="'calendar'" #dt></owl-date-time>
                            </span>
                <ng-container *ngSwitchDefault>
                    Invalid Format
                </ng-container>
                </span>
            </ng-container>
        </td>
        <ng-container *ngIf="dtOptions.tableActions?.show">
            <td [style.width.px]="dtOptions.tableActions.width" class="table-cell-action text-center" [ngClass]="dtOptions.tableActions?.freeze ? 'left_fixed_body' : ''" [style.right.px]="0">
                <ng-container *ngFor="let action of dtOptions.tableActions?.actionButtons">
                    <span *ngIf="!tr[action.hideOn]" [ngClass]="{'ph-item color-light-gray text-hide processing-action': tableProcessing}">
                                <a href="javascript:void(0)"
                                    class="label-action {{action.disabled || dtOptions.tableActions.disabled? 'disabled': ''}}"
                                    [ngClass]="action.class" *ngIf="action.onlyText" container="body"
                                    [ngbTooltip]="action.label"
                                    (click)="tableAction(tr, action.type)">{{action.text}}</a>
                                <button *ngIf="!action.onlyText && !tableProcessing" class="btn btn-sm"
                                    [ngClass]="action.class" (click)="tableAction(tr, action.type)"
                                    [attr.disabled]="(action.disabled || dtOptions.tableActions.disabled)? '': null"
                                    container="body" [ngbTooltip]="action.label">
                                    <i aria-hidden="true" class="fa" [ngClass]="action.icon" *ngIf="!action.svg"></i>
                                    <img height="15" src="./assets/images/svg/{{action.icon}}" *ngIf="action.svg">
                                    {{action.text}}
                                </button>
                                <!-- <ng-template #tipContent> <span>{{action.text}}</span> </ng-template> -->
                    </span>
                </ng-container>
            </td>
        </ng-container>
    </tr>
</tbody>
</table>
<div class="empty-state" *ngIf="emptyTableNotify && !tableProcessing && !bodyContent?.length">
    <label class="records-available">No records to display</label><br>
    <span *ngIf="settings?.emptyDataTemplate?.show">
            <label>{{settings?.emptyDataTemplate?.message}}</label><br>
            <button *ngIf="settings.emptyDataTemplate.filterBtn.show" class="btn btn-secondary filter-data"
                (click)="toogleSidebar()">{{settings.emptyDataTemplate.filterBtn.label}}</button>
        </span>
</div>
<button type="button" style="display:none" class="btn btn-demo tableFilterCommonBtn" data-toggle="modal" [attr.data-target]="'#'+ settings.tableId" [attr.id]="'toggleSidebar_'+ settings.tableId">
    </button>
<div class="modal right fade" [attr.id]="settings.tableId" role="dialog" aria-labelledby="myModalLabel2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title filter-title" id="myModalLabel2">Filter by</h4>
                <button type="button" class="close filterCloseBtn" data-dismiss="modal" aria-label="Close" [attr.id]="'filterCloseIcon_' + settings.tableId"><span
                            aria-hidden="false">&times;</span></button>
            </div>

            <div class="modal-body" [ngClass]="settings.showMismatch ? 'mismatch-filter-body' : 'filter-body'">
                <!-- <app-simple-dfm class="simple-dfm" [savedData]="formData"
                        (selectFieldChange)="filterSelectFieldChange($event)" [parentData]="parentData"
                        *ngIf="metaData.length > 0" [metaData]="metaData">
                    </app-simple-dfm> -->
            </div>
            <div class="modal-footer" *ngIf="metaData.length > 0">
                <button class="btn btn-primary col-md-12" (click)="filterSubmit()">Apply</button>
            </div>
            <div class="modal-footer" *ngIf="settings.showMismatch">
                <button *ngIf="settings.showMismatch" class="btn btn-primary col-md-12" (click)="MismatchClickedbutton()">Show Mismatch SP Details</button>
            </div>
        </div>
        <!-- modal-content -->
    </div>
    <!-- modal-dialog -->
</div>
</div>