<div *ngIf="loading$ | async" class="center-spinner">
  <ion-spinner color="warning" name="lines"></ion-spinner>
  <ion-label class="long-message">Checking for installed services which depend on {{ params.title }}...</ion-label>
</div>

<div *ngIf="!(loading$ | async)" class="slide-content">
  <div style="margin-top: 25px;">
    <div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
      <ion-label color="warning" style="font-size: xx-large; font-weight: bold;"
        *ngIf="hasDependentViolation">
        WARNING
      </ion-label>
      <ion-label color="success" style="font-size: x-large; font-weight: bold; text-transform: capitalize;"
        *ngIf="!hasDependentViolation">
        READY
      </ion-label>
    </div>

    <div *ngIf="longMessage" class="long-message"      >
      {{ longMessage }}
    </div>
    <div style="margin: 25px 0px;">
      <div style="border-width: 0px 0px 1px 0px; font-size: unset; text-align: left; font-weight: bold; margin-left: 13px; border-style: solid; border-color: var(--ion-color-light-tint);" 
        *ngIf="hasDependentViolation"
      >
        <ion-text color="warning">Will Stop</ion-text>
      </div>
      <ion-item
        style="--ion-item-background: margin-top: 5px"
        *ngFor="let dep of dependentBreakages | keyvalue"
      >
        <ion-thumbnail style="position: relative; height: 4vh; width: 4vh" slot="start">
          <img [src]="patch.data['package-data'][dep.key]['static-files'].icon" />
        </ion-thumbnail>
        <ion-label>
          <h5>{{ patch.data['package-data'][dep.key].manifest.title }}</h5>
        </ion-label>
      </ion-item>
    </div>
  </div>
</div>