<fieldset class="c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16 flex-grow d-flex d-col min-height-0">
  <legend>{{ 'Preview' | translate }}</legend>
  <c8y-dashboard
    class="dashboard-preview-slot flex-grow min-height-0"
    [columns]="1"
    [ngClass]="previewClasses"
  >
    @if (showContent()) {
      <c8y-dashboard-child
        [isFrozen]="true"
        [width]="1"
        [height]="6"
      >
        @let widgetTitle =
          (widgetConfigService.selected$ | async)?.data?.title
            | translate: { noTranslateRemoveContext: !translateWidgetTitle };
        <c8y-dashboard-child-title [attr.title]="widgetTitle">
          <span>
            {{ widgetTitle }}
          </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>