<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 d-grid"
  [ngClass]="{ 'grid__col--6-6-0': !selectedPlugin, 'grid__col--0-6-6': !!selectedPlugin }"
>
  <c8y-package-versions-list
    class="d-contents"
    (onVersionSelect)="selectVersion($event)"
  ></c8y-package-versions-list>

  <!-- Package contents -->
  <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
          class="btn-clean text-primary m-r-8"
          title="{{ 'Back' | translate }}"
          (click)="clearSelectedVersion()"
        >
          <i c8yIcon="chevron-left"></i>
          <span translate>Back</span>
        </button>
        <div class="card-title">
          {{ packageContentsTitle | translate: { selectedVersion } }}
        </div>
      </div>
    </div>
    <div class="card-header large-padding separator sticky-top visible-md visible-lg">
      <div class="card-title">
        <ng-container *ngIf="selectedVersion">
          {{ packageContentsTitle | translate: { selectedVersion } }}
        </ng-container>
      </div>
    </div>
    <div class="inner-scroll split-view__list">
      <c8y-package-contents
        [selectedVersion]="selectedVersion"
        [selectedPlugin]="selectedPlugin"
        (showOverview)="showPluginOverview($event)"
      ></c8y-package-contents>
    </div>
  </div>

  <!-- Plugin readme -->
  <div
    class="inner-scroll split-view__detail"
    [ngClass]="{ 'split-view__detail--selected': selectedPlugin }"
  >
    <div
      class="card-header separator sticky-top"
      *ngIf="selectedPlugin"
    >
      <button
        class="btn-clean"
        (click)="closeOverview()"
      >
        <i c8yIcon="caret-back"></i>
        {{ 'Back to package versions overview ' | translate }}
      </button>
    </div>
    <div
      class="card-block p-l-16 p-r-16 overflow-visible"
      *ngIf="selectedPlugin"
    >
      <div
        class="markdown-content"
        *ngIf="pluginMarkdown"
        [innerHTML]="pluginMarkdown | markdownToHtml: { baseUrl: pluginBaseUrl } | async"
      ></div>
      <c8y-ui-empty-state
        [icon]="'user-manual'"
        [title]="'No README.md found for plugin' | translate"
        [subtitle]="
          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the plugin.'
            | translate
        "
        *ngIf="!pluginMarkdown"
        [horizontal]="true"
      ></c8y-ui-empty-state>
    </div>
  </div>
</div>