<c8y-wizard-header>
  <i [c8yIcon]="headerIcon"></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>
  <c8y-form-group
    class="m-t-16 m-l-auto m-r-auto"
    style="max-width: 265px"
    id="modal-body"
    *ngIf="!isAppCreated; else appCreated"
    [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>
      <c8y-message *ngIf="errorMessage">
        {{ errorMessage | translate }}
      </c8y-message>
    </c8y-messages>
  </c8y-form-group>
  <div class="card-block" *ngIf="applicationType === 'package'">
    <c8y-form-group>
      <label
        class="m-r-8 d-inline-block"
        id="availabilitySelectorLabel"
        for="availabilitySelector"
      >
        {{ 'Select extension availability' | translate }}
      </label>
      <button
        class="btn-help btn-help--sm"
        [attr.aria-label]="'Help' | translate"
        [popover]="availabilityHelpPopover"
        placement="top"
        triggers="focus"
        type="button"
      ></button>
      <div class="c8y-select-wrapper">
        <select
          class="form-control"
          id="availabilitySelector"
          name="availabilitySelector"
          [(ngModel)]="selectedAvailability"
        >
          <option
            *ngFor="let availability of packageAvailability.availabilities"
            [ngValue]="availability.value"
          >
            {{ availability.label | translate }}
          </option>
        </select>
      </div>
    </c8y-form-group>
  </div>
  <ng-template #appCreated>
    <div
      class="d-flex 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>
    </div>
  </ng-template>
  <ng-template #availabilityHelpPopover>
    <div [innerHtml]="availabilityHelpPopoverText | translate"></div>
  </ng-template>
</c8y-wizard-body>

<c8y-wizard-footer>
  <button
    class="btn btn-default"
    title="{{ 'Back' | translate }}"
    type="button"
    (click)="back()"
    *ngIf="!isAppCreated && canGoBack"
    translate
  >
    Back
  </button>
  <button
    class="btn btn-default"
    title="{{ 'Cancel' | translate }}"
    type="button"
    (click)="cancel()"
    *ngIf="!isAppCreated"
    translate
  >
    Cancel
  </button>
  <button
    class="btn btn-default"
    title="{{ 'Done' | translate }}"
    type="button"
    (click)="done()"
    *ngIf="isAppCreated"
    translate
  >
    Done
  </button>
  <a
    class="btn btn-primary"
    title="{{ 'Open' | translate }}"
    target="_blank"
    (click)="$event.stopPropagation()"
    *ngIf="isAppCreated && canOpenInBrowser"
    [href]="getHref(createdApp)"
    rel="noopener noreferrer"
  >
    <i
      class="m-r-4"
      c8yIcon="external-link"
    ></i>
    {{ 'Open' | translate }}
  </a>
</c8y-wizard-footer>