<div class="hyperv-select-wrapper">
  <mat-form-field *ngIf="summary && summary.hypervisors && summary.hypervisors.length" class="full-width hypervisor-selector">
    <mat-label i18n>Select hypervisor</mat-label>
    <mat-select [(ngModel)]="selectedHypervisorSummary" (ngModelChange)="newHypervisorSelected()">
      <mat-option *ngFor="let hypervisorSummary of summary.hypervisors" [value]="hypervisorSummary">
        {{ hypervisorSummary.label }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

<mat-tab-group [(selectedIndex)]="selectedTab" [dir]="languageService.langDirection">
  <mat-tab label="Hypervisor details" *ngIf="selectedHypervisorSummary && selectedHypervisorSummary.status">
    <div align="center">
      <table class="full-width table-adjust" mat-table
           [dataSource]="[selectedHypervisorSummary]">
        <ng-container matColumnDef="status">
          <th mat-header-cell *matHeaderCellDef i18n>Status</th>
          <td mat-cell *matCellDef="let element"> {{element.status}} </td>
        </ng-container>
        <ng-container matColumnDef="type">
          <th mat-header-cell *matHeaderCellDef><span class="fl-float-right" i18n>Type</span></th>
          <td mat-cell *matCellDef="let element"><span class="fl-float-right">{{element.type}}</span></td>
        </ng-container>
        <ng-container matColumnDef="hostip">
          <th mat-header-cell *matHeaderCellDef><span class="fl-float-right" i18n>Host IP</span></th>
          <td mat-cell *matCellDef="let element"><span class="fl-float-right">{{element.host_ip}}</span></td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="['status', 'type', 'hostip']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['status', 'type', 'hostip'];"></tr>
      </table>
    </div>
  </mat-tab>
  <mat-tab label="Memory">
    <div align="center">
      <canvas #memoryGraph height="260">
      </canvas>
      <div #legendMemory class="chart-legend-wrap"></div>
    </div>
  </mat-tab>
  <mat-tab label="Disk">
    <div align="center">
      <canvas #diskGraph height="260">
      </canvas>
      <div #legendDisk class="chart-legend-wrap"></div>
    </div>
  </mat-tab>
  <mat-tab label="vCPU">
    <div align="center">
      <canvas #vcpuGraph height="260">
      </canvas>
      <div #legendVcpu class="chart-legend-wrap"></div>
    </div>
  </mat-tab>
</mat-tab-group>

