<p
  class="p-16 text-center text-medium separator-bottom sticky-top bg-level-0 fit-w"
  *ngIf="!inProgress"
>
  {{ 'Provide application details' | translate }}
</p>

<ng-container *ngIf="!inProgress">
  <label class="c8y-switch" *ngIf="isSubscribedApp$ | async">
    <input type="checkbox" [(ngModel)]="disableForm" (change)="getAppConfig()" />
    <span></span> {{ 'Overrule subscribed application' | translate }}
  </label>

  <c8y-application-properties-form
    [application]="newAppConfig"
    class="d-block fit-w"
    [disabled]="disableForm"
  ></c8y-application-properties-form>
</ng-container>
<c8y-loading
  *ngIf="inProgress"
  [message]="'Duplicating…' | translate"
  layout="application"
  class="text-center d-block"
></c8y-loading>

<c8y-wizard-footer>
  <button
    *ngIf="!isFirstStep"
    (click)="back()"
    [disabled]="inProgress"
    class="btn btn-default"
    type="button"
    title="{{ 'Back' | translate }}"
  >
    {{ 'Back' | translate }}
  </button>
  <button (click)="cancel()" class="btn btn-default" title="{{ 'Cancel' | translate }}">
    {{ 'Cancel' | translate }}
  </button>
  <button
    (click)="duplicateApp()"
    [disabled]="inProgress"
    class="btn btn-primary"
    type="button"
    title="{{ 'Duplicate' | translate }}"
  >
    {{ 'Duplicate' | translate }}
  </button>
</c8y-wizard-footer>