<c8y-title>{{ package?.name | humanizeAppName | async }}</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item [icon]="'c8y-atom'" [label]="'Ecosystem' | translate"></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'big-parcel'"
    [label]="'Extensions' | translate"
    [path]="'ecosystem/extension/extensions'"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="package?.name | humanizeAppName | async"></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="'Versions' | translate"></c8y-breadcrumb-item>
</c8y-breadcrumb>

<div class="card content-fullpage split-view--5-7 grid__row--1">
  <c8y-package-versions-list
    class="d-contents"
    (onVersionSelect)="selectVersion($event)"
  ></c8y-package-versions-list>

  <div
    class="inner-scroll split-view__detail"
    [ngClass]="{ 'split-view__detail--selected': selectedVersion }"
  >
    <div class="large-padding card-header separator visible-sm visible-xs fit-w sticky-top">
      <div class="d-flex a-i-center">
        <button
          title="{{ 'Back' | translate }}"
          class="btn btn-clean text-primary m-r-8"
          (click)="clearSelectedVersion()"
        >
          <i c8yIcon="chevron-left"></i>
          <span translate>Back</span>
        </button>
        <div class="card-title" translate>Package contents</div>
      </div>
    </div>
    <div class="card-header large-padding separator sticky-top visible-md visible-lg">
      <div class="card-title" translate>Package contents</div>
    </div>
    <div class="inner-scroll split-view__list">
      <c8y-package-contents [selectedVersion]="selectedVersion"></c8y-package-contents>
    </div>
  </div>
</div>