<c8y-list-group class="no-border-last">
  <c8y-li
    [ngClass]="{ disabled: isSoftwareGoingToBeChanged(software) }"
    *c8yFor="let software of softwareItems$"
  >
    <!-- 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-9">
        <p class="d-flex">
          <!-- SOFTWARE NAME -->
          <span class="text-truncate">
            {{ software.name }}
          </span>
          <!-- SOFTWARE TYPE-->
          <span class="text-truncate">
            <span class="label label-primary m-l-8">{{ software.softwareType }}</span>
          </span>
        </p>
        <!-- SOFTWARE VERSION -->
        <p class="d-flex a-i-center">
          <span class="text-truncate text-label-small m-r-4" translate> Version </span>
          <span class="text-truncate m-r-4" title="{{ software.version }}">
            {{ software.version }}
          </span>
          <i
            *ngIf="software.installed"
            c8yIcon="warning"
            class="text-warning a-s-center"
            [tooltip]="
              alreadyInstalledMessage
                | translate: { name: software.name, version: software.version }
            "
            container="body"
            placement="top"
          ></i>
        </p>
      </div>

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

        <!-- REMOVE SOFTWARE -->
        <button
          *ngIf="showRemove && !isSoftwareGoingToBeChanged(software)"
          class="btn btn-dot showOnHover m-l-4"
          (click)="remove.emit(software)"
          tooltip="{{ 'Remove`software,verb`' | translate }}"
          placement="bottom"
          container="body"
        >
          <i c8yIcon="minus-circle" class="text-danger"></i>
        </button>
      </div>
    </c8y-li-body>
  </c8y-li>
</c8y-list-group>
<!-- NO SEARCH RESULTS STATE -->
<div class="card-block" *ngIf="noSearchResults || emptyList">
  <ng-content *ngIf="emptyList" select=".c8y-empty-state:not(.c8y-no-results-state)"></ng-content>
  <ng-content *ngIf="noSearchResults" select=".c8y-no-results-state"></ng-content>
</div>