<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>

<c8y-action-bar-item placement="right" itemClass="navbar-form" *ngIf="isOwnedByCurrentTenant && isAllowedToCreateSubtenants">
  <div class="form-horizontal">
    <div class="form-group">
      <label for="availability" translate>Availability</label>
      <div class="c8y-select-wrapper">
        <select
          id="availability"
          class="form-control"
          [ngModel]="package.availability"
          [disabled]="isChangingAvailability"
          (ngModelChange)="togglePackageAvailability(package, $event)"
        >
          <option *ngFor="let availability of availabilities" [ngValue]="availability.value">
            {{ availability.label | translate }}
          </option>
        </select>
        <span></span>
      </div>
    </div>
  </div>
</c8y-action-bar-item>

<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"
                [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 d-flex d-col">
    <div class="card-header separator sticky-top">
      <h4 class="card-title">{{ 'Package plugins' | translate }}</h4>
    </div>
    <div class="border-left flex-grow">
      <!-- empty state -->
      <div class="p-16" *ngIf="(exportedPlugins$ | async).length === 0">
        <div class="c8y-empty-state text-left">
          <i c8yIcon="plugin"></i>
          <div>
            <p translate class="text-medium">No plugins to display.</p>
            <p translate>This package doesn't contain plugins.</p>
          </div>
        </div>
      </div>
      <c8y-plugin-list
        [plugins$]="exportedPlugins$"
        [selectable]="false"
        [installable]="true"
        [package]="package"
      ></c8y-plugin-list>
    </div>
  </div>
</div>