sc-portal/app/src/app/machines/package-selector/package-selector.component.html

<form novalidate>
  <fieldset [formGroup]="editorForm" [disabled]="working">
    <button type="button" class="close" [attr.aria-label]="'general.closeWithoutSaving' | translate" (click)="close()">
      <span aria-hidden="true">&times;</span>
    </button>

    <div class="content">
      <h4 class="mb-3">Change machine specifications</h4>

      <p class="my-2">Pick the package that best suits your requirements</p>

      <app-packages [image]="machine.imageDetails" [imageType]="imageType" [package]="machine.package" (select)="packageSelected($event)"></app-packages>

      <div class="current-package">
        This machine's current package is: <b class="text-uppercase">{{ machine.package }}</b>
      </div>

      <p class="selected-package" *ngIf="editorForm.get('package').value">
        This package you've selected is: <b class="text-uppercase">{{ editorForm.get('package').value.name }}</b>
      </p>

      <div class="d-flex justify-content-end align-items-center mt-5">
        <button class="btn btn-link text-info me-3" (click)="close()">Keep current package</button>
        <button class="btn btn-info" (click)="saveChanges()" [disabled]="editorForm.invalid">Use selected package</button>
      </div>
    </div>
  </fieldset>
</form>