<c8y-modal
  [title]="'Update application' | translate"
  [headerClasses]="'dialog-header'"
  [customFooter]="true"
  #modal
>
  <ng-container c8y-modal-title>
    <span class="dlt-c8y-icon-installing-updates"></span>
  </ng-container>

  <ng-container
    *ngIf="
      (orphanedPlugins$ | async).length > 0 || (newPlugins$ | async).length > 0;
      else updateProgress
    "
  >
    <p
      class="text-center text-break-word p-24 text-14"
      translate
    >
      Updating this blueprint will change the default plugins. Review the plugin changes before
      proceeding.
    </p>
    <c8y-list-group *ngIf="(orphanedPlugins$ | async).length > 0">
      <c8y-li [collapsed]="true">
        <c8y-li-icon>
          <span class="badge badge-danger">{{ (orphanedPlugins$ | async).length }}</span>
        </c8y-li-icon>
        <c8y-li-body>
          <div translate>Orphaned plugins</div>
        </c8y-li-body>
        <c8y-li-footer translate>
          Some plugins are not contained in the new version of this blueprint and will therefore get
          removed.
        </c8y-li-footer>
        <c8y-li-collapse>
          <c8y-plugin-list
            class="m-t-16"
            [emptyListText]="'No plugins available' | translate"
            [plugins$]="orphanedPlugins$"
            [selectable]="false"
            [hideSource]="true"
          ></c8y-plugin-list>
        </c8y-li-collapse>
      </c8y-li>
    </c8y-list-group>

    <c8y-list-group *ngIf="(newPlugins$ | async).length > 0">
      <c8y-li [collapsed]="false">
        <c8y-li-icon>
          <span class="badge badge-success">{{ (newPlugins$ | async).length }}</span>
        </c8y-li-icon>
        <c8y-li-body>
          <div translate>New plugins added</div>
        </c8y-li-body>
        <c8y-li-footer translate>
          This blueprint will add new plugins. Please choose which you want to install.
        </c8y-li-footer>
        <c8y-li-collapse>
          <c8y-plugin-list
            class="m-t-16"
            [emptyListText]="'No plugins available' | translate"
            [plugins$]="newPlugins$"
            [selectable]="true"
            [hideSource]="false"
          ></c8y-plugin-list>
        </c8y-li-collapse>
      </c8y-li>
    </c8y-list-group>
  </ng-container>

  <ng-container c8y-modal-footer-custom>
    <div
      class="modal-footer"
      *ngIf="
        (orphanedPlugins$ | async).length > 0 || (newPlugins$ | async).length > 0;
        else updateProgressButtons
      "
    >
      <button
        class="btn btn-default"
        title="{{ 'Close' | translate }}"
        (click)="close()"
        [disabled]="isUpdateOngoing"
      >
        {{ 'Close' | translate }}
      </button>
      <button
        class="btn btn-primary"
        title="{{ 'Continue' | translate }}"
        (click)="updateApplication()"
        *ngIf="(orphanedPlugins$ | async).length > 0 || (newPlugins$ | async).length > 0"
        [disabled]="isUpdateOngoing"
      >
        {{ 'Continue' | translate }}
      </button>
    </div>
  </ng-container>

  <ng-template #updateProgressButtons>
    <ng-container c8y-modal-footer-custom>
      <div class="modal-footer">
        <button
          class="btn btn-default"
          title="{{ 'Close' | translate }}"
          (click)="done()"
          [disabled]="isUpdateOngoing"
        >
          {{ 'Close' | translate }}
        </button>
      </div>
    </ng-container>
  </ng-template>

  <ng-template #updateProgress>
    <c8y-loading
      class="text-center d-block p-t-56 p-b-56 m-t-4 m-b-4"
      style="min-height: 180px"
      layout="application"
      *ngIf="isUpdateOngoing"
      [message]="'Updating…' | translate"
    ></c8y-loading>

    <c8y-operation-result
      type="success"
      *ngIf="!isUpdateOngoing && !updateFailure"
      text="{{ 'Update completed' | translate }}"
      [size]="120"
      [vertical]="true"
    ></c8y-operation-result>
    <c8y-operation-result
      type="error"
      *ngIf="!isUpdateOngoing && updateFailure"
      text="{{ 'Failed to update application.' | translate }}"
      [size]="120"
      [vertical]="true"
    ></c8y-operation-result>
  </ng-template>
</c8y-modal>