<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    title="{{ 'Reload' | translate }}"
    (click)="loadDevice()"
  >
    <i
      c8yIcon="refresh"
      [ngClass]="{ 'icon-spin': reloading }"
    ></i>
    {{ 'Reload' | translate }}
  </button>
</c8y-action-bar-item>

<div class="card split-view--7-5 m-b-0">
  <c8y-installed-software
    class="split-view__list"
    [device]="device$ | async"
    [typesQuery]="typesQuery$ | async"
    [softwareList]="list$ | async"
    [deviceSoftwareChanges]="changes$ | async"
    [deviceSoftwareChangesInProgress]="changesInProgress$ | async"
    (changes)="addChanges($event)"
    (showSoftwareChanges)="showSoftwareChanges = true"
  ></c8y-installed-software>
  <c8y-device-software-changes
    class="bg-level-1 split-view__detail"
    [ngClass]="{ 'split-view__detail--selected': showSoftwareChanges }"
    [deviceSoftwareChangesOperation]="changesOperation$ | async"
    [changes]="changes$ | async"
    [changesInProgress]="changesInProgress$ | async"
    (clear)="clearChanges()"
    (drop)="dropChange($event)"
    (apply)="applyChanges()"
    (hideSoftwareChanges)="showSoftwareChanges = false"
  ></c8y-device-software-changes>
</div>