<form *ngIf="!createdApp; else appCreated" [formGroup]="formGroup" novalidate>
  <c8y-wizard-header>
    <h1 [c8yIcon]="'cloud-link'"></h1>
    <h4 translate>Add external application</h4>
  </c8y-wizard-header>

  <c8y-wizard-body>
    <p class="p-16 text-medium text-center bg-white separator-bottom sticky-top">
      {{ 'Provide external application details' | translate }}
    </p>
    <div class="modal-body p-t-8">
      <c8y-form-group>
        <label style="text-align: left">{{ 'Name' | translate }}</label>
        <input
          class="form-control"
          formControlName="name"
          name="name"
          placeholder="{{ 'e.g. My application' | translate }}"
          required
          type="text"
        />
        <c8y-messages>
          <c8y-message
            *ngIf="formGroup?.controls?.name?.errors?.required && !formGroup.controls.name.pristine"
            translate
          >
            This field is required.
          </c8y-message>
          <c8y-message *ngIf="formGroup?.controls?.name?.errors?.maxlength" translate>
            Maximum 120 characters allowed.
          </c8y-message>
        </c8y-messages>
      </c8y-form-group>

      <c8y-form-group>
        <label style="text-align: left">{{ 'Application key' | translate }}</label>
        <input
          class="form-control"
          formControlName="key"
          name="key"
          placeholder="{{ 'e.g. my-external-application-key' | translate }}"
          required
          type="text"
        />
        <c8y-messages>
          <c8y-message
            *ngIf="formGroup?.controls?.key?.errors?.required && !formGroup.controls.key.pristine"
            translate
          >
            This field is required.
          </c8y-message>
          <c8y-message *ngIf="formGroup?.controls?.key?.errors?.maxlength" translate>
            Maximum 120 characters allowed.
          </c8y-message>
        </c8y-messages>
      </c8y-form-group>

      <c8y-form-group>
        <label style="text-align: left">{{ 'External URL' | translate }}</label>
        <input
          [pattern]="'^(?!javascript:).+'"
          class="form-control"
          formControlName="externalUrl"
          name="externalUrl"
          placeholder="{{ 'e.g.' | translate }} https://www.example.com"
          required
          type="url"
        />
        <c8y-messages>
          <c8y-message
            *ngIf="
              formGroup?.controls?.externalUrl?.errors?.required &&
              !formGroup.controls.externalUrl.pristine
            "
            translate
          >
            This field is required.
          </c8y-message>
        </c8y-messages>
      </c8y-form-group>
    </div>
  </c8y-wizard-body>

  <c8y-wizard-footer>
    <button
      (click)="back()"
      class="btn btn-default"
      title="{{ 'Back' | translate }}"
      translate
      type="button"
    >
      Back
    </button>
    <button (click)="cancel()" class="btn btn-default" title="{{ 'Cancel' | translate }}" translate>
      Cancel
    </button>
    <button
      (click)="save(formGroup.value)"
      [disabled]="formGroup.invalid || formGroup.pristine"
      class="btn btn-primary btn-form"
      title="{{ 'Add application' | translate }}"
      type="button"
    >
      {{ 'Add application' | translate }}
    </button>
  </c8y-wizard-footer>
</form>
<ng-template #appCreated>
  <c8y-wizard-body>
    <div class="d-flex d-col j-c-center a-i-center" style="min-height: 324px">
      <c8y-operation-result
        text="{{ 'Application created' | translate }}"
        [size]="84"
        [vertical]="true"
        type="success"
        class="lead"
      ></c8y-operation-result>
    </div>
  </c8y-wizard-body>
  <c8y-wizard-footer>
    <button (click)="done()" class="btn btn-default" title="{{ 'Done' | translate }}" translate>
      Done
    </button>
    <a
      (click)="$event.stopPropagation()"
      [href]="formGroup.value.externalUrl"
      target="_blank"
      class="btn btn-primary"
      title="{{ 'Open' | translate }}"
    >
      <i c8yIcon="external-link" class="m-r-4"></i>
      {{ 'Open' | translate }}
    </a>
  </c8y-wizard-footer>
</ng-template>