marketplaces/src/app/features/project-editor/sections/preview-section.component.html

<app-section-card [title]="'builder.previewChangesTitle' | translate">
  @if (issues().length > 0) {
    <ul class="preview-validation" [class.has-errors]="hasBlockingIssues()">
      @for (issue of issues(); track issue.code) {
        <li [class.is-warning]="issue.severity === 'warning'" [class.is-error]="issue.severity === 'error'">{{ issue.message | translate }}</li>
      }
    </ul>
  } @else {
    <p class="preview-validation-ok">{{ 'builder.previewNoIssues' | translate }}</p>
  }

  @if (changeSummary().length > 0) {
    <table class="preview-changes">
      <thead>
        <tr>
          <th>{{ 'builder.previewChangeField' | translate }}</th>
          <th>{{ 'builder.previewChangeBefore' | translate }}</th>
          <th>{{ 'builder.previewChangeAfter' | translate }}</th>
        </tr>
      </thead>
      <tbody>
        @for (row of changeSummary(); track row.fieldKey) {
          <tr>
            <td>{{ row.labelKey | translate }}</td>
            <td class="preview-before">{{ row.before || '—' }}</td>
            <td class="preview-after">{{ row.after || '—' }}</td>
          </tr>
        }
      </tbody>
    </table>
  } @else {
    <p class="preview-validation-ok">{{ 'builder.previewNoChanges' | translate }}</p>
  }
</app-section-card>

<app-section-card [title]="'builder.preview' | translate">
  <div class="editor-actions">
    <app-button variant="primary" (click)="preview()">{{ 'builder.livePreview' | translate }}</app-button>
    <app-button variant="secondary" (click)="refreshExport()">{{ 'builder.exportBootstrap' | translate }}</app-button>
    <app-button variant="secondary" (click)="importDraft()">{{ 'builder.importBootstrap' | translate }}</app-button>
  </div>
  @if (importError()) {
    <p class="editor-error">{{ importError()! | translate }}</p>
  }
  <label>
    <span>{{ 'builder.exportedBootstrap' | translate }}</span>
    <textarea rows="10" [ngModel]="exportValue()" (ngModelChange)="exportValue.set($event)"></textarea>
  </label>
  <label>
    <span>{{ 'builder.importSource' | translate }}</span>
    <textarea rows="10" [ngModel]="importValue()" (ngModelChange)="importValue.set($event)"></textarea>
  </label>
</app-section-card>