<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-header">Acces items management</h4>
  </div>
  <div class="panel-body">
    <div class="col-md-6 col-md-offset-3 margin">
      <taskana-type-ahead #accesId="ngModel" name="accessIdSelected" [(ngModel)]="accessIdSelected" placeHolderMessage="Search for access id..."
        (onSelect)="onSelectAccessId($event)" displayError=true></taskana-type-ahead>
    </div>
    <div *ngIf="!AccessItemsForm" class="center-block no-detail col-xs-12">
      <h3 class="grey">Select an access id</h3>
      <svg-icon class="empty-icon" src="./assets/icons/users.svg"></svg-icon>
    </div>
    <div *ngIf="AccessItemsForm" class="row col-xs-12">
      <form [formGroup]="AccessItemsForm">
        <table id="table-access-items" class="table table-striped table-center">
          <thead>
            <tr>
              <th>
                <taskana-sort [sortingFields]="sortingFields" (performSorting)="sorting($event)" menuPosition="left"></taskana-sort>
              </th>
              <th class="text-align min-width">Workbasket Key</th>
              <th colspan="2" class="text-align">Access Id</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>
            <tr>
              <th colspan="2" class="text-align"><input type="text" formControlName="workbasketKeyFilter" (keyup.enter)="searchForAccessItemsWorkbaskets()"
                  class="form-control" placeholder="Workbasket filter"></th>
              <th class="text-align"><input type="text" formControlName="accessIdFilter" (keyup.enter)="searchForAccessItemsWorkbaskets()"
                  class="form-control" placeholder="Access id filter"></th>
              <th>
                <button type="button" (click)="searchForAccessItemsWorkbaskets()" class="btn btn-default" data-toggle="tooltip"
                  title="Search">
                  <span class="glyphicon glyphicon-search blue" aria-hidden="true"></span>
                </button>
              </th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
            </tr>
          </thead>
          <tbody formArrayName="accessItemsGroups">
            <tr *ngFor="let accessItem of accessItemsGroups.controls; let index = index;" [formGroupName]="index">
              <td colspan="2">
                <label class="wrap">{{accessItem.value.workbasketKey}}</label>
              </td>
              <td *ngIf="accessIdField.lookupField else accessIdInput" colspan="2" class="text-align text-width taskana-type-ahead">
                <div>
                  <taskana-type-ahead formControlName="accessId" placeHolderMessage="* Access id is required"
                    [validationValue]="toogleValidationAccessIdMap.get(index)" [displayError]="!isFieldValid('accessItem.value.accessId', index)"
                    [disable]=true></taskana-type-ahead>
                </div>
              </td>
              <ng-template #accessIdInput>
                <td colspan="2" class="text-align text-width">
                  <div>
                    <input type="text" class="form-control" formControlName="accessId" placeholder="{{accessItem.invalid?
                     '* Access id is required': ''}}">
                  </div>
                </td>
              </ng-template>
              <td>
                <input id="checkbox-{{index}}-0" type="checkbox" formControlName="permRead" class="regular-checkbox">
                <label for="checkbox-{{index}}-0"></label>
              </td>
              <td>
                <input id="checkbox-{{index}}-1" type="checkbox" formControlName="permOpen">
                <label for="checkbox-{{index}}-1"></label>
              </td>
              <td>
                <input id="checkbox-{{index}}-2" type="checkbox" formControlName="permAppend">
                <label for="checkbox-{{index}}-2"></label>
              </td>
              <td>
                <input id="checkbox-{{index}}-3" type="checkbox" formControlName="permTransfer">
                <label for="checkbox-{{index}}-3"></label>
              </td>
              <td>
                <input id="checkbox-{{index}}-4" type="checkbox" formControlName="permDistribute">
                <label for="checkbox-{{index}}-4"></label>
              </td>
              <td *ngIf="custom1Field.visible">
                <input id="checkbox-{{index}}-5" type="checkbox" formControlName="permCustom1">
                <label for="checkbox-{{index}}-5"></label>
              </td>
              <td *ngIf="custom2Field.visible">
                <input id="checkbox-{{index}}-6" type="checkbox" formControlName="permCustom2">
                <label for="checkbox-{{index}}-6"></label>
              </td>
              <td *ngIf="custom3Field.visible">
                <input id="checkbox-{{index}}-7" type="checkbox" formControlName="permCustom3">
                <label for="checkbox-{{index}}-7"></label>
              </td>
              <td *ngIf="custom4Field.visible">
                <input id="checkbox-{{index}}-8" type="checkbox" formControlName="permCustom4">
                <label for="checkbox-{{index}}-8"></label>
              </td>
              <td *ngIf="custom5Field.visible">
                <input id="checkbox-{{index}}-9" type="checkbox" formControlName="permCustom5">
                <label for="checkbox-{{index}}-9"></label>
              </td>
              <td *ngIf="custom6Field.visible">
                <input id="checkbox-{{index}}-10" type="checkbox" formControlName="permCustom6">
                <label for="checkbox-{{index}}-10"></label>
              </td>
              <td *ngIf="custom7Field.visible">
                <input id="checkbox-{{index}}-11" type="checkbox" formControlName="permCustom7">
                <label for="checkbox-{{index}}-11"></label>
              </td>
              <td *ngIf="custom8Field.visible">
                <input id="checkbox-{{index}}-12" type="checkbox" formControlName="permCustom8">
                <label for="checkbox-{{index}}-12"></label>
              </td>
              <td *ngIf="custom9Field.visible">
                <input id="checkbox-{{index}}-13" type="checkbox" formControlName="permCustom9">
                <label for="checkbox-{{index}}-13"></label>
              </td>
              <td *ngIf="custom10Field.visible">
                <input id="checkbox-{{index}}-14" type="checkbox" formControlName="permCustom10">
                <label for="checkbox-{{index}}-14"></label>
              </td>
              <td *ngIf="custom11Field.visible">
                <input id="checkbox-{{index}}-15" type="checkbox" formControlName="permCustom11">
                <label for="checkbox-{{index}}-15"></label>
              </td>
              <td *ngIf="custom12Field.visible">
                <input id="checkbox-{{index}}-16" type="checkbox" formControlName="permCustom12">
                <label for="checkbox-{{index}}-16"></label>
              </td>
            </tr>
          </tbody>
        </table>

        <button *ngIf="!isGroup" class="pull-left btn-group" type="button" class="btn btn-primary" data-toggle="modal"
          data-target="#myModal">
          Belonging groups
        </button>

        <div class="modal" id="myModal">
          <div class="modal-dialog">
            <div class="modal-content">

              <div class="modal-header">
                <h4 class="modal-title">Belonging groups</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>

              <div class="modal-body">
                <ul *ngIf="belongingGroups !== undefined && belongingGroups.length > 0 " class="list-group">
                  <li *ngFor="let group of belongingGroups" class="list-group-item">{{group.name}}</li>
                </ul>
                <p *ngIf="belongingGroups === undefined || belongingGroups.length === 0">The user is not associated to any groups</p>
              </div>

              <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
              </div>

            </div>
          </div>
        </div>
        <div class="pull-right btn-group">
          <button *ngIf="AccessItemsForm" type="button" class="btn btn-default" data-toggle="tooltip" title="Revoke access"
            [disabled]=isGroup>
            <span class="glyphicon glyphicon-remove red" aria-hidden="true"></span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
