<fieldset class="c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16">
  <legend>{{ 'Preview' | translate }}</legend>
  <c8y-dashboard
    class="dashboard-preview-slot"
    [columns]="1"
    [ngClass]="previewClasses"
  >
    <c8y-dashboard-child
      [title]="(widgetConfigService.selected$ | async)?.data?.title"
      [isFrozen]="true"
      [width]="1"
      [height]="6"
    >
      <c8y-dashboard-child-title>
        <span translate>{{ (widgetConfigService.selected$ | async)?.data?.title }}</span>
      </c8y-dashboard-child-title>

      <div
        class="fit-h d-flex d-col j-c-center a-i-center"
        *ngIf="(widgetConfigService.previewViewState$ | async) === 'noPreview'"
      >
        <c8y-ui-empty-state
          [icon]="'visibility-off'"
          [title]="'No preview available.' | translate"
          [subtitle]="'This widget does not provide any preview.' | translate"
          [horizontal]="false"
        ></c8y-ui-empty-state>
      </div>

      <c8y-dynamic-component
        *ngIf="(widgetConfigService.previewViewState$ | async) === 'configPreview'"
        [componentId]="(widgetConfigService.selected$ | async)?.id"
        [config]="(widgetConfigService.currentConfig$ | async)?.config"
      ></c8y-dynamic-component>

      <ng-template
        *ngIf="(widgetConfigService.previewViewState$ | async) === 'templatePreview'"
        [ngTemplateOutlet]="widgetConfigService.preview$ | async"
      ></ng-template>
    </c8y-dashboard-child>
  </c8y-dashboard>
</fieldset>