<c8y-list-group class="no-border-last">
  <c8y-li
    [ngClass]="{ disabled: isSoftwareGoingToBeChanged(software) }"
    *ngFor="let software of softwareList"
  >
    <!-- SOFTWARE ICON -->
    <c8y-li-icon>
      <i c8yIcon="c8y-tools"></i>
    </c8y-li-icon>

    <c8y-li-body class="content-flex-20">
      <div title="{{ software.name }}" class="col-8">
        <!-- SOFTWARE NAME -->
        <p class="text-truncate">{{ software.name }}</p>
        <!-- SOFTWARE VERSION -->
        <p class="text-truncate">
          <span class="text-label-small m-r-4" translate>
            Version
          </span>
          <span title="{{ software.version }}">
            {{ software.version }}
          </span>
        </p>
      </div>

      <div
        *ngIf="supportsSoftwareOperations && (showUpdate || showRemove)"
        class="col-4 text-right"
      >
        <!-- UPDATE SOFTWARE -->
        <button
          *ngIf="showUpdate && !isSoftwareGoingToBeChanged(software)"
          class="btn btn-default btn-xs showOnHover"
          (click)="update.emit(software)"
          title="{{ 'Update`software,verb`' | translate }}"
          translate
        >
          Update
        </button>

        <!-- REMOVE SOFTWARE -->
        <button
          *ngIf="showRemove && !isSoftwareGoingToBeChanged(software)"
          title="{{ 'Remove`software`' | translate }}"
          class="showOnHover btn btn-dot pull-right"
          (click)="remove.emit(software)"
        >
          <i c8yIcon="minus-circle" class="text-danger"></i>
        </button>
      </div>
    </c8y-li-body>
  </c8y-li>
</c8y-list-group>