<p class="legend form-block">
  {{ 'Application' | translate }}
</p>

<div  *ngIf="selectedVersionManifest?.name; else emptyApp">
  <c8y-li>
    <c8y-li-icon icon="big-parcel"></c8y-li-icon>
    <h5 class="text-medium text-16 p-b-8">
      {{ selectedVersionManifest?.name | humanizeAppName | async }}
      <small class="m-l-8" *ngIf="selectedVersionManifest?.requiredPlatformVersion">
        <em>{{ selectedVersionManifest?.requiredPlatformVersion }}</em>
      </small>
    </h5>
    <p *ngIf="selectedVersionManifest?.description; else notAvailable">
      {{ selectedVersionManifest?.description }}
    </p>
  </c8y-li>
</div>

<ng-template #notAvailable>
  <p class="text-muted">
    <em>{{ 'No description available.' | translate }}</em>
  </p>
</ng-template>

<ng-template #emptyApp>
  <c8y-ui-empty-state
  [icon]="'big-parcel'"
  [horizontal]="true"
  [title]="'No application.' | translate"
  [subtitle]="'This package doesn\'t contain an application.' | translate"
  ></c8y-ui-empty-state>
</ng-template>