<ng-container *ngIf="!selectedVersionManifest && !isLoading">
  <div class="p-16">
    <c8y-ui-empty-state
      [icon]="'big-parcel'"
      [title]="'No package selected' | translate"
      [subtitle]="'Select a package from the list to display the package contents.' | translate"
      [horizontal]="true"
    ></c8y-ui-empty-state>
  </div>
</ng-container>

<ng-container *ngIf="isLoading">
  <c8y-loading></c8y-loading>
</ng-container>

<ng-container *ngIf="selectedVersionManifest && !isLoading">
  <!-- DETAILS -->
  <div class="card-block">
    <c8y-properties-list
      [data]="selectedVersionManifest"
      [emptyLabel]="'--'"
      [properties]="packageVersionProperties"
    ></c8y-properties-list>

    <!-- APPS -->
    <c8y-contents-apps
      class="p-t-16 d-block"
      [selectedVersionManifest]="selectedVersionManifest"
    ></c8y-contents-apps>

    <!-- PLUGINS -->
    <c8y-contents-plugins
      class="p-t-16 d-block"
      [selectedVersionManifest]="selectedVersionManifest"
      [selectedPlugin]="selectedPlugin"
      (showOverview)="showPluginOverview($event)"
    ></c8y-contents-plugins>

    <!-- CHANGELOG -->
    <p class="legend form-block">
      {{ 'Change log' | translate }}
    </p>

    <c8y-contents-changelog
      [package]="package"
      [selectedVersion]="selectedVersion"
      [previousVersion]="previousVersion"
    ></c8y-contents-changelog>
  </div>
</ng-container>