<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">
  @if (!isDeployed) {
    <div
      class="fadeIn animated d-flex a-i-center j-c-center d-col"
      style="min-height: 309px"
    >
      @if (!inProgress) {
        <p
          class="bg-level-0 fit-w p-16 text-center text-medium sticky-top bg-level-0 separator-bottom"
        >
          {{ headerText | translate }}
        </p>

        <c8y-application-properties-form
          class="d-block fit-w bg-level-1"
          [application]="newAppConfig"
        ></c8y-application-properties-form>

        <div
          class="d-block fit-w bg-gray-white"
          [ngStyle]="{ padding: '0 16px' }"
        >
          <c8y-package-version-select
            [ngModel]="model.selected"
            (ngModelChange)="onAppVersionSelect($event)"
            [packageId]="package?.id"
            [label]="'Use extension package version' | translate"
          ></c8y-package-version-select>
        </div>
      } @else {
        <c8y-loading
          class="text-center"
          [message]="'Deploying…' | translate"
          layout="application"
        ></c8y-loading>
      }
    </div>
  } @else {
    @if (deployedWithSuccess) {
      <div
        class="modal-body fadeIn animated"
        style="min-height: 309px"
      >
        <div class="d-flex a-i-center j-c-center d-col">
          <c8y-operation-result
            class="lead d-block m-b-16"
            type="success"
            [size]="84"
            [vertical]="true"
            [text]="successMessageTemplate | translate: { packageName: package.name }"
          ></c8y-operation-result>
        </div>
      </div>
    } @else {
      <div
        class="modal-body fadeIn animated text-center"
        style="min-height: 257px"
      >
        <c8y-operation-result
          class="lead"
          type="error"
          [size]="84"
          [vertical]="true"
          text="{{ 'Application creation failed' | translate }}"
        ></c8y-operation-result>
      </div>
    }
  }
</c8y-wizard-body>

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

  @if (!isDeployed) {
    <button
      class="btn btn-primary"
      title="{{ 'Deploy' | translate }}"
      type="button"
      (click)="deployApp()"
      [disabled]="inProgress || !canDeploy"
      [ngClass]="{ 'btn-pending': inProgress }"
      data-cy="c8y-deploy-application--deploy-blueprint-button"
    >
      {{ 'Deploy' | translate }}
    </button>
  } @else if (deployedWithSuccess) {
    <button
      class="btn btn-primary"
      title="{{ 'Open the application details' | translate }}"
      type="button"
      (click)="open()"
      translate
    >
      Open
    </button>
  }
</c8y-wizard-footer>