<div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
        <div class="kt-portlet kt-portlet--mobile margin-bottom-0">
    
            <div class="kt-portlet__body">
                <div class="row align-items-center">
                    <div class="col-md-12">
                    <form class="kt-form" autocomplete="off">
                        <!-- <div class="row align-items-center mb-4">
                            <div class="col-md-12">                                         
                                <div class="kt-searchbar">
                                    <div class="input-group">
                                        <div class="input-group-prepend"><span class="input-group-text" id="search-icon"><i class="flaticon-search"></i></span></div>
                                        <input type="text" class="form-control search-filter" placeholder="Search" aria-describedby="search-icon">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-secondary btn-hover-brand border-1">
                                                <span><i class="fa fa-filter padding-right-5"></i> Filter</span>
                                            </button>
    
                                            <button type="button" class="btn btn-secondary btn-hover-brand more-btn">
                                                    <span><i class="flaticon flaticon-more padding-right-5"></i></span>
                                                </button>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>            -->
                        <div class="row align-items-center">
                                <div class="col-xl-12">
                                    <div class="form-group m-form__group align-items-center">
                                        <div class="input-group">
                                            <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input"  type="text">
                                            <!-- [placeholder]="l('SearchWithThreeDot')" -->
                                            <span class="input-group-btn">
                                                <button  class="btn btn-primary" type="submit"><i class="flaticon-search-1"></i></button>
                                                <!-- (click)="getClinics()" -->
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </form>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
        <p-table #dataTable
            (onLazyLoad)="getRouteDetails($event)"
            [value]="primengTableHelper.records"
            rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
            [paginator]="false"
            [lazy]="true"
            [responsive]="primengTableHelper.isResponsive"
            [reorderableColumns]="true">
            <ng-template pTemplate="header">
                <tr class="th-bg">
                        <th style="width: 20px;"></th>
                        <th style="width: 17px;" pSortableColumn="">
                            <p-sortIcon field=""></p-sortIcon>
                        </th>
                        <th style="width: 22px;"></th>
                        <th style="width: 60px;" pSortableColumn="">
                            Order Id
                            <p-sortIcon field=""></p-sortIcon>
                        </th>
                        <th style="width: 60px;" pSortableColumn="">
                            Action
                            <p-sortIcon field=""></p-sortIcon>
                        </th>
                        <th style="width: 50px;" pSortableColumn="">
                            Zone
                            <p-sortIcon field=""></p-sortIcon>
                        </th>
                        <th style="width: 200px;" pSortableColumn="">
                            Delivery Name
                            <p-sortIcon field=""></p-sortIcon>
                        </th>
                        <th style="width: 130px" pSortableColumn="">
                            Last Log
                            <p-sortIcon field=""></p-sortIcon>
                        </th>
                        <th style="width: 100px;" pSortableColumn="">
                            Est Time
                            <p-sortIcon field=""></p-sortIcon>
                        </th>
                        <th style="width: 130px" pSortableColumn="">
                            Total Distance
                            <p-sortIcon field=""></p-sortIcon>
                        </th>
                        <th style="width: 130px" pSortableColumn="">
                            Security Code
                            <p-sortIcon field=""></p-sortIcon>
                        </th>
                    </tr>
            </ng-template>
                    <ng-template pTemplate="body"  let-record="$implicit" let-i="rowIndex">
                        <tr class="tr-bg" [pReorderableRow]="index">
                                <td style="text-align: center;padding-top: 28px;" pReorderableRowHandle>
                                    <span><i class="fa fa-grip-vertical"></i></span>
                                </td>
                                <td style="padding-top: 28px;">
                                    <span class="ui-column-title"> {{'Id' | localize}}</span>
                                            {{i + 1}}
                                </td>
                                <td style="text-align: center;">
                                    <label class="kt-checkbox" style="position: relative;top: -5px;">
                                        <input type="checkbox">
                                        <span></span>
                                    </label>
                                </td>
                                <td style="padding-top: 28px;">
                                    <span class="ui-column-title"> {{'Order Id' | localize}}</span>
                                    <a target="_blank" href="app/sprintship/controller-order-details/{{record.id}}"> {{record.id}}</a>
                                </td>
                                <td style="padding-top: 28px;">Delivery</td>
                                <td style="padding-top: 28px;">8</td>
                                <td style="padding-top: 15px;">
                                    <span class="ui-column-title"> {{'Delivery Name' | localize}}</span>
                                    <div>
                                        <b>{{record.deliveryDetail.contact.firstName}} {{record.deliveryDetail.contact.lastName}}</b></div>
                                    <div class="row address-row">
                                        <div class="col-sm-10 company-name padding-top-0">{{record.deliveryDetail.contact.address.addressLine1}} </div>
                                        <div class="col-sm-2 more-info kt-more-info">
                                            <div class="more-btn" (mouseover)="toggleMoreInfo($event)" (mouseout)="toggleMoreInfo($event)">
                                                <i class="flaticon flaticon-more-1"></i>
                                            </div>
                                            <div class="more-info-container more-pop-up">
                                                <div *ngIf="record.deliveryDetail.contact.address">{{record.deliveryDetail.contact.address.postalCode.city}}, {{record.deliveryDetail.contact.address.postalCode.state}}, {{record.deliveryDetail.contact.address.postalCode.value}}</div>
                                                <div *ngIf="record.deliveryDetail.contact.emails">{{record.deliveryDetail.contact.emails.value}}</div>
                                                <div *ngIf="record.orderTags">{{record.orderTags.tag.name}}</div>
                                                <div>{{record.deliveryDetail.etaEnd | date:'dd/MM/yyyy'}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div *ngIf="record.orderStatus">{{record.orderStatus.orderStatusType.description}} &nbsp; {{ record.orderStatus.creationTime | date:'dd/MM/yyyy'}} </div>
                                    <!-- <div *ngIf="record.orderStatus">{{ record.orderStatus.creationTime | date:'dd/MM/yyyy'}}</div> -->
                                    <div *ngIf="record.orderStatus">{{ record.orderStatus.creationTime | date:'shortTime'}}</div>
                                </td>
                                <td style="padding-top: 28px;">8:18am</td>
                                <td style="padding-top: 28px;">8.88</td>
                                <td style="padding-top: 28px;">888888</td>
                        </tr>
                    </ng-template>
        </p-table>

        <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
            {{'NoData' | localize}}
        </div>
        <div class="primeng-paging-container">
            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage"
                        #paginator
                        (onPageChange)="getRouteDetails($event)"
                        [totalRecords]="primengTableHelper.totalRecordsCount"
                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
            </p-paginator>
            <span class="total-records-count">
                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
            </span>
        </div> 
        </div>
</div>