<c8y-wizard-header>
  <h1 [c8yIcon]="'copy'"></h1>
  <h4 translate>Duplicate application</h4>
</c8y-wizard-header>

<c8y-wizard-body>
  <c8y-stepper
    [customClasses]="['hidden']"
    [disableDefaultIcons]="{ edit: true, done: false }"
    linear
  >
    <!-- 1st step -->
    <cdk-step *ngIf="!directlyMoveToSecondStep">
      <p class="p-16 text-center text-medium separator-bottom sticky-top bg-white">
        {{ 'Select application to duplicate' | translate }}
      </p>
      <c8y-duplicate-application-list
        (onSelectedApp)="onSelectedApp($event)"
        *ngIf="stepper.selectedIndex === 0"
        [existingApps]="existingApps"
        [stepper]="stepper"
        class="d-block"
        style="min-height: 257px"
      ></c8y-duplicate-application-list>
    </cdk-step>
    <!-- 2nd step -->
    <cdk-step>
      <c8y-duplicate-application-properties
        class="d-flex d-col j-c-center a-i-center"
        style="min-height: 257px"
        (duplicatedApp)="duplicatedApp = $event"
        *ngIf="stepper.selectedIndex === 1 || (stepper.selectedIndex === 0 && directlyMoveToSecondStep)"
        [existingApps]="existingApps"
        [selectedApp]="selectedApp"
        [stepper]="stepper"
        [isFirstStep]="directlyMoveToSecondStep"
      ></c8y-duplicate-application-properties>
    </cdk-step>
    <!-- Final step -->
    <cdk-step>
      <ng-container *ngIf="stepper.selectedIndex === 2 || (stepper.selectedIndex === 1 && directlyMoveToSecondStep)">
        <div
          *ngIf="duplicatedApp; else duplicateAppFailed"
          style="min-height: 257px"
          class="d-flex a-i-center j-c-center"
        >
          <c8y-operation-result
            text="{{ 'Application created' | translate }}"
            [size]="84"
            [vertical]="true"
            type="success"
          ></c8y-operation-result>
        </div>
        <ng-template #duplicateAppFailed>
          <div style="min-height: 257px" class="d-flex a-i-center j-c-center">
            <c8y-operation-result
              text="{{ 'Application creation failed' | translate }}"
              [size]="84"
              [vertical]="true"
              type="error"
            ></c8y-operation-result>
          </div>
        </ng-template>
      </ng-container>
    </cdk-step>
  </c8y-stepper>
</c8y-wizard-body>

<c8y-wizard-footer *ngIf="stepper.selectedIndex === 2 || (stepper.selectedIndex === 1 && directlyMoveToSecondStep)">
  <button type="button" (click)="done()" class="btn btn-default" title="{{ 'Done' | translate }}">
    {{ 'Done' | translate }}
  </button>
  <a
    (click)="$event.stopPropagation()"
    [href]="getHref(duplicatedApp)"
    target="_blank"
    class="btn btn-primary"
    title="{{ 'Open' | translate }}"
  >
    <i c8yIcon="external-link" class="m-r-4"></i>
    {{ 'Open' | translate }}
  </a>
</c8y-wizard-footer>