<div id="sidebar">
  <div class="search">
    <input class="left-search" placeholder=" Search ..." maxlength="2048" name="q" autocomplete="off"
           title="Search"
           type="text" tabindex="1" spellcheck="false" autofocus [(ngModel)]="q" (keyup.enter)="Search(q)">
  </div>
  <div class="overflow">
    <ul class="filetree">
      <li *ngFor="let hostGroup of HostGroups | SearchFilter: q; let i = index ">
        <input type="checkbox" id="hostgroup-{{i}}">
        <label for="hostgroup-{{i}}" matTooltip="{{hostGroup.name}}" [matTooltipPosition]="TooltipPosition">{{hostGroup.name}}</label>
        <ul [ngClass]="{'insearch': q }">
          <li *ngFor="let host of hostGroup.assets_granted | SearchFilter: q" (click)="Connect(host)"
              (contextmenu)="onRightClick($event)" matTooltip="{{host.hostname}}"
              [matTooltipPosition]="TooltipPosition">
            <i class="fa" [ngClass]="'fa-'+(host.platform||'undefined').toLowerCase()" id="fa-{{i}}"></i>
            {{host.hostname}}
          </li>
        </ul>
      </li>
    </ul>
  </div>

</div>
<div class="footer">
  Version <strong>{{version}}</strong>
</div>
<!--<app-element-server-menu></app-element-server-menu>-->