<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]="'big-parcel'"
    [label]="'Extensions' | translate"
    [path]="'ecosystem/extension/extensions'"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="name | humanizeAppName | async"></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="'Extension package' | translate"></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item
  placement="right"
  itemClass="navbar-form"
  *ngIf="isOwnedByCurrentTenant && isAllowedToCreateSubtenants"
>
  <div class="d-flex a-i-center">
    <label
      class="m-b-0 m-r-8"
      for="availability"
      translate
    >
      Availability`of package based on app state`
    </label>
    <div class="c8y-select-wrapper">
      <select
        class="form-control"
        id="availability"
        [(ngModel)]="packageAvailability"
        [disabled]="isChangingAvailability"
        (ngModelChange)="togglePackageAvailability(package, $event)"
      >
        <option
          *ngFor="let availability of packageAvailabilityService.availabilities"
          [ngValue]="availability.value"
        >
          {{ availability.label | translate }}
        </option>
      </select>
    </div>
  </div>
</c8y-action-bar-item>

<div
  class="card content-fullpage d-grid grid__row--fit-auto"
  [ngClass]="{ 'grid__col--8-4-0': !selectedPlugin, 'grid__col--0-4-8': !!selectedPlugin }"
>
  <div class="bg-level-1 grid__col--fullspan separator-bottom">
    <div class="card-block p-t-24 p-b-24 large-padding">
      <button
        class="card__ribbon btn-clean"
        [attr.aria-label]="
          (package.label || package.manifest.label | translatePackageLabel) +
          ': ' +
          (packageTypeLabels[packageType].tooltip | translate)
        "
        tooltip="{{ packageTypeLabels[packageType].tooltip | translate }}"
        placement="bottom"
        type="button"
        *ngIf="packageType !== PACKAGE_TYPE.CUSTOM"
        [delay]="500"
      >
        <span
          [ngClass]="{
            'bg-info': packageType === PACKAGE_TYPE.COMMUNITY,
            'bg-primary': packageType === PACKAGE_TYPE.OFFICIAL,
            'bg-warning': packageType === PACKAGE_TYPE.ARCHIVED
          }"
        >
          {{ package.label || package.manifest.label | translatePackageLabel }}
        </span>
      </button>
      <div class="content-flex-70">
        <div class="text-center">
          <i
            class="c8y-icon-duocolor icon-48"
            c8yIcon="big-parcel"
          ></i>
          <button
            class="btn-clean"
            [attr.aria-label]="
              (appState?.label | translate) + ': ' + (appState?.tooltip | translate)
            "
            [tooltip]="appState?.tooltip | translate"
            placement="top"
            type="button"
            [delay]="500"
          >
            <span
              class="label"
              [ngClass]="appState?.class"
            >
              {{ appState?.label | translate }}
            </span>
          </button>
          <button
            class="btn-clean"
            [attr.aria-label]="
              (packageContentState?.label | translate) +
              ': ' +
              (packageContentState?.tooltip | translate)
            "
            [tooltip]="packageContentState?.tooltip | translate"
            placement="bottom"
            type="button"
            [delay]="500"
          >
            <span
              class="label"
              [ngClass]="packageContentState?.class"
            >
              {{ packageContentState?.label | translate }}
            </span>
          </button>
        </div>

        <div class="flex-grow col-10">
          <div class="content-flex-80">
            <div class="col-8">
              <div class="card-title h4 m-b-8">{{ name | humanizeAppName | async }}</div>
              <p *ngIf="description">{{ description }}</p>
              <p
                class="text-muted"
                *ngIf="!description"
              >
                <em>{{ 'No description available.' | translate }}</em>
              </p>
            </div>
            <div
              class="col-3 text-right-md p-r-md-40"
              *ngIf="isPackageBlueprint"
            >
              <button
                class="btn btn-primary btn-sm"
                (click)="deploy()"
                data-cy="c8y-package-details--deploy-application-button"
              >
                <i
                  class="m-r-4"
                  c8yIcon="output"
                ></i>
                {{ 'Deploy application' | translate }}
              </button>
            </div>
            <div class="flex-grow">
              <c8y-properties-list
                [data]="package.manifest"
                [properties]="packageProperties"
              ></c8y-properties-list>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="inner-scroll">
    <div class="card-header separator sticky-top">
      <div class="card-title">{{ 'Extension package overview' | translate }}</div>
    </div>
    <div class="card-block p-l-16 p-r-16">
      <div
        class="alert alert-warning m-b-16"
        style="margin: auto"
        *ngIf="packageType === PACKAGE_TYPE.ARCHIVED"
        translate
      >
        The package was archived by the owner marking it as out of maintenance. It is not
        recommended to install the package.
      </div>
      <c8y-ui-empty-state
        [icon]="'user-manual'"
        [title]="'No README.md found' | translate"
        [subtitle]="
          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the package.'
            | translate
        "
        *ngIf="!markdown"
        [horizontal]="true"
      ></c8y-ui-empty-state>
      <div
        class="markdown-content"
        [innerHTML]="markdown | markdownToHtml: { baseUrl } | async"
      ></div>
    </div>
    <div class="separator-bottom visible-sm visible-xs"></div>
  </div>

  <div
    class="inner-scroll d-flex d-col bg-level-1 split-view__list"
    [ngClass]="{ 'border-right': !!selectedPlugin }"
  >
    <div class="card-header separator sticky-top">
      <div class="card-title">{{ 'Package plugins' | translate }}</div>
    </div>
    <div class="border-left flex-grow">
      <!-- empty state -->
      <div
        class="p-16"
        *ngIf="(exportedPlugins$ | async).length === 0"
      >
        <c8y-ui-empty-state
          [icon]="'plugin'"
          [title]="'No plugins to display.' | translate"
          [subtitle]="'This package doesn\'t contain plugins.' | translate"
          [horizontal]="true"
        ></c8y-ui-empty-state>
      </div>
      <c8y-plugin-list
        [plugins$]="exportedPlugins$"
        [selectable]="false"
        [installable]="true"
        [package]="package"
        [selectedPlugin]="selectedPlugin"
        (showOverview)="showPluginOverview($event)"
      ></c8y-plugin-list>
    </div>
  </div>

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