@if (widgets().length === 0) {
<app-section-card [title]="'builder.widgets' | translate">
  <app-empty-state [title]="'builder.widgetsEmptyTitle' | translate" [description]="'builder.widgetsEmptyDesc' | translate" />
</app-section-card>
} @else {
<app-section-card [title]="'builder.widgets' | translate">
  @if (fieldError('pages'); as msg) {
    <p class="editor-error" role="alert">{{ 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">
          <app-icon [name]="widgetIcon(entry.widget.type)" [size]="18" class="widget-card__icon" />
          <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)">
              <app-icon name="arrowUp" [size]="16" />
            </button>
            <button type="button" [attr.aria-label]="'builder.widgetMoveDown' | translate" [disabled]="last" (click)="moveWidget(entry.widget.id, 1)">
              <app-icon name="arrowDown" [size]="16" />
            </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)">
              <app-icon name="copy" [size]="16" />
            </button>
            <button type="button" class="widget-card__remove" [attr.aria-label]="'builder.widgetRemove' | translate" (click)="removeWidget(entry.widget.id)">
              <app-icon name="trash" [size]="16" />
            </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>
                <select [ngModel]="entry.widget.props['layout'] || 'full-bleed'" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)">
                  <option value="full-bleed">{{ 'builder.heroLayoutFullBleed' | translate }}</option>
                  <option value="boxed">{{ 'builder.heroLayoutBoxed' | translate }}</option>
                </select>
              </label>
              <label>
                <span>{{ 'builder.height' | translate }}</span>
                <small class="field-desc">{{ 'builder.widgetHeightDesc' | translate }}</small>
                <select [ngModel]="entry.widget.props['height'] || '60vh'" (ngModelChange)="updateProp(entry.widget.id, 'height', $event)">
                  <option value="40vh">{{ 'builder.heroHeightCompact' | translate }}</option>
                  <option value="60vh">{{ 'builder.heroHeightMedium' | translate }}</option>
                  <option value="80vh">{{ 'builder.heroHeightTall' | translate }}</option>
                  <option value="100vh">{{ 'builder.heroHeightFullScreen' | translate }}</option>
                </select>
              </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 class="full">
                <h4 class="widget-card__subheading">{{ 'builder.heroSlides' | translate }}</h4>
                <p class="field-desc">{{ 'builder.heroSlidesHint' | translate }}</p>
                @for (slide of heroSlides(entry.widget); track $index) {
                  <div class="hero-slide-row">
                    <app-input [ngModel]="slide.title" (ngModelChange)="updateHeroSlide(entry.widget.id, $index, 'title', $event)" [placeholder]="'builder.heroSlideTitlePlaceholder' | translate" />
                    <app-input [ngModel]="slide.subtitle" (ngModelChange)="updateHeroSlide(entry.widget.id, $index, 'subtitle', $event)" [placeholder]="'builder.heroSlideSubtitlePlaceholder' | translate" />
                    <button type="button" class="hero-slide-row__remove" (click)="removeHeroSlide(entry.widget.id, $index)" [attr.aria-label]="'builder.removeSlide' | translate">&times;</button>
                  </div>
                }
                <app-button variant="secondary" size="sm" (click)="addHeroSlide(entry.widget.id)">{{ 'builder.addSlide' | translate }}</app-button>
              </div>
            </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" role="alert">{{ jsonError }}</p>
                }
              </label>
            </details>
          }
        }
      </article>
    }
  </div>
</app-section-card>

<app-confirm-dialog
  [open]="!!pendingRemoveWidgetId()"
  [titleText]="'builder.widgetRemoveConfirm' | translate"
  [message]="'builder.widgetRemoveConfirm' | translate"
  [destructive]="true"
  (confirmed)="confirmRemoveWidget()"
  (cancelled)="pendingRemoveWidgetId.set(null)"
/>
}