marketplaces/src/app/features/content-management/components/static-pages-editor.component.html

<app-section-card>
  @if (fieldError('staticPages'); as msg) {
    <p class="editor-error" role="alert">{{ msg }}</p>
  }

  @if (editingPage(); as page) {
    <app-page-editor
      [page]="page"
      [locales]="locales()"
      [defaultLocale]="defaultLocale()"
      [hasDuplicateSlug]="hasDuplicateSlug(page)"
      [hasDuplicateRoute]="hasDuplicateRoute(page)"
      [hasEmptyTitle]="hasEmptyTitle(page)"
      [hasInvalidHtml]="hasInvalidHtml(page)"
      [hasInvalidSeo]="hasInvalidSeo(page)"
      (close)="closeEditor()"
      (updatePage)="updatePage(page.id, $event)"
      (updateTranslation)="updateTranslation(page.id, $event.locale, $event.field, $event.value)"
      (updateSeo)="updateSeo(page.id, $event)"
      (updateGallery)="updateGallery(page.id, $event)"
      (openMediaPicker)="openMediaPicker(page.id, $event)"
      (clearMedia)="clearMedia(page.id, $event)"
      (duplicatePage)="duplicatePage(page.id)"
      (deletePage)="deletePage(page.id)"
    />
  } @else {
    <div class="editor-actions">
      <h2>{{ 'builder.staticPages' | translate }}</h2>
      <app-button variant="primary" (click)="createPage()">{{ 'builder.createPage' | translate }}</app-button>
    </div>

    <app-content-dashboard [health]="contentHealth()" (createPage)="createPage()" (goToPage)="openEditor($event)" />

    <div class="editor-grid three static-pages-toolbar">
      <app-form-field [label]="'staticPages.searchPlaceholder' | translate">
        <app-input [ngModel]="searchQuery()" (ngModelChange)="updateSearchQuery($event)" [placeholder]="'staticPages.searchPlaceholder' | translate" />
      </app-form-field>
      <app-form-field [label]="'staticPages.statusLabel' | translate">
        <app-select [options]="statusFilterOptions()" [ngModel]="statusFilter()" (ngModelChange)="updateStatusFilter($event)" />
      </app-form-field>
      <app-form-field [label]="'builder.languagesTab' | translate">
        <app-select [options]="localeFilterOptions()" [ngModel]="localeFilter()" (ngModelChange)="updateLocaleFilter($event)" />
      </app-form-field>
    </div>

    @if (pages().length > 0) {
      <div class="editor-actions static-pages-bulk-bar">
        <label class="toggle-row">
          <app-toggle [ngModel]="allVisibleSelected()" (ngModelChange)="toggleSelectAllVisible($event)" [ariaLabel]="'staticPages.selectAll' | translate" />
          <span>{{ 'staticPages.selectAll' | translate }}</span>
        </label>
        @if (selectedCount() > 0) {
          <span>{{ selectedCount() }} {{ 'staticPages.selectedCount' | translate }}</span>
          <app-button variant="secondary" size="sm" (click)="bulkSetEnabled(true)">{{ 'staticPages.bulkEnable' | translate }}</app-button>
          <app-button variant="secondary" size="sm" (click)="bulkSetEnabled(false)">{{ 'staticPages.bulkDisable' | translate }}</app-button>
          <app-button variant="secondary" size="sm" (click)="bulkSetStatus('published')">{{ 'staticPages.bulkPublishAction' | translate }}</app-button>
          <app-button variant="secondary" size="sm" (click)="bulkSetStatus('draft')">{{ 'staticPages.bulkUnpublish' | translate }}</app-button>
          <app-button variant="danger" size="sm" (click)="bulkDelete()">{{ 'staticPages.bulkDelete' | translate }}</app-button>
        }
      </div>
    }

    @if (pages().length === 0) {
      <app-empty-state [title]="'contentManagement.emptyStateGuideTitle' | translate" [description]="'contentManagement.emptyStateGuideBody' | translate">
        <span slot="actions">
          <app-button variant="primary" (click)="createPage()">{{ 'builder.createPage' | translate }}</app-button>
        </span>
      </app-empty-state>
    }

    <div class="page-card-grid">
      @for (page of pages(); track page.id) {
        <div class="page-card-grid__item">
          <label class="page-card-grid__select">
            <app-toggle [ngModel]="isSelected(page.id)" (ngModelChange)="toggleSelect(page.id, $event)" [ariaLabel]="page.id" size="sm" />
          </label>
          <app-page-card
            [page]="page"
            [legalLabelKey]="legalLabelKey(page)"
            [seoStatus]="seoStatus(page)"
            [hasIssue]="hasAnyIssue(page)"
            [updatedAtLabel]="updatedAtLabel(page)"
            (open)="openEditor(page.id)"
            (duplicate)="duplicatePage(page.id)"
            (preview)="togglePreview(page.id)"
            (remove)="deletePage(page.id)"
          />
          @if (previewOpenPageId() === page.id) {
            <app-static-page-preview [html]="previewHtml(page)" [title]="previewTitle(page)" />
          }
        </div>
      }
    </div>
  }

  <app-media-picker [open]="mediaPickerOpen" (selected)="onImagePicked($event)" (closed)="mediaPickerOpen = false" />
</app-section-card>