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

<section class="editor-section-card">
  <div class="editor-actions">
    <h2>{{ 'builder.staticPages' | translate }}</h2>
    <app-button variant="primary" (click)="createPage()">{{ 'builder.createPage' | translate }}</app-button>
  </div>

  @if (validation().duplicateSlugs.length > 0) {
    <app-badge variant="danger">{{ 'staticPages.duplicateSlug' | translate }}</app-badge>
  }
  @if (validation().emptyTitles.length > 0) {
    <app-badge variant="danger">{{ 'staticPages.emptyTitle' | translate }}</app-badge>
  }

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

  <div class="stack-list">
    @for (page of pages(); track page.id) {
      <app-card padding="md">
        <div class="page-card">
          <div class="page-card__header">
            <h3 class="page-card__title">{{ page.id }}</h3>
            <div class="editor-actions">
              <app-button variant="ghost" size="sm" (click)="move(page.id, -1)">&uarr;</app-button>
              <app-button variant="ghost" size="sm" (click)="move(page.id, 1)">&darr;</app-button>
              <app-button variant="danger" size="sm" (click)="deletePage(page.id)">{{ 'builder.deletePage' | translate }}</app-button>
            </div>
          </div>

          <div class="editor-grid three">
            <app-form-field [label]="'builder.pageId' | translate">
              <app-input [ngModel]="page.id" (ngModelChange)="updatePage(page.id, { id: $event })" />
            </app-form-field>
            <app-form-field [label]="'builder.slug' | translate">
              <app-input [ngModel]="page.slug" (ngModelChange)="updatePage(page.id, { slug: $event })" />
            </app-form-field>
            <app-form-field [label]="'builder.iconLabel' | translate">
              <app-input [ngModel]="page.icon || ''" (ngModelChange)="updatePage(page.id, { icon: $event })" />
            </app-form-field>
            <app-form-field [label]="'builder.footerGroup' | translate">
              <app-input [ngModel]="page.footerGroup || ''" (ngModelChange)="updatePage(page.id, { footerGroup: $event })" />
            </app-form-field>
            <app-form-field [label]="'builder.orderLabel' | translate">
              <app-input type="number" [ngModel]="page.order" (ngModelChange)="updatePage(page.id, { order: +$event })" />
            </app-form-field>
          </div>

          <div class="toggle-grid">
            <label class="toggle-row"><input type="checkbox" [checked]="page.showInFooter" (change)="updatePage(page.id, { showInFooter: $any($event.target).checked })" /><span>{{ 'builder.showInFooter' | translate }}</span></label>
            <label class="toggle-row"><input type="checkbox" [checked]="page.showInHeader" (change)="updatePage(page.id, { showInHeader: $any($event.target).checked })" /><span>{{ 'builder.showInHeader' | translate }}</span></label>
            <label class="toggle-row"><input type="checkbox" [checked]="page.showInSitemap" (change)="updatePage(page.id, { showInSitemap: $any($event.target).checked })" /><span>{{ 'builder.showInSitemap' | translate }}</span></label>
            <label class="toggle-row"><input type="checkbox" [checked]="page.requiresAuthentication" (change)="updatePage(page.id, { requiresAuthentication: $any($event.target).checked })" /><span>{{ 'builder.requiresAuthentication' | translate }}</span></label>
          </div>

          @for (locale of locales(); track locale) {
            <div class="editor-grid two">
              <app-form-field [label]="(('builder.translationTitle' | translate) + ' ' + locale)">
                <app-input [ngModel]="page.translations[locale]?.title || ''" (ngModelChange)="updateTranslation(page.id, locale, 'title', $event)" />
              </app-form-field>
              <label class="full">
                <span>{{ 'builder.htmlPreview' | translate }} {{ locale }}</span>
                <app-marketplace-html-editor
                  [html]="page.translations[locale]?.html || ''"
                  (htmlChange)="updateTranslation(page.id, locale, 'html', $event)"
                />
              </label>
            </div>
          }

          <h4 class="page-card__subheading">{{ 'builder.seoSection' | translate }}</h4>
          <div class="editor-grid two">
            <app-form-field [label]="'builder.seoTitle' | translate">
              <app-input [ngModel]="page.seo?.title || ''" (ngModelChange)="updateSeo(page.id, { title: $event })" />
            </app-form-field>
            <app-form-field [label]="'builder.seoDescription' | translate">
              <app-input [ngModel]="page.seo?.description || ''" (ngModelChange)="updateSeo(page.id, { description: $event })" />
            </app-form-field>
            <app-form-field [label]="'builder.seoKeywords' | translate">
              <app-input [ngModel]="page.seo?.keywords || ''" (ngModelChange)="updateSeo(page.id, { keywords: $event })" />
            </app-form-field>
            <app-form-field [label]="'builder.seoCanonical' | translate">
              <app-input [ngModel]="page.seo?.canonical || ''" (ngModelChange)="updateSeo(page.id, { canonical: $event })" />
            </app-form-field>
            <app-form-field [label]="'builder.seoOgTitle' | translate">
              <app-input [ngModel]="page.seo?.ogTitle || ''" (ngModelChange)="updateSeo(page.id, { ogTitle: $event })" />
            </app-form-field>
            <app-form-field [label]="'builder.seoOgDescription' | translate">
              <app-input [ngModel]="page.seo?.ogDescription || ''" (ngModelChange)="updateSeo(page.id, { ogDescription: $event })" />
            </app-form-field>
            <app-form-field [label]="'builder.seoOgImage' | translate">
              <app-input [ngModel]="page.seo?.ogImage || ''" (ngModelChange)="updateSeo(page.id, { ogImage: $event })" />
            </app-form-field>
          </div>
        </div>
      </app-card>
    }
  </div>
</section>