<div *ngIf="workbasket" id="wb-information" class="panel panel-default">
	<div class="panel-heading">
		<div class="pull-right btn-group">
			<button type="button" (click)="onSubmit()" [disabled]="action === 'COPY'" class="btn btn-default btn-primary"
			 data-toggle="tooltip" title="Save">
				<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>
			</button>
			<button type="button" (click)="clear()" class="btn btn-default" data-toggle="tooltip" title="Undo Changes">
				<span class="glyphicon glyphicon-repeat blue" aria-hidden="true"></span>
			</button>
		</div>
		<h4 class="panel-header">{{workbasket.name}}
			<span *ngIf="!workbasket.workbasketId" class="badge warning"> {{badgeMessage}}</span>
		</h4>
	</div>
	<div class="panel-body">
		<form [formGroup]="AccessItemsForm">
			<table formArrayName="accessItemsGroups" id="table-access-items" class="table table-striped table-center">
				<thead>
					<tr>
						<th></th>
						<th class="text-align required-header">AccessID</th>
						<th>Select all</th>
						<th>Read</th>
						<th>Open</th>
						<th>Append</th>
						<th>Transfer</th>
						<th>Distribute</th>
						<th *ngIf="custom1Field.visible">{{custom1Field.field}}</th>
						<th *ngIf="custom2Field.visible">{{custom2Field.field}}</th>
						<th *ngIf="custom3Field.visible">{{custom3Field.field}}</th>
						<th *ngIf="custom4Field.visible">{{custom4Field.field}}</th>
						<th *ngIf="custom5Field.visible">{{custom5Field.field}}</th>
						<th *ngIf="custom6Field.visible">{{custom6Field.field}}</th>
						<th *ngIf="custom7Field.visible">{{custom7Field.field}}</th>
						<th *ngIf="custom8Field.visible">{{custom8Field.field}}</th>
						<th *ngIf="custom9Field.visible">{{custom9Field.field}}</th>
						<th *ngIf="custom10Field.visible">{{custom10Field.field}}</th>
						<th *ngIf="custom11Field.visible">{{custom11Field.field}}</th>
						<th *ngIf="custom12Field.visible">{{custom12Field.field}}</th>
					</tr>
				</thead>
				<tbody>
					<tr *ngFor="let accessItem of accessItemsGroups.controls; let index = index;" [formGroupName]="index">
						<td>
							<button type="button" (click)="remove(index)" data-toggle="tooltip" title="Remove" class="btn btn-default remove">
								<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
							</button>
						</td>
						<td *ngIf="accessIdField.lookupField else accessIdInput" class="input-group text-align text-width taskana-type-ahead"
						 [ngClass]="{
							'has-warning': (accessItemsClone[index].accessId !== accessItem.value.accessId),
							'has-error': !accessItem.value.accessId }">
							<taskana-type-ahead formControlName="accessId" placeHolderMessage="* Access id is required" [validationValue]="toogleValidationAccessIdMap.get(index)"
							 [displayError]="!isFieldValid('accessItem.value.accessId', index)" (onSelect)="accessItemSelected($event, index)"></taskana-type-ahead>
						</td>
						<ng-template #accessIdInput>
							<td class="input-group text-align text-width">
								<div [ngClass]="{ 'has-warning': (accessItemsClone[index].accessId !==accessItem.value.accessId), 'has-error':
							 !accessItem.value.accessId && formSubmitAttempt}">
									<input type="text" class="form-control" formControlName="accessId" placeholder="{{accessItem.invalid?
							 '* Access id is required': ''}}"
									 [@validation]="toogleValidationAccessIdMap.get(index)">
								</div>
							</td>
						</ng-template>
						<td>
							<input id="checkbox-{{index}}-00" type="checkbox" (change)="checkAll(index, $event)">
							<label for="checkbox-{{index}}-00"></label>
						</td>
						<td [ngClass]="{ 'has-changes': (accessItemsClone[index].permRead !== accessItem.value.permRead)}">
							<input id="checkbox-{{index}}-0" type="checkbox" formControlName="permRead" class="regular-checkbox">
							<label for="checkbox-{{index}}-0"></label>
						</td>
						<td [ngClass]="{ 'has-changes': (accessItemsClone[index].permOpen !== accessItem.value.permOpen)}">
							<input id="checkbox-{{index}}-1" type="checkbox" formControlName="permOpen">
							<label for="checkbox-{{index}}-1"></label>
						</td>
						<td [ngClass]="{ 'has-changes': (accessItemsClone[index].permAppend !== accessItem.value.permAppend)}">
							<input id="checkbox-{{index}}-2" type="checkbox" formControlName="permAppend">
							<label for="checkbox-{{index}}-2"></label>
						</td>
						<td [ngClass]="{ 'has-changes': (accessItemsClone[index].permTransfer !== accessItem.value.permTransfer)}">
							<input id="checkbox-{{index}}-3" type="checkbox" formControlName="permTransfer">
							<label for="checkbox-{{index}}-3"></label>
						</td>
						<td [ngClass]="{ 'has-changes': (accessItemsClone[index].permDistribute !== accessItem.value.permDistribute)}">
							<input id="checkbox-{{index}}-4" type="checkbox" formControlName="permDistribute">
							<label for="checkbox-{{index}}-4"></label>
						</td>
						<td *ngIf="custom1Field.visible" [ngClass]="{ 'has-changes': (accessItemsClone[index].permCustom1 !== accessItem.value.permCustom1)}">
							<input id="checkbox-{{index}}-5" type="checkbox" formControlName="permCustom1">
							<label for="checkbox-{{index}}-5"></label>
						</td>
						<td *ngIf="custom2Field.visible" [ngClass]="{ 'has-changes': (accessItemsClone[index].permCustom2 !== accessItem.value.permCustom2)}">
							<input id="checkbox-{{index}}-6" type="checkbox" formControlName="permCustom2">
							<label for="checkbox-{{index}}-6"></label>
						</td>
						<td *ngIf="custom3Field.visible" [ngClass]="{ 'has-changes': (accessItemsClone[index].permCustom3 !== accessItem.value.permCustom3)}">
							<input id="checkbox-{{index}}-7" type="checkbox" formControlName="permCustom3">
							<label for="checkbox-{{index}}-7"></label>
						</td>
						<td *ngIf="custom4Field.visible" [ngClass]="{ 'has-changes': (accessItemsClone[index].permCustom4 !== accessItem.value.permCustom4)}">
							<input id="checkbox-{{index}}-8" type="checkbox" formControlName="permCustom4">
							<label for="checkbox-{{index}}-8"></label>
						</td>
						<td *ngIf="custom5Field.visible" [ngClass]="{ 'has-changes': (accessItemsClone[index].permCustom5 !== accessItem.value.permCustom5)}">
							<input id="checkbox-{{index}}-9" type="checkbox" formControlName="permCustom5">
							<label for="checkbox-{{index}}-9"></label>
						</td>
						<td *ngIf="custom6Field.visible" [ngClass]="{ 'has-changes': (accessItemsClone[index].permCustom6 !== accessItem.value.permCustom6)}">
							<input id="checkbox-{{index}}-10" type="checkbox" formControlName="permCustom6">
							<label for="checkbox-{{index}}-10"></label>
						</td>
						<td *ngIf="custom7Field.visible" [ngClass]="{ 'has-changes': (accessItemsClone[index].permCustom7 !== accessItem.value.permCustom7)}">
							<input id="checkbox-{{index}}-11" type="checkbox" formControlName="permCustom7">
							<label for="checkbox-{{index}}-11"></label>
						</td>
						<td *ngIf="custom8Field.visible" [ngClass]="{ 'has-changes': (accessItemsClone[index].permCustom8 !== accessItem.value.permCustom8)}">
							<input id="checkbox-{{index}}-12" type="checkbox" formControlName="permCustom8">
							<label for="checkbox-{{index}}-12"></label>
						</td>
						<td *ngIf="custom9Field.visible" [ngClass]="{ 'has-changes': (accessItemsClone[index].permCustom9 !== accessItem.value.permCustom9)}">
							<input id="checkbox-{{index}}-13" type="checkbox" formControlName="permCustom9">
							<label for="checkbox-{{index}}-13"></label>
						</td>
						<td *ngIf="custom10Field.visible" [ngClass]="{ 'has-changes': (accessItemsClone[index].permCustom10 !== accessItem.value.permCustom10)}">
							<input id="checkbox-{{index}}-14" type="checkbox" formControlName="permCustom10">
							<label for="checkbox-{{index}}-14"></label>
						</td>
						<td *ngIf="custom11Field.visible" [ngClass]="{ 'has-changes': (accessItemsClone[index].permCustom11 !== accessItem.value.permCustom11)}">
							<input id="checkbox-{{index}}-15" type="checkbox" formControlName="permCustom11">
							<label for="checkbox-{{index}}-15"></label>
						</td>
						<td *ngIf="custom12Field.visible" [ngClass]="{ 'has-changes': (accessItemsClone[index].permCustom12 !== accessItem.value.permCustom12)}">
							<input id="checkbox-{{index}}-16" type="checkbox" formControlName="permCustom12">
							<label for="checkbox-{{index}}-16"></label>
						</td>
					</tr>
				</tbody>
			</table>
		</form>
		<button id="button-add-access-item" type="button" (click)="addAccessItem()" class="btn btn-default" data-toggle="tooltip"
		 title="Add new access">
			<span class="glyphicon glyphicon-plus green-blue" aria-hidden="true"></span>
			Add new access
		</button>
		<taskana-spinner [isRunning]="requestInProgress" [positionClass]=""></taskana-spinner>
	</div>
</div>