<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
      [isFrozen]="true"
      [width]="1"
      [height]="6"
    >
      <c8y-dashboard-child-title>
        <span>
          {{
            (widgetConfigService.selected$ | async)?.data?.title
              | translate: { noTranslateRemoveContext: !translateWidgetTitle }
          }}
        </span>
      </c8y-dashboard-child-title>

      @if ((widgetConfigService.previewViewState$ | async) === 'noPreview') {
        <div class="fit-h d-flex d-col j-c-center a-i-center">
          <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>
      }

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

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