<c8y-list-group class="no-border-2nd-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"
            [delay]="500"
          ></i>
        </p>
      </div>

      <div
        *ngIf="supportsSoftwareOperations && (showUpdate || showRemove)"
        class="col-3 text-right m-0 flex-grow d-flex a-i-center"
      >
        <!-- UPDATE SOFTWARE -->
        <button
          class="btn btn-default btn-xs m-l-auto m-r-4"
          type="button"
          title="{{ 'Update`software,verb`' | translate }}"
          *ngIf="showUpdate && !isSoftwareGoingToBeChanged(software)"
          (click)="update.emit(software)"
          c8yProductExperience
          [actionName]="PRODUCT_EXPERIENCE.SOFTWARE.EVENTS.DEVICE_TAB"
          [actionData]="{
            component: PRODUCT_EXPERIENCE.SOFTWARE.COMPONENTS.DEVICE_SOFTWARE_LIST,
            action: PRODUCT_EXPERIENCE.SOFTWARE.ACTIONS.OPEN_UPDATE_SOFTWARE
          }"
        >
          {{ 'Update`software,verb`' | translate }}
        </button>

        <!-- REMOVE SOFTWARE -->
        <button
          class="btn btn-dot btn-dot--danger m-l-4"
          type="button"
          [attr.aria-label]="'Remove`software,verb`' | translate"
          tooltip="{{ 'Remove`software,verb`' | translate }}"
          placement="bottom"
          container="body"
          [delay]="500"
          c8yProductExperience
          [actionName]="PRODUCT_EXPERIENCE.SOFTWARE.EVENTS.DEVICE_TAB"
          [actionData]="{
            component: PRODUCT_EXPERIENCE.SOFTWARE.COMPONENTS.DEVICE_SOFTWARE_LIST,
            action: PRODUCT_EXPERIENCE.SOFTWARE.ACTIONS.DELETE_SOFTWARE
          }"
          *ngIf="showRemove && !isSoftwareGoingToBeChanged(software)"
          (click)="remove.emit(software)"
        >
          <i c8yIcon="minus-circle"></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>