<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>

  @let orphanedPlugins = orphanedPlugins$ | async;
  @let newPlugins = newPlugins$ | async;

  @if ((orphanedPlugins?.length ?? 0) > 0 || (newPlugins?.length ?? 0) > 0) {
    <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>

    @if ((orphanedPlugins?.length ?? 0) > 0) {
      <c8y-list-group>
        <c8y-li [collapsed]="true">
          <c8y-li-icon>
            <span class="badge badge-danger">{{ orphanedPlugins?.length ?? 0 }}</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>
    }

    @if ((newPlugins?.length ?? 0) > 0) {
      <c8y-list-group>
        <c8y-li [collapsed]="false">
          <c8y-li-icon>
            <span class="badge badge-success">{{ newPlugins?.length ?? 0 }}</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>
    }
  } @else {
    @if (isUpdateOngoing) {
      <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"
        [message]="'Updating…' | translate"
      ></c8y-loading>
    }

    @if (!isUpdateOngoing && !updateFailure) {
      <c8y-operation-result
        type="success"
        text="{{ 'Update completed' | translate }}"
        [size]="120"
        [vertical]="true"
      ></c8y-operation-result>
    }

    @if (!isUpdateOngoing && updateFailure) {
      <c8y-operation-result
        type="error"
        text="{{ 'Failed to update application.' | translate }}"
        [size]="120"
        [vertical]="true"
      ></c8y-operation-result>
    }
  }

  <ng-container c8y-modal-footer-custom>
    @if ((orphanedPlugins?.length ?? 0) > 0 || (newPlugins?.length ?? 0) > 0) {
      <div class="modal-footer">
        <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()"
          [disabled]="isUpdateOngoing"
        >
          {{ 'Continue' | translate }}
        </button>
      </div>
    } @else {
      <div class="modal-footer">
        <button
          class="btn btn-default"
          title="{{ 'Close' | translate }}"
          (click)="done()"
          [disabled]="isUpdateOngoing"
        >
          {{ 'Close' | translate }}
        </button>
      </div>
    }
  </ng-container>
</c8y-modal>