<div bsModal #modal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal"
     (onShown)="shown()"
     aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">
                    <span>{{'SelectRoles' | localize}}</span>
                </h5>
                <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form novalidate (ngSubmit)="refreshTable()" autocomplete="new-password">
                    <div class="input-group mb-2">
                        <input autoFocus [(ngModel)]="filterText" name="filterText" class="form-control" placeholder="{{'SearchWithThreeDot' | localize}}" type="text">
                        <span class="input-group-btn">
                            <button class="btn btn-primary btn-brand btn-pill" type="submit"><i class="flaticon-search-1" [attr.aria-label]="l('Search')"></i></button>
                        </span>
                    </div>

                    <!--<Primeng-TurboTable-Start>-->
                    <div class="primeng-datatable-container" >
                        <p-table #dataTable
                                 (onLazyLoad)="getRecordsIfNeeds($event)"
                                 [value]="primengTableHelper.records"
                                 rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                 [paginator]="false"
                                 [lazy]="true"
                                 [responsive]="primengTableHelper.isResponsive"
                                 [(selection)]="selectedRoles"
                                 selectionMode="multiple">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width:38px">
                                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                    </th>
                                    <th>
                                        {{'Name' | localize}}
                                    </th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit">
                                <tr [pSelectableRow]="record">
                                    <td style="width: 38px">
                                        <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                    </td>
                                    <td>
                                        <span class="ui-column-title">{{'Name' | localize}}</span>
                                        {{record.name}}
                                    </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)="getRecordsIfNeeds($event)"
                                         [totalRecords]="primengTableHelper.totalRecordsCount"
                                         [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                            </span>
                        </div>
                    </div>
                    <!--<Primeng-TurboTable-End>-->
                </form>

            </div>

            <div class="modal-footer">
                <button [disabled]="saving" type="button" class="btn btn-secondary btn-brand btn-pill" (click)="close()">{{"Cancel" | localize}}</button>
                <button class="btn btn-primary btn-brand btn-pill" (click)="addRolesToOrganizationUnit()" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{"Save" | localize}}</span></button>
            </div>

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