<!--
  ~ 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">
      {{selectedRolesList()}}
    </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)}"></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>
              {{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'" >
            <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions($event, model, item)">
              <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">
                <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>
              </span>
              {{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)}"></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>
              {{item.cloud || 'AWS'}}
            </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($event, model, item)">
              <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">
                <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>
              </span>
              {{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>