<div class="inner-scroll d-flex d-col">
  <div class="card-header large-padding separator sticky-top">
    <h4 class="card-title" translate>Installed software</h4>
  </div>
  <div class="flex-grow">
    <fieldset *ngIf="deviceSoftwareChangesOperation" class="card-block large-padding bg-gray-lighter">
      <c8y-single-operation [operation]="deviceSoftwareChangesOperation"></c8y-single-operation>
    </fieldset>

    <fieldset class="d-contents" [disabled]="deviceSoftwareChangesInProgress">
      <!-- EMPTY STATE -->
      <div class="card-block" *ngIf="softwareList.length === 0">
        <div class="c8y-empty-state text-center m-t-16">
          <h1 class="c8y-icon c8y-icon-tools c8y-icon-duocolor"></h1>
          <p>
            <strong translate>No software installed.</strong> <br />
            <small translate>Click below to install software into this device.</small>
          </p>
        </div>
      </div>

      <!-- NOT EMPTY STATE -->
      <ng-container *ngIf="softwareList.length > 0">
        <c8y-device-software-list
          [device]="device"
          [softwareList]="softwareList"
          [deviceSoftwareChanges]="deviceSoftwareChanges"
          (update)="updateSoftware($event)"
          (remove)="removeSoftware($event)"
          class="d-block p-l-16 p-r-16"
        >
        </c8y-device-software-list>
      </ng-container>
    </fieldset>
  </div>
  <!-- INSTALL SOFTWARE-->
  <div *ngIf="supportsSoftwareOperations" class="card-footer large-padding separator sticky-bottom">
    <button
      class="btn btn-default"
      title="{{ 'Install software' | translate }}"
      (click)="installSoftware()"
      [disabled]="deviceSoftwareChangesInProgress"
    >
      <i c8yIcon="plus-circle"></i>
      {{ 'Install software' | translate }}
    </button>
  </div>
</div>