<c8y-wizard-header>
  <div class="modal-header dialog-header">
    <i c8yIcon="output"></i>
    <h4 id="modal-title">{{ 'Deploy application' | translate }}</h4>
  </div>
</c8y-wizard-header>

<c8y-wizard-body id="modal-body">
  <ng-container *ngIf="!isDeployed">
    <div class="fadeIn animated d-flex a-i-center j-c-center d-col" style="min-height: 309px">
      <p
        class="bg-level-0 fit-w p-16 text-center text-medium sticky-top bg-level-0 separator-bottom"
        *ngIf="!inProgress"
      >
        {{ headerText | translate }}
      </p>
      <c8y-application-properties-form
        *ngIf="!inProgress"
        [application]="newAppConfig"
        class="d-block fit-w bg-level-1"
      ></c8y-application-properties-form>

      <ng-container *ngIf="!inProgress">
        <div [ngStyle]="{ padding: '0 16px' }" class="d-block fit-w bg-gray-white">
          <c8y-package-version-select
            [ngModel]="model.selected"
            (ngModelChange)="onAppVersionSelect($event)"
            [packageId]="package?.id"
            [label]="'Use extension package version' | translate"
          ></c8y-package-version-select>
        </div>
      </ng-container>

      <c8y-loading
        *ngIf="inProgress"
        [message]="'Deploying…' | translate"
        class="text-center"
        layout="application"
      ></c8y-loading>
    </div>
  </ng-container>

  <ng-container *ngIf="isDeployed">
    <div
      *ngIf="deployedWithSuccess; else failedDeploy"
      class="modal-body fadeIn animated"
      style="min-height: 309px"
    >
      <div class="d-flex a-i-center j-c-center d-col">
        <c8y-operation-result
          type="success"
          [size]="84"
          [vertical]="true"
          [text]="successMessageTemplate | translate: { packageName: package.name }"
          class="lead d-block m-b-16"
        ></c8y-operation-result>
      </div>
    </div>
    <ng-template #failedDeploy>
      <div class="modal-body fadeIn animated text-center" style="min-height: 257px">
        <c8y-operation-result
          type="error"
          [size]="84"
          [vertical]="true"
          text="{{ 'Application creation failed' | translate }}"
          class="lead"
        ></c8y-operation-result>
      </div>
    </ng-template>
  </ng-container>
</c8y-wizard-body>

<c8y-wizard-footer>
  <button
    (click)="cancel()"
    type="button"
    class="btn btn-default"
    data-cy="c8y-deploy-application--cancel-blueprint-button"
    title="{{ (isDeployed && deployedWithSuccess ? doneLabel : cancelLabel) | translate }}"
  >
    {{ (isDeployed && deployedWithSuccess ? doneLabel : cancelLabel) | translate }}
  </button>

  <button
    (click)="deployApp()"
    *ngIf="!isDeployed"
    [disabled]="inProgress || !canDeploy"
    [ngClass]="{ 'btn-pending': inProgress }"
    class="btn btn-primary"
    type="button"
    data-cy="c8y-deploy-application--deploy-blueprint-button"
    title="{{ 'Deploy' | translate }}"
  >
    {{ 'Deploy' | translate }}
  </button>

  <button
    (click)="open()"
    type="button"
    class="btn btn-primary"
    *ngIf="isDeployed && deployedWithSuccess"
    title="{{ 'Open the application details' | translate }}"
    translate
  >
    Open
  </button>
</c8y-wizard-footer>