<c8y-modal
  [title]="'Apply branding to apps' | translate"
  [disabled]="!form || form.invalid || !brandableApps.length"
  [headerClasses]="'dialog-header'"
  (onDismiss)="cancel()"
  (onClose)="save()"
  [labels]="{ cancel: 'Cancel', ok: 'Save' }"
  [flushBody]="true"
>
  <ng-container c8y-modal-title>
    <span c8yIcon="palette"></span>
  </ng-container>
  @if (form) {
    <c8y-list-group
      class="m-b-0 no-border-last"
      [formGroup]="form"
    >
      <c8y-li>
        @if (numberOfSelectedApps$ | async; as numberOfApps) {
          <p
            class="text-center text-medium"
            translate
          >
            {{ numberOfApps }} apps selected for branding
          </p>
        } @else {
          <p
            class="text-center text-medium"
            translate
          >
            No apps selected for branding
          </p>
        }
      </c8y-li>
      @for (app of brandableApps; track app.contextPath) {
        <c8y-li>
          <c8y-li-icon>
            <c8y-app-icon
              class="icon-40"
              [app]="app"
            ></c8y-app-icon>
          </c8y-li-icon>
          <c8y-li-checkbox
            [attr.data-cy]="'branding-apply-branding-to-app-checkbox-' + app.contextPath"
            [formControlName]="app.contextPath"
          ></c8y-li-checkbox>
          <c8y-li-body class="p-t-8 d-block">{{ app | humanizeAppName | async }}</c8y-li-body>
        </c8y-li>
      }
    </c8y-list-group>
  }
</c8y-modal>