<!--
  ~ 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 fxFlex="100" fxLayout="column" class="border">
    <div class="editorIconStandOptions" style="padding:0px;">
        <div fxFlex="100" fxLayout="row" fxLayoutAlign="start start" style="padding-top:2px;padding-left:10px;">

            <div fxLayoutAlign="start center" fxLayout="row">
                <div fxLayout="row" style="margin-right: 5px">
                    <i class="material-icons">search</i>
                    <input type="text" (keyup)="applyFilter()" [(ngModel)]="elementFilter" placeholder="Find Element"
                           style="background-color:#f6f6f6;border: none;border-bottom: solid 2px rgb(27, 20, 100);">&nbsp;
                </div>
                <div fxLayout="row">
                    <button mat-button [matMenuTriggerFor]="menu"><div class="menu-text-color"><i class="material-icons">list</i>&nbsp;Filter by category</div></button>
                    <mat-menu #menu="matMenu">
                        <button mat-menu-item (click)="selectAllOptions()">
                            <div class="menu-text-color"><i class="material-icons">done</i>&nbsp;Select all</div>
                        </button>
                        <button mat-menu-item (click)="deselectAllOptions()">
                            <div class="menu-text-color"><i class="material-icons">clear</i>&nbsp;Deselect all</div>
                        </button>
                        <mat-divider></mat-divider>
                        <button (click)="toggleOption(option)" mat-menu-item *ngFor="let option of currentCategories">
                            <div class="menu-text-color" *ngIf="optionSelected(option)">
                                <i class="material-icons">visibility</i>&nbsp;{{option.label}}
                            </div>
                            <div  class="menu-text-color" *ngIf="!optionSelected(option)">
                                <i class="material-icons">visibility_off</i>&nbsp;{{option.label}}
                            </div>
                        </button>
                    </mat-menu>
                </div>
            </div>
        </div>
    </div>
    <div flex id="editor-icon-stand" class="icon-stand" *ngIf="currentlyFilteredElements">
        <span matTooltip="{{element.name}}" [matTooltipPosition]="'above'" [matTooltipClass]="tooltip" id="{{ element.appId }}" (mouseenter)="updateMouseOver(element.name)"
              (mouseleave)="updateMouseOver('')"
              *ngFor="let element of currentlyFilteredElements"
              class="draggable-icon tt"
              [attr.data-pe]="element.elementId"
              [ngClass]="activeCssClass">
            <span id="container" style="position:relative;display:block;width:80px;height:80px;">
            <pipeline-element id="pe-icon-stand-{{ element.appId }}" style="margin-left:-3%" [iconStandSize]="true" [pipelineElement]="element"
                              [preview]="false"></pipeline-element>
                <span style="display:block;width:100%;height:100%;position:absolute; top:0; left:0;"
                      *ngIf="currentElementName===element.name">
                    <span class="help-button-icon-stand" style="z-index:10"><button mat-button mat-icon-button
                            (click)="openHelpDialog(element)"
                            style="margin:0px;font-size:20px;">?</button>
                    </span>
                </span>
            </span>
        </span>
    </div>
</div>