<c8y-li [ngClass]="{ disabled: plugin.installed }" class="bg-inherit">
  <c8y-li-checkbox
    (change)="onChange($event.target.checked)"
    *ngIf="selectable"
    [disabled]="plugin.installed"
    class="p-r-0 p-l-0"
  ></c8y-li-checkbox>
  <c8y-li-icon>
    <i class="c8y-plugin-icon">
      <span>{{ plugin.name?.substr(0, 2) }}</span>
    </i>
  </c8y-li-icon>
  <c8y-li-body class="d-flex">
    <div class="p-r-8">
      <p>
        <span class="text-medium">{{ plugin.name }}</span>
        <em class="text-muted small m-l-8">{{ plugin.version }}</em>
        <span *ngIf="plugin.installed">
          <i [c8yIcon]="'check-circle'" class="text-success"></i>
          <em class="text-muted small" translate>Installed`plugins`</em>
        </span>
      </p>
      <p class="small l-h-tight">{{ plugin.description }}</p>
    </div>
    <span *ngIf="selectable" class="label label-info m-l-auto a-s-start">{{
      plugin.contextPath
    }}</span>
  </c8y-li-body>
</c8y-li>