<div class="row">
    <div class="col-12">
        <button *ngIf="('Pages.Administration.OrganizationUnits.ManageMembers' | permission) && organizationUnit" (click)="openAddMemberModal()" class="btn btn-primary float-right mb-3 btn-brand btn-pill">
            <i class="fa fa-plus"></i> {{"AddMember" | localize}}
        </button>
    </div>
    <div class="col-12">
        <div id="OuMembersTable">
            <!--<Primeng-TurboTable-Start>-->
            <div class="primeng-datatable-container"  [hidden]="!organizationUnit">
                <p-table #dataTable
                         (onLazyLoad)="getOrganizationUnitUsers($event)"
                         [value]="primengTableHelper.records"
                         rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                         [paginator]="false"
                         [lazy]="true"
                         [responsive]="primengTableHelper.isResponsive">
                    <ng-template pTemplate="header">
                        <tr>
                            <th style="width: 15%"
                                [hidden]="!('Pages.Administration.OrganizationUnits.ManageMembers' | permission)">{{'Delete' | localize}}</th>
                            <th pSortableColumn="userName">
                                {{'UserName' | localize}}
                                <p-sortIcon field="userName"></p-sortIcon>
                            </th>
                            <th pSortableColumn="addedTime">
                                {{'AddedTime' | localize}}
                                <p-sortIcon field="addedTime"></p-sortIcon>
                            </th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-record="$implicit">
                        <tr>
                            <td [hidden]="!('Pages.Administration.OrganizationUnits.ManageMembers' | permission)">
                                <button class="btn btn-outline-danger btn-icon btn-brand btn-pill"
                                        (click)="removeMember(record)"
                                        title="{{'Delete' | localize}}">
                                    <i class="fa fa-times" [attr.aria-label]="l('Delete')"></i>
                                </button>
                            </td>
                            <td>
                                <span class="ui-column-title">{{'UserName' | localize}}</span>
                                {{record.userName}}
                            </td>
                            <td>
                                <span class="ui-column-title">{{'AddedTime' | localize}}</span>
                                {{record.addedTime | momentFormat:'L'}}
                            </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)="getOrganizationUnitUsers($event)"
                                 [totalRecords]="primengTableHelper.totalRecordsCount"
                                 [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                    </p-paginator>
                    <span class="total-records-count">
                        {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                    </span>
                </div>
            </div>
            <!--<Primeng-TurboTable-End>-->
        </div>
    </div>
</div>

<div *ngIf="!organizationUnit" class="text-muted">
    {{"SelectAnOrganizationUnitToSeeMembers" | localize}}
</div>

<addMemberModal #addMemberModal (membersAdded)="addMembers($event)"></addMemberModal>
