<div *ngIf="!hideCaptureProfileButton" class="button-container horizontal-center">
  <capture-profile></capture-profile>
  <capture-kernel></capture-kernel>
</div>

<!-- TODO(bhupendradubey): Rename internal variables and function names (e.g., `runs`, `selectedRun`, `onRunSelectionChange`) to use `session` instead of `run` for consistency. -->
<div class="item-container">
  <div [ngClass]="{'mat-subheading-2': true, 'disabled': !runs.length}">
    Sessions ({{runs.length}})
  </div>

  <mat-form-field class="full-width" appearance="outline">
    <mat-select panelClass="panel-override" [value]="selectedRun" [disabled]="!runs.length" (selectionChange)="onRunSelectionChange($event.value)">
      <mat-option *ngFor="let run of runs" [value]="run">
        {{run}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

<div class="item-container">
  <div [ngClass]="{'mat-subheading-2': true, 'disabled': !tags.length}">
    Tools ({{tags.length}})
  </div>

  <mat-form-field class="full-width" appearance="outline">
    <mat-select panelClass="panel-override" [value]="selectedTag" [disabled]="!tags.length" (selectionChange)="onTagSelectionChange($event.value)">
      <mat-option *ngFor="let tag of tags" [value]="tag">
        {{getDisplayTagName(tag)}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

<div class="item-container" *ngIf="!isMultiHostsEnabled">
  <div [ngClass]="{'mat-subheading-2': true, 'disabled': !hosts.length}">
    Hosts ({{hosts.length}})
  </div>
  <mat-form-field class="full-width" appearance="outline">
    <mat-select #singleSelectHost="matSelect" panelClass="panel-override" [value]="selectedHost" [disabled]="!hosts.length" (selectionChange)="onHostSelectionChange($event.value)">
      <mat-option *ngFor="let host of hosts" [value]="host">
        {{host}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

<div class="item-container" *ngIf="isMultiHostsEnabled">
  <div [ngClass]="{'mat-subheading-2': true, 'disabled': !hosts.length}">
    Hosts ({{selectedHostsInternal.length}})
  </div>
  <mat-form-field class="full-width" appearance="outline">
    <mat-select #multiSelectHost="matSelect" panelClass="multi-host-select-panel" [value]="selectedHostsPending" [disabled]="!hosts.length" (selectionChange)="onHostsSelectionChange($event.value)" multiple>
      <div class="sticky-header" (click)="$event.stopPropagation()">
        <mat-checkbox class="select-all-checkbox"
                      [checked]="allHostsSelected"
                      (change)="onToggleSelectAllHosts($event)">
          {{ allHostsSelected ? 'De-select All Hosts' : 'Select All Hosts' }}
        </mat-checkbox>
      </div>
      <mat-option *ngFor="let host of hosts" [value]="host">
        {{host}}
      </mat-option>
      <div class="sticky-footer" (click)="$event.stopPropagation()">
        <button mat-flat-button color="primary" class="full-width" (click)="onSubmitHosts(); multiSelectHost.close()">
          Apply Host Selection
        </button>
      </div>
    </mat-select>
  </mat-form-field>
</div>

<!-- TODO(xprof): Remove module selector from sidenav once it's been moved to the memory viewer control. -->
<div [hidden]="!is_hlo_tool" class="item-container">
  <div [ngClass]="{'mat-subheading-2': true, 'disabled': !moduleList.length}">
    Hlo Modules ({{moduleList.length}})
  </div>
  <mat-form-field class="full-width" appearance="outline">
    <mat-select panelClass="panel-override" [value]="selectedModule" [disabled]="!moduleList.length" (selectionChange)="onModuleSelectionChange($event.value)">
      <mat-option *ngFor="let module of moduleList" [value]="module">
        {{module}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

<!-- TODO(xprof): Remove buffer details from sidenav once it's been moved to the memory viewer control. -->
<div [hidden]="!selectedTag.startsWith('memory_viewer')">
  <buffer-details></buffer-details>
</div>

<div [hidden]="!selectedTag.startsWith('pod_viewer')">
  <pod-viewer-details></pod-viewer-details>
</div>

<br>
