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

  @if (form) {
    <c8y-list-group
      class="m-b-0 no-border-last"
      [formGroup]="form"
    >
      <c8y-li>
        @if (numberOfSelectedDashboards$ | async; as numberOfDashboards) {
          <p
            class="text-center text-medium"
            translate
            [translateParams]="{ numberOfDashboards: numberOfDashboards }"
            ngNonBindable
          >
            {{ numberOfDashboards }} dashboards selected for widget
          </p>
        } @else {
          <p
            class="text-center text-medium"
            translate
          >
            Select one or more dashboards to send the Data points graph widget with the current
            configuration
          </p>
        }
      </c8y-li>
      @for (dashboard of dashboards; track dashboard.id) {
        <c8y-li>
          <c8y-li-checkbox
            [attr.data-cy]="'branding-apply-branding-to-app-checkbox-' + dashboard.id"
            [formControlName]="dashboard.id"
          ></c8y-li-checkbox>
          <c8y-li-icon class="p-l-0">
            <i c8yIcon="{{ dashboard.icon }}"></i>
          </c8y-li-icon>
          <div
            class="text-truncate"
            title="{{ dashboard.name }}"
          >
            {{ dashboard.name }}
          </div>
        </c8y-li>
      }
    </c8y-list-group>
  }

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