<c8y-title>{{ titlePrefix | translate }}: {{ title | translate }}</c8y-title>

<ng-container *ngIf="status === 'connected'">
  <c8y-action-bar-item [placement]="'right'">
    <button
      class="btn btn-link"
      (click)="toggleFullscreen()"
    >
      <i [c8yIcon]="'expand'"></i>
      <span translate>Fullscreen</span>
    </button>
  </c8y-action-bar-item>

  <c8y-action-bar-item [placement]="'right'">
    <button
      class="btn btn-link"
      (click)="downloadScreenshot()"
    >
      <i [c8yIcon]="'download'"></i>
      <span translate>Screenshot</span>
    </button>
  </c8y-action-bar-item>

  <c8y-action-bar-item [placement]="'more'">
    <button
      class="btn btn-link"
      (click)="sendCtrlAltDel()"
    >
      <i [c8yIcon]="'keyboard'"></i>
      <span translate>Send Ctrl+Alt+Del</span>
    </button>
  </c8y-action-bar-item>
</ng-container>

<ng-container *ngIf="powerCapability && status === 'connected'">
  <c8y-action-bar-item [placement]="'more'">
    <button
      class="btn btn-link"
      (click)="sendShutDown()"
    >
      <i [c8yIcon]="'shutdown'"></i>
      <span translate>Shutdown</span>
    </button>
  </c8y-action-bar-item>

  <c8y-action-bar-item [placement]="'more'">
    <button
      class="btn btn-link"
      (click)="sendReboot()"
    >
      <i [c8yIcon]="'reset'"></i>
      <span translate>Reboot</span>
    </button>
  </c8y-action-bar-item>

  <c8y-action-bar-item [placement]="'more'">
    <button
      class="btn btn-link"
      (click)="sendReset()"
    >
      <i [c8yIcon]="'reset'"></i>
      <span translate>Reset</span>
    </button>
  </c8y-action-bar-item>
</ng-container>

<c8y-loading *ngIf="status === 'connecting'"></c8y-loading>

<div
  class="content-fullpage"
  [ngClass]="{ hidden: status !== 'connected' }"
>
  <div
    class="inner-scroll"
    id="vnc-screen"
  ></div>
</div>