<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 "README", add the file "README.md" 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 "README", add the file "README.md" to the plugin.'
| translate
"
*ngIf="!pluginMarkdown"
[horizontal]="true"
></c8y-ui-empty-state>
</div>
</div>
</div>