<c8y-wizard-header>
  <i [c8yIcon]="'big-parcel'"></i>
  <h4 translate>Install from package</h4>
</c8y-wizard-header>
<c8y-wizard-body>
  <ng-container *ngIf="!selectedPackage">
    <div class="modal-inner-scroll">
      <p class="p-16 text-medium text-center separator-bottom sticky-top bg-white">
        {{ 'Select from available packages' | translate }}
      </p>
      <div *ngIf="!packages?.length" class="c8y-empty-state text-center">
        <p class="text-center">{{ 'No packages to display.' | translate }}</p>
      </div>
      <div *ngIf="packages?.length" class="c8y-wizard-list-nav" style="min-height: 257px">
        <button
          class="list-group-item text-truncate"
          *ngFor="let package of packages"
          (click)="selectPackage(package)"
          title="{{ package.name }}"
          type="button"
        >
          <i c8yIcon="big-parcel" class="list-group-icon"></i>
          <span [innerText]="package.name"></span>
        </button>
      </div>
    </div>
  </ng-container>
  <ng-container *ngIf="!isDeployed && selectedPackage">
    <p class="p-16 text-center text-medium separator-bottom sticky-top bg-white">
      {{ 'Provide application details' | translate }}
    </p>
    <div class="d-flex d-col a-i-center j-c-center" style="min-height: 257px">
      <c8y-application-properties-form
        *ngIf="!inProgress"
        [application]="newAppConfig"
        class="d-block fit-w"
      ></c8y-application-properties-form>
      <c8y-progress-bar
        [message]="'Installing…' | translate"
        class="text-center d-block"
        *ngIf="inProgress"
      ></c8y-progress-bar>
    </div>
  </ng-container>

  <ng-container *ngIf="isDeployed">
    <div
      *ngIf="deployedWithSuccess; else failedDeploy"
      class="d-flex a-i-center j-c-center"
      style="min-height: 257px"
    >
      <c8y-operation-result
        text="{{ 'Application created' | translate }}"
        [size]="84"
        [vertical]="true"
        type="success"
        class="lead"
      ></c8y-operation-result>
    </div>
    <ng-template #failedDeploy>
      <div class="d-flex a-i-center j-c-center" style="min-height: 257px">
        <c8y-operation-result
          text="{{ 'Application creation failed' | translate }}"
          [size]="84"
          [vertical]="true"
          type="error"
          class="lead"
        ></c8y-operation-result>
      </div>
    </ng-template>
  </ng-container>
</c8y-wizard-body>

<c8y-wizard-footer>
  <button
    *ngIf="!isDeployed"
    (click)="selectedPackage ? (selectedPackage = null) : back()"
    class="btn btn-default"
    title="{{ 'Back' | translate }}"
    translate
    [disabled]="inProgress"
    type="button"
  >
    Back
  </button>
  <button
    title="{{ isDeployed && deployedWithSuccess ? ('Close' | translate) : ('Cancel' | translate) }}"
    class="btn btn-default"
    type="button"
    (click)="cancel()"
  >
    {{ isDeployed && deployedWithSuccess ? ('Close' | translate) : ('Cancel' | translate) }}
  </button>

  <button
    title="{{ 'Install' | translate }}"
    class="btn btn-primary"
    type="button"
    (click)="save()"
    [disabled]="inProgress"
    *ngIf="!isDeployed"
  >
    {{ 'Install' | translate }}
  </button>
</c8y-wizard-footer>