<c8y-modal
  [title]="'Send as widget to reports' | translate"
  [disabled]="!form || form.invalid"
  [headerClasses]="'dialog-header'"
  (onDismiss)="cancel()"
  (onClose)="save()"
  [labels]="labels"
  [flushBody]="true"
>
  <ng-container c8y-modal-title>
    <span c8yIcon="c8y-reports"></span>
  </ng-container>

  @if (form) {
    <c8y-list-group
      class="m-b-0 no-border-last"
      [formGroup]="form"
    >
      <c8y-li>
        @if (numberOfSelectedReports$ | async; as numberOfReports) {
          <p
            class="text-center text-medium"
            translate
            [translateParams]="{ numberOfReports: numberOfReports }"
            ngNonBindable
          >
            {{ numberOfReports }} reports selected for widget
          </p>
        } @else {
          <!-- wrapping the line below would change the msgid, which is translated in 9 locales -->
          <!-- prettier-ignore -->
          <p class="text-center text-medium" translate>
          Select one or more reports to send the Data points graph widget with the current configuration
          </p>
        }
      </c8y-li>
      @for (report of reports; track report.id) {
        <c8y-li>
          <c8y-li-checkbox
            [attr.data-cy]="'branding-apply-branding-to-app-checkbox-' + report.id"
            [formControlName]="report.id"
          ></c8y-li-checkbox>
          <c8y-li-icon class="p-l-0">
            <i c8yIcon="{{ report.icon }}"></i>
          </c8y-li-icon>
          <div
            class="text-truncate"
            title="{{ report.name }}"
          >
            {{ report.name }}
          </div>
        </c8y-li>
      }
    </c8y-list-group>
  }

  @if (reports.length === 0) {
    <c8y-ui-empty-state
      [icon]="'c8y-reports'"
      [title]="'There are no reports defined.' | translate"
      [subtitle]="'Add a report first.' | translate"
    ></c8y-ui-empty-state>
  }
</c8y-modal>