@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 widget-list">
    @for (entry of widgets(); track entry.widget.id; let first = $first; let last = $last) {
      <article class="sub-card widget-card" [class.widget-card--hidden]="!isVisible(entry.widget)">
        <header class="widget-card__header">
          <span class="pi {{ widgetIcon(entry.widget.type) }} widget-card__icon" aria-hidden="true"></span>
          <h3 class="widget-card__title">{{ widgetLabel(entry.widget) }}</h3>
          @if (!isVisible(entry.widget)) {
            <span class="widget-card__hidden-badge">{{ 'builder.widgetHidden' | translate }}</span>
          }
          <div class="widget-card__actions">
            <button type="button" [attr.aria-label]="'builder.widgetMoveUp' | translate" [disabled]="first" (click)="moveWidget(entry.widget.id, -1)">
              <span class="pi pi-arrow-up" aria-hidden="true"></span>
            </button>
            <button type="button" [attr.aria-label]="'builder.widgetMoveDown' | translate" [disabled]="last" (click)="moveWidget(entry.widget.id, 1)">
              <span class="pi pi-arrow-down" aria-hidden="true"></span>
            </button>
            <label class="widget-card__visible-toggle">
              <app-toggle [ngModel]="isVisible(entry.widget)" (ngModelChange)="toggleVisible(entry.widget.id)" [ariaLabel]="'builder.widgetVisible' | translate" />
              <span>{{ 'builder.widgetVisible' | translate }}</span>
            </label>
            <button type="button" [attr.aria-label]="'builder.widgetDuplicate' | translate" (click)="duplicateWidget(entry.widget.id)">
              <span class="pi pi-copy" aria-hidden="true"></span>
            </button>
            <button type="button" class="widget-card__remove" [attr.aria-label]="'builder.widgetRemove' | translate" (click)="removeWidget(entry.widget.id)">
              <span class="pi pi-trash" aria-hidden="true"></span>
            </button>
          </div>
        </header>

        @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 {
            <details class="widget-card__advanced">
              <summary>{{ 'builder.widgetAdvancedSettings' | translate }}</summary>
              <label>
                <span>{{ 'builder.widgetJson' | translate }}</span>
                <small class="field-desc">{{ 'builder.widgetJsonDesc' | translate }}</small>
                <textarea rows="8" [ngModel]="widgetJsonValue(entry.widget.id, entry.widget.props)" (ngModelChange)="updateJson(entry.widget.id, $event)"></textarea>
                @if (widgetJsonError(entry.widget.id); as jsonError) {
                  <p class="editor-error">{{ jsonError }}</p>
                }
              </label>
            </details>
          }
        }
      </article>
    }
  </div>
</app-section-card>
}