@if (widgets().length > 0) {
<app-section-card [title]="'builder.widgets' | translate">
  @if (fieldError('pages'); as msg) {
    <p class="editor-error">{{ msg }}</p>
  }
  <div class="stack-list">
    @for (entry of widgets(); track entry.widget.id) {
      <article class="sub-card">
        <h3>{{ entry.widget.type }} · {{ entry.widget.id }}</h3>
        @switch (entry.widget.type) {
          @case ('hero') {
            <div class="editor-grid two">
              <label><span>{{ 'builder.layoutLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetLayoutDesc' | translate }}</small><app-input [ngModel]="entry.widget.props['layout'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)" /></label>
              <label><span>{{ 'builder.height' | translate }}</span><small class="field-desc">{{ 'builder.widgetHeightDesc' | translate }}</small><app-input [ngModel]="entry.widget.props['height'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'height', $event)" /></label>
              <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['overlay']" (ngModelChange)="updateProp(entry.widget.id, 'overlay', $event)" [ariaLabel]="'builder.overlay' | translate" /><span>{{ 'builder.overlay' | translate }}</span><small class="field-desc">{{ 'builder.widgetOverlayDesc' | translate }}</small></label>
              <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['autoplay']" (ngModelChange)="updateProp(entry.widget.id, 'autoplay', $event)" [ariaLabel]="'builder.autoplay' | translate" /><span>{{ 'builder.autoplay' | translate }}</span><small class="field-desc">{{ 'builder.widgetAutoplayDesc' | translate }}</small></label>
            </div>
          }
          @case ('categories') {
            <div class="editor-grid two">
              <label><span>{{ 'builder.layoutLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetLayoutDesc' | translate }}</small><app-input [ngModel]="entry.widget.props['layout'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)" /></label>
              <label><span>{{ 'builder.columns' | translate }}</span><small class="field-desc">{{ 'builder.widgetColumnsDesc' | translate }}</small><app-input type="number" [ngModel]="entry.widget.props['columns'] || 1" (ngModelChange)="updateProp(entry.widget.id, 'columns', +$event)" /></label>
            </div>
          }
          @case ('product-collection') {
            <div class="editor-grid three">
              <label><span>{{ 'builder.layoutLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetLayoutDesc' | translate }}</small><app-input [ngModel]="entry.widget.props['layout'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)" /></label>
              <label><span>{{ 'builder.cardsPerRow' | translate }}</span><small class="field-desc">{{ 'builder.widgetCardsPerRowDesc' | translate }}</small><app-input type="number" [ngModel]="entry.widget.props['cardsPerRow'] || 4" (ngModelChange)="updateProp(entry.widget.id, 'cardsPerRow', +$event)" /></label>
              <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['filters']" (ngModelChange)="updateProp(entry.widget.id, 'filters', $event)" [ariaLabel]="'builder.filtersLabel' | translate" /><span>{{ 'builder.filtersLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetFiltersDesc' | translate }}</small></label>
              <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['showBadges']" (ngModelChange)="updateProp(entry.widget.id, 'showBadges', $event)" [ariaLabel]="'builder.showBadges' | translate" /><span>{{ 'builder.showBadges' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowBadgesDesc' | translate }}</small></label>
              <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['showRating']" (ngModelChange)="updateProp(entry.widget.id, 'showRating', $event)" [ariaLabel]="'builder.showRating' | translate" /><span>{{ 'builder.showRating' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowRatingDesc' | translate }}</small></label>
              <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['showPrice']" (ngModelChange)="updateProp(entry.widget.id, 'showPrice', $event)" [ariaLabel]="'builder.showPrice' | translate" /><span>{{ 'builder.showPrice' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowPriceDesc' | translate }}</small></label>
            </div>
          }
          @default {
            <label>
              <span>{{ 'builder.widgetJson' | translate }}</span>
              <small class="field-desc">{{ 'builder.widgetJsonDesc' | translate }}</small>
              <textarea rows="8" [ngModel]="propsJson(entry.widget.props)" (ngModelChange)="updateJson(entry.widget.id, $event)"></textarea>
            </label>
          }
        }
      </article>
    }
  </div>
</app-section-card>
}