<div page-content>
  <div header>
    <ng-content></ng-content>
  </div>
	<div actions>
		<div class="uk-section-xsmall uk-margin-top">
			<div class="uk-grid" uk-grid>
				<div class="uk-flex uk-flex-left@m uk-flex-center uk-width-expand">
					<ul class="uk-subnav uk-subnav-pill">
						<li [class.uk-active]="showCurrent" (click)="showCurrent = true">
							<a class="uk-text-capitalize">{{stakeholderUtils.roles[role]}}s</a>
						</li>
						<li [class.uk-active]="!showCurrent" (click)="showCurrent = false">
							<a>Pending {{stakeholderUtils.roles[role]}}s</a>
						</li>
					</ul>
				</div>
				<div class="uk-width-expand@m uk-width-1-1 uk-grid uk-flex-right@m uk-flex-center uk-flex-middle" uk-grid>
					<div *ngIf="showCurrent" [disabled]="loadActive" search-input class="uk-width-expand@l uk-width-1-1"
							 [searchControl]="filterForm.get('active')" [expandable]="true" [placeholder]="'Search ' + stakeholderUtils.roles[role] + 's'" searchInputClass="outer">
					</div>
					<div *ngIf="!showCurrent" [disabled]="loadPending" search-input class="uk-width-expand@l uk-width-1-1"
							 [searchControl]="filterForm.get('pending')" [expandable]="true" [placeholder]="'Search invitations'" searchInputClass="outer">
					</div>
					<div>
						<button *ngIf="canInvite" class="uk-button uk-button-default uk-flex uk-flex-middle"
										[attr.uk-tooltip]="inviteDisableMessage" [class.uk-disabled]="loadPending || loadPending"
										[disabled]="loadActive || loadPending || !!inviteDisableMessage" (click)="openInviteModal()">
							<icon name="person_add" [flex]="true" type="filled"></icon>
							<span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Invite {{stakeholderUtils.roles[role]}}</span>
						</button>
						<button *ngIf="!exists && isCurator" class="uk-button uk-button-default uk-flex uk-flex-middle"
										(click)="openCreateRoleModal()">
							<icon name="group" [flex]="true" type="filled"></icon>
							<span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Create Group</span>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
  <div inner>
    <div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
			<div *ngIf="loadActive || loadPending" class="uk-position-center">
				<loading></loading>
			</div>
			<div *ngIf="!loadActive && !loadPending">
				<div *ngIf="(showCurrent && showActive.length == 0) || (!showCurrent && showPending.length == 0)"
						 class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
					<div *ngIf="showCurrent">No {{stakeholderUtils.roles[role]}}s found</div>
					<div *ngIf="!showCurrent">No pending {{stakeholderUtils.roles[role]}} invitations found</div>
				</div>
				<div *ngIf="(showCurrent && showActive.length > 0) || (!showCurrent && showPending.length > 0)">
					<no-load-paging *ngIf="showCurrent" [type]="(showActive.length > 1)?(stakeholderUtils.roles[role] + 's'):role"
													(pageChange)="updateActivePage($event)"
													[page]="activePage" [pageSize]="pageSize"
													[totalResults]="showActive.length">
					</no-load-paging>
					<no-load-paging *ngIf="!showCurrent" [type]="stakeholderUtils.roles[role] + ' ' + (showPending.length > 1?'invitations':'invitation')"
													(pageChange)="updatePendingPage($event)"
													[page]="pendingPage" [pageSize]="pageSize"
													[totalResults]="showPending.length">
					</no-load-paging>
					<div class="uk-grid uk-grid-large uk-child-width-1-1@s uk-child-width-1-2@m uk-margin-top" uk-grid>
						<div *ngFor="let item of (showCurrent)?(currentActivePage):(currentPendingPage)">
							<div class="uk-card uk-card-default">
								<div class="uk-card-body">
									<span class="uk-text-bold uk-text-large">{{(showCurrent) ? item.email : item}}</span>
								</div>
								<div *ngIf="!showCurrent || role === 'member' || canDelete" class="uk-card-footer uk-flex uk-flex-right">
									<button (click)="openDeleteModal(item)" class="uk-button uk-button-link uk-flex uk-flex-middle"
													[disabled]="(role === 'member' && item.isManager) || isMe(item.id)"
													[attr.uk-tooltip]="(role === 'member' && item.isManager)?'This user is a manager and cannot be removed.':
													(isMe(item.id)?'You cannot remove yourself':null)">
										<icon name="delete" [flex]="true" type="filled"></icon>
										<span class="uk-margin-small-left uk-text-bold uk-text-uppercase">{{showCurrent ? 'Delete' : 'Cancel invitation'}}</span>
									</button>
								</div>
							</div>
						</div>
					</div>
					<div class="uk-margin-small-top">
						<paging-no-load *ngIf="showCurrent"  [currentPage]="activePage"
														 [totalResults]="showActive.length" [size]="pageSize"
														 (pageChange)="updateActivePage($event)" customClasses="uk-flex-right@m uk-flex-center">
						</paging-no-load>
						<paging-no-load  *ngIf="!showCurrent" [currentPage]="pendingPage"
														 [totalResults]="showPending.length" [size]="pageSize"
														 (pageChange)="updatePendingPage($event)" customClasses="uk-flex-right@m uk-flex-center">
						</paging-no-load>
					</div>
				</div>
			</div>
    </div>
  </div>
</div>
<modal-alert #inviteModal (alertOutput)="invite()" [overflowBody]="false" classTitle="uk-background-primary uk-light"
						 [okDisabled]="!valid">
	<div *ngIf="message" class="uk-margin-medium-bottom uk-text-small">
		<div [innerHTML]="message | safeHtml"></div>
	</div>
	<div *ngIf="emailsForm">
		<div #emailInput input [formInput]="emailsForm" type="chips"
			 placeholder="Recipients" hint="Add a recipient" [visibleChips]="3"
			 [addExtraChips]="true" [validators]="validators" [separators]="[',']">
			<div note>Separate emails with commas</div>
		</div>
	</div>
</modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="deleteActive()" classTitle="uk-background-primary uk-light">
  <div *ngIf="selectedUser">
    Are you sure you want to remove <span class="uk-text-bold">{{selectedUser}}</span> from {{stakeholderUtils.roles[role]}}s?
  </div>
</modal-alert>
<modal-alert #deletePendingModal [overflowBody]="false" (alertOutput)="deletePending()" classTitle="uk-background-primary uk-light">
  <div *ngIf="selectedUser">
    Are you sure you want to cancel {{stakeholderUtils.roles[role]}} invitation of <span class="uk-text-bold">{{selectedUser}}</span>?
  </div>
</modal-alert>
<modal-alert #createRoleModal [overflowBody]="false" (alertOutput)="createGroup()" classTitle="uk-background-primary uk-light"
						 [okDisabled]="roleFb && roleFb.invalid">
  <div *ngIf="roleFb">
    <div class="uk-grid" uk-grid [formGroup]="roleFb">
      <div input [formInput]="roleFb.get('name')"
        placeholder="Name" class="uk-width-1-1"></div>
      <div input [formInput]="roleFb.get('description')" type="textarea"
        placeholder="Description" class="uk-width-1-1"></div>
    </div>
  </div>
</modal-alert>
