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

  <span
    class="label label-info a-s-start m-t-8"
    *ngIf="selectable && !hideSource"
  >
    {{ plugin.contextPath }}
  </span>
</div>