<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<div class="dropdown-multiselect btn-group" ngClass="{{type || ''}}">
  <button type="button" #list (click)="multiactions.toggle($event, list)">
    <span class="ellipsis" *ngIf="model.length === 0">Select roles</span>
    <span class="selected-items ellipsis" *ngIf="model.length !== 0">
      {{selectedList?.length ? selectedList : getSelectedRolesList()}}
    </span>
    <span class="caret-btn"><i class="material-icons">keyboard_arrow_down</i></span>
  </button>

  <bubble-up #multiactions position="bottom" [keep-open]="true" class="mt-5">
    <ul class="list-menu" id="scrolling">
      <li class="filter-actions">
        <a class="select_all" (click)="selectAllOptions($event)">
          <i class="material-icons">playlist_add_check</i>&nbsp;All
        </a>
        <a class="deselect_all" (click)="deselectAllOptions($event)">
          <i class="material-icons">clear</i>&nbsp;None
        </a>
      </li>

      <ng-template  ngFor let-item [ngForOf]="items" let-i="index">
        <li class="role-label" role="presentation" *ngIf="i === 0 || model && item.type !== items[i - 1].type" (click)="toggleItemsForLable(item.type, $event)" >
          <a href="#" class="list-item" role="menuitem">
            <span class="arrow" [ngClass]="{'rotate-arrow': isOpenCategory[item.type], 'arrow-checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}">
              <i class="material-icons">keyboard_arrow_right</i>
            </span>
            <!--              <span class="empty-checkbox" [ngClass]="{'checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}" (click)="toggleselectedCategory($event, model, item.type);$event.stopPropagation()" >-->
            <!--                <span class="checked-checkbox" *ngIf="selectedAllInCattegory(item.type)"></span>-->
            <!--                <span class="line-checkbox" *ngIf="selectedSomeInCattegory(item.type)"></span>-->
            <!--              </span>-->
            <datalab-checkbox
              class="header-checkbox"
              [checked]="selectedAllInCattegory(item.type)"
              [someChecked]="selectedSomeInCattegory(item.type)"
              (toggleSelection)="toggleselectedCategory(model, item.type)"
            ></datalab-checkbox>
            {{labels[item.type] || item.type | titlecase}}
          </a>
        </li>

        <li 
          class="role-item"
          role="presentation"
          *ngIf="model && isOpenCategory[item.type] && item.type !== 'COMPUTATIONAL_SHAPE' && item.type !== 'NOTEBOOK_SHAPE'"
          [hidden]="!isAdmin && item.role === 'Allow to execute administration operation'"
        >
          <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions(model, item, $event)">
            <!--              <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">-->
            <!--                <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>-->
            <!--              </span>-->
            <datalab-checkbox
              class="header-checkbox"
              [checked]="checkInModel(item.role)"
              (toggleSelection)="toggleSelectedOptions(model, item)"
            ></datalab-checkbox>
            {{item.role}}
          </a>
        </li>
        <li 
          class="role-item" 
          role="presentation" 
          (click)="toggleItemsForCloud(item.type + item.cloud, $event)"
          *ngIf="model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.cloud !== items[i - 1].cloud
            || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.type !== items[i - 1].type
            || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.cloud !== items[i - 1].cloud
            || model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.type !== items[i - 1].type"
        >
          <a href="#" class="list-item" role="menuitem">
            <span class="arrow" [ngClass]="{'rotate-arrow': isCloudOpen[item.type + item.cloud], 'arrow-checked': selectedAllInCloud(item.type, item.cloud) || selectedSomeInCloud(item.type, item.cloud)}">
                <i class="material-icons">keyboard_arrow_right</i>
            </span>
            <!--              <span class="empty-checkbox"-->
            <!--                    [ngClass]="{-->
            <!--                    'checked': selectedAllInCloud(item.type, item.cloud)-->
            <!--                    || selectedSomeInCloud(item.type, item.cloud)}"-->
            <!--                    (click)="toggleSelectedCloud($event, model, item.type, item.cloud);-->
            <!--                    $event.stopPropagation()"-->
            <!--              >-->
            <!--                <span class="checked-checkbox" *ngIf="selectedAllInCloud(item.type, item.cloud)"></span>-->
            <!--                <span class="line-checkbox" *ngIf="selectedSomeInCloud(item.type, item.cloud)"></span>-->
            <!--              </span>-->
            <datalab-checkbox
              class="header-checkbox"
              [checked]="selectedAllInCloud(item.type, item.cloud)"
              [someChecked]="selectedSomeInCloud(item.type, item.cloud)"
              (toggleSelection)="toggleSelectedCloud(model, item.type, item.cloud)"
            ></datalab-checkbox>
            {{item.cloud}}
          </a>
        </li>
        <li class="role-cloud-item" role="presentation" *ngIf="model && isCloudOpen[item.type + item.cloud] && isOpenCategory[item.type]" >
          <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions( model, item, $event)">
            <!--              <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">-->
            <!--                <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>-->
            <!--              </span>-->
            <datalab-checkbox
              class="header-checkbox"
              [checked]="checkInModel(item.role)"
              (toggleSelection)="toggleSelectedOptions(model, item)"
            ></datalab-checkbox>
            {{item.role}}
          </a>
        </li>

      </ng-template>

      <li *ngIf="items?.length == 0">
        <a role="menuitem" class="list-item">
          <span class="material-icons">visibility_off</span>
          No {{type}}
        </a>
      </li>
    </ul>
  </bubble-up>
</div>