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

  <c8y-list-group
    class="m-b-0 no-border-last"
    *ngIf="form"
    [formGroup]="form"
  >
    <c8y-li>
      <p
        class="text-center text-medium"
        *ngIf="numberOfSelectedDashboards$ | async as numberOfDashboards; else noSelectedDashboards"
        translate
        [translateParams]="{ numberOfDashboards: numberOfDashboards }"
        ngNonBindable
      >
        {{ numberOfDashboards }} dashboards selected for widget
      </p>
      <ng-template #noSelectedDashboards>
        <p
          class="text-center text-medium"
          translate
        >
          Select one or more dashboards to send the Data points graph widget with the current
          configuration
        </p>
      </ng-template>
    </c8y-li>
    <c8y-li *ngFor="let dashboard of dashboards">
      <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>

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