<c8y-wizard-header>
  <i c8yIcon="microchip"></i>
  <h4 id="modal-title">{{ headerText | translate }}</h4>
</c8y-wizard-header>

<c8y-wizard-body>
  <p class="p-16 text-center text-medium separator-bottom sticky-top bg-component">
    {{ 'Upload a *.zip file' | translate }}
  </p>

  @if (!isAppCreated && !showConflictingTenantOptionsError) {
    <c8y-form-group
      class="m-t-16 m-l-auto m-r-auto"
      style="max-width: 265px"
      id="modal-body"
      [hasError]="!!errorMessage"
    >
      <c8y-drop-area
        class="drop-area"
        (dropped)="onFileDroppedEvent($event)"
        [accept]="'.zip'"
        [loading]="isLoading"
        [maxAllowedFiles]="1"
        [progress]="progress | async"
      ></c8y-drop-area>
      <c8y-messages>
        @if (errorMessage) {
          <c8y-message>
            {{ errorMessage | translate }}
          </c8y-message>
        }
      </c8y-messages>
    </c8y-form-group>
  } @else if (showConflictingTenantOptionsError) {
    <div
      class="d-flex d-col a-i-center j-c-center"
      style="min-height: 285px"
    >
      <c8y-operation-result
        class="lead"
        type="error"
        [text]="conflictingTenantOptionsErrorMessage"
        [vertical]="true"
        [size]="84"
      ></c8y-operation-result>
      <div
        class="p-16"
        translate
      >
        Your tenant options already contain category of the same name that microservice declares in
        manifest. You can still retry this action, clear and override your existing tenant option
        category with microservice category. This action is irreversible.
      </div>
      <div class="d-flex gap-8 m-24">
        <button
          class="btn btn-default"
          type="button"
          (click)="reset422Error()"
          translate
        >
          Back
        </button>
        <button
          class="btn btn-danger"
          type="button"
          (click)="retryWithClearConflictingOptions()"
          [disabled]="isLoading"
          translate
        >
          Retry and override tenant options
        </button>
      </div>
    </div>
  } @else {
    <div
      class="d-flex d-col a-i-center j-c-center"
      style="min-height: 285px"
    >
      <c8y-operation-result
        class="lead"
        type="success"
        text="{{ successText | translate }}"
        [vertical]="true"
        [size]="84"
      ></c8y-operation-result>
      @if (tenantOptionsOverrideSuccessInfo) {
        <div
          class="alert alert-info m-16"
          style="max-width: 500px"
        >
          {{ tenantOptionsOverrideSuccessInfo }}
        </div>
      }
    </div>
  }

  @if (!showConflictingTenantOptionsError && !tenantOptionsOverrideSuccessInfo) {
    <div
      class="p-16"
      translate
      [translateParams]="{ slaHref: slaHref }"
      ngNonBindable
    >
      By uploading a microservice, you agree to the
      <a
        href="{{ slaHref }}"
        target="_blank"
        rel="noopener noreferrer"
        >Microservice Deployment SLA</a
      >
      which outlines our microservices hosting terms, conditions, and performance standards.
    </div>
  }
</c8y-wizard-body>

<c8y-wizard-footer>
  @if (!isAppCreated) {
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      (click)="cancel()"
      translate
    >
      Cancel
    </button>
  }
  @if (isAppCreated) {
    <button
      class="btn btn-default"
      title="{{ 'Done' | translate }}"
      type="button"
      (click)="done()"
      translate
    >
      Done
    </button>
  }
</c8y-wizard-footer>