<c8y-wizard-header>
  <i [c8yIcon]="'copy'"></i>
  <h4
    id="modal-title"
    translate
  >
    Duplicate application
  </h4>
</c8y-wizard-header>

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

<c8y-wizard-footer *ngIf="stepper.selectedIndex === 0 && noBackButton">
  <button
    class="btn btn-default"
    title="{{ 'Cancel' | translate }}"
    type="button"
    (click)="done()"
  >
    {{ 'Cancel' | translate }}
  </button>
</c8y-wizard-footer>

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