@if (bootstrap(); as bootstrap) {
<div class="builder-live-preview" role="img" [attr.aria-label]="'builder.livePreviewTitle' | translate">
  <header
    class="builder-live-preview__header"
    [class.builder-live-preview__header--active]="isActive('logo') || isActive('title')"
  >
    @if (bootstrap.branding.logoUrl) {
      <img class="builder-live-preview__logo" [class.builder-live-preview__logo--active]="isActive('logo')" [src]="bootstrap.branding.logoUrl" alt="" />
    } @else {
      <span class="builder-live-preview__logo builder-live-preview__logo--placeholder" [class.builder-live-preview__logo--active]="isActive('logo')"></span>
    }
    <span class="builder-live-preview__title" [class.builder-live-preview__title--active]="isActive('title')">
      {{ bootstrap.seo.default.title || bootstrap.branding.brandName }}
    </span>
  </header>

  <div
    class="builder-live-preview__hero"
    [class.builder-live-preview__hero--active]="isActive('background') || isActive('image')"
    [style.background]="bootstrap.theme.palette.backgroundSecondary"
  >
    <span class="builder-live-preview__hero-image" [class.builder-live-preview__hero-image--active]="isActive('image')" aria-hidden="true">
      <app-icon name="image" [size]="18" />
    </span>
    <span
      class="builder-live-preview__button"
      [class.builder-live-preview__button--active]="isActive('button') || isActive('color')"
      [style.background]="bootstrap.theme.palette.primary"
    >
      {{ 'builder.livePreviewButtonLabel' | translate }}
    </span>
  </div>

  <div
    class="builder-live-preview__blocks"
    [class.builder-live-preview__blocks--active]="isActive('layout') || isActive('spacing')"
  >
    @for (block of blocks(); track block.id) {
      <div
        class="builder-live-preview__block"
        [class.builder-live-preview__block--hidden]="!block.visible"
        [class.builder-live-preview__block--active]="isActive('block:' + block.id)"
        [attr.data-layout]="block.strategy"
      >
        <app-icon [name]="block.icon" [size]="14" />
      </div>
    } @empty {
      <p class="builder-live-preview__empty">{{ 'builder.livePreviewEmpty' | translate }}</p>
    }
  </div>

  <footer class="builder-live-preview__footer"></footer>
</div>
} @else {
<p class="builder-live-preview__empty">{{ 'builder.livePreviewEmpty' | translate }}</p>
}