<c8y-wizard-header>
  <i [c8yIcon]="'big-parcel'"></i>
  <h4
    id="modal-title"
    translate
  >
    Install from extension package
  </h4>
</c8y-wizard-header>
<c8y-wizard-body>
  <ng-container *ngIf="!selectedPackage">
    <div
      class="modal-inner-scroll"
      id="modal-body"
    >
      <p class="p-16 text-medium text-center separator-bottom sticky-top bg-level-0">
        {{ 'Select from available extension packages' | translate }}
      </p>

      <c8y-ui-empty-state
        [icon]="'big-parcel'"
        [title]="'No extension packages to display.' | translate"
        *ngIf="!packages?.length"
        [horizontal]="true"
      ></c8y-ui-empty-state>

      <div
        class="c8y-wizard-list-nav"
        style="min-height: 257px"
        *ngIf="packages?.length"
      >
        <button
          class="list-group-item text-truncate"
          title="{{ package.name }}"
          type="button"
          *ngFor="let package of packages"
          (click)="selectPackage(package)"
        >
          <i
            class="list-group-icon"
            c8yIcon="big-parcel"
          ></i>
          <span [innerText]="package.name"></span>
        </button>
      </div>
    </div>
  </ng-container>
  <ng-container *ngIf="!isDeployed && selectedPackage">
    <p class="p-16 text-center text-medium separator-bottom sticky-top bg-level-0">
      {{ 'Provide application details' | translate }}
    </p>
    <div
      class="d-flex d-col a-i-center j-c-center"
      style="min-height: 257px"
    >
      <c8y-application-properties-form
        class="d-block fit-w"
        *ngIf="!inProgress"
        [application]="newAppConfig"
      ></c8y-application-properties-form>

      <ng-container *ngIf="!inProgress">
        <div
          class="d-block fit-w bg-gray-white"
          [ngStyle]="{ padding: '0 16px' }"
        >
          <label
            for="packageVersion"
            translate
          >
            Use extension package version
          </label>
          <c8y-form-group>
            <c8y-typeahead
              placeholder="{{ 'Select or enter' | translate }}"
              name="packageVersion"
              [(ngModel)]="model.selected"
              (onSearch)="onInput.next($event)"
              [displayProperty]="'version'"
              [required]="true"
              [hideNew]="true"
              [container]="'body'"
            >
              <c8y-li
                class="p-l-8 p-r-8 c8y-list__item--link"
                *c8yFor="let version of versions$; loadMore: 'auto'; notFound: notFoundTemplate"
                (click)="onAppVersionSelect(version)"
                [active]="model.selected === version"
              >
                <c8y-li-icon icon="big-parcel"></c8y-li-icon>
                <span
                  [ngStyle]="{
                    display: 'flex',
                    'flex-direction': 'row',
                    'align-content': 'center',
                    'justify-content': 'space-between',
                    'align-items': 'center'
                  }"
                >
                  <c8y-highlight
                    [text]="version.version || '--'"
                    [pattern]="onInput | async"
                  ></c8y-highlight>

                  <span>
                    <span
                      class="label label-info m-l-4"
                      *ngFor="let tag of version.tags"
                    >
                      {{ tag }}
                    </span>
                  </span>
                </span>
              </c8y-li>
              <ng-template #notFoundTemplate>
                <c8y-li
                  class="bg-gray-lighter p-8"
                  *ngIf="(onInput | async)?.length > 0 && (versions$ | async)?.data?.length === 0"
                >
                  <span translate>No match found.</span>
                </c8y-li>
              </ng-template>
            </c8y-typeahead>
          </c8y-form-group>
        </div>
      </ng-container>

      <c8y-loading
        class="text-center d-block"
        [message]="'Installing…' | translate"
        *ngIf="inProgress"
        layout="application"
      ></c8y-loading>
    </div>
  </ng-container>

  <ng-container *ngIf="isDeployed">
    <div
      class="d-flex a-i-center j-c-center"
      style="min-height: 257px"
      *ngIf="deployedWithSuccess; else failedDeploy"
    >
      <c8y-operation-result
        class="lead"
        type="success"
        text="{{ 'Application created' | translate }}"
        [size]="84"
        [vertical]="true"
      ></c8y-operation-result>
    </div>
    <ng-template #failedDeploy>
      <div
        class="d-flex a-i-center j-c-center"
        style="min-height: 257px"
      >
        <c8y-operation-result
          class="lead"
          type="error"
          text="{{ 'Application creation failed' | translate }}"
          [size]="84"
          [vertical]="true"
        ></c8y-operation-result>
      </div>
    </ng-template>
  </ng-container>
</c8y-wizard-body>

<c8y-wizard-footer>
  <button
    class="btn btn-default"
    title="{{ 'Back' | translate }}"
    type="button"
    *ngIf="!isDeployed"
    (click)="selectedPackage ? clean() : back()"
    [disabled]="inProgress"
  >
    {{ 'Back' | translate }}
  </button>
  <button
    class="btn btn-default"
    title="{{ isDeployed && deployedWithSuccess ? ('Close' | translate) : ('Cancel' | translate) }}"
    type="button"
    (click)="cancel()"
  >
    {{ isDeployed && deployedWithSuccess ? ('Close' | translate) : ('Cancel' | translate) }}
  </button>

  <button
    class="btn btn-primary"
    title="{{ 'Install' | translate }}"
    type="button"
    (click)="deployApp()"
    [disabled]="inProgress || !packages?.length"
    *ngIf="!isDeployed"
  >
    {{ 'Install' | translate }}
  </button>
</c8y-wizard-footer>