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

<c8y-breadcrumb>
  <c8y-breadcrumb-item [icon]="'c8y-atom'" [label]="'Ecosystem' | translate"></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'c8y-modules'"
    [label]="'Applications' | translate"
    [path]="'ecosystem/applications'"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'big-parcel'"
    [label]="'Packages' | translate"
    [path]="'ecosystem/package-list'"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="name | humanizeAppName | async"></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="'Info' | translate"></c8y-breadcrumb-item>
</c8y-breadcrumb>

<div class="card content-fullpage d-grid grid__col--8-4--md grid__row--fit-auto">
  <div class="bg-gray-white grid__col--fullspan separator-bottom">
    <div class="card-block p-t-24 p-b-24 large-padding">
      <div class="content-flex-70">
        <div class="text-center">
          <i c8yIcon="big-parcel" class="c8y-icon-duocolor icon-48"></i>
          <p>
            <span [ngClass]="appState?.class" class="label">{{ appState?.label | translate }}</span>
          </p>
        </div>

        <div class="flex-grow col-10">
          <div class="content-flex-80">
            <div class="col-5">
              <h4 class="card-title text-bold m-b-8">{{ name | humanizeAppName | async }}</h4>
              <p *ngIf="description">{{ description }}</p>
              <p *ngIf="!description" class="text-muted">
                <em>{{ 'No description available.' | translate }}</em>
              </p>
            </div>
            <div *ngIf="isPackageBlueprint" class="col-3 text-right-md">
              <button (click)="deploy()" class="btn btn-primary btn-xs">
                <i c8yIcon="output" class="m-r-4"></i>
                {{ 'Deploy application' | translate }}
              </button>
            </div>
            <div class="flex-grow">
              <c8y-properties-list
                [data]="package.manifest"
                [emptyLabel]="'--'"
                [icon]="'info-circle'"
                [properties]="packageProperties"
                [title]="'Package info' | translate"
              ></c8y-properties-list>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="inner-scroll">
    <div class="card-header separator sticky-top">
      <h4 class="card-title">{{ 'Package overview' | translate }}</h4>
    </div>
    <div class="card-block p-l-16 p-r-16">
      <div *ngIf="!readme" class="c8y-empty-state text-center">
        <h1 c8yIcon="user-manual" class="c8y-icon-duocolor"></h1>
        <div>
          <h3 translate>No README.md found.</h3>
          <p class="m-r-8" translate>
            To view the contents of "README", add the file "README.md" to the package.
          </p>
        </div>
      </div>

      <div [innerHTML]="readme" class="markdown-content"></div>
    </div>
    <div class="separator-bottom visible-sm visible-xs"></div>
  </div>

  <div class="inner-scroll">
    <div class="card-header separator sticky-top">
      <h4 class="card-title">{{ 'Package plugins' | translate }}</h4>
    </div>
    <div class="card-block">
      <!-- empty state -->
      <div *ngIf="(plugins | async).length === 0" class="c8y-empty-state text-center">
        <h1 c8yIcon="plugin"></h1>
        <div>
          <h3 translate>No plugins to display.</h3>
          <p class="m-r-8" translate>This package doesn't contain plugins.</p>
        </div>
      </div>

      <div>
        <c8y-plugin-list [plugins$]="plugins" [selectable]="false"></c8y-plugin-list>
      </div>
    </div>
  </div>
</div>