<ng-container *transloco="let t; prefix: 'dashboard.settings'">
  <div class="dashboard-settings">
    <div class="panel-header">
      <div class="header-icon-wrapper">
        <i class="pi pi-sliders-h header-icon"></i>
      </div>
      <div class="header-text">
        <h2 class="panel-title">{{ t('title') }}</h2>
        <p class="panel-description">{{ t('description') }}</p>
      </div>
      <p-button
        icon="pi pi-times"
        [text]="true"
        [rounded]="true"
        severity="secondary"
        (onClick)="cancel()"
        class="close-button"
      />
    </div>

    <div class="scrollers-container">
      @for (scroller of config.scrollers; track scroller.id; let i = $index) {
        <div class="scroller-item">
          <div class="scroller-content">
            <div class="scroller-controls-left">
              <p-checkbox [(ngModel)]="scroller.enabled" [binary]="true"></p-checkbox>
            </div>

            <div class="scroller-fields">
              <div class="scroller-field" [class.expanded]="scroller.type !== 'magicShelf'">
                <label>{{ t('type') }}</label>
                <p-select
                  fluid
                  [options]="availableScrollerTypes"
                  [(ngModel)]="scroller.type"
                  (onChange)="onScrollerTypeChange(scroller)"
                  [placeholder]="t('selectType')"
                  appendTo="body">
                </p-select>
              </div>

              @if (scroller.type === 'magicShelf') {
                <div class="scroller-field">
                  <label>{{ t('magicShelf') }}</label>
                  <p-select
                    fluid
                    [options]="(magicShelves$ | async)!"
                    [(ngModel)]="scroller.magicShelfId"
                    [placeholder]="t('selectMagicShelf')"
                    appendTo="body">
                  </p-select>
                </div>

                <div class="scroller-field">
                  <label>{{ t('sortField') }}</label>
                  <p-select
                    fluid
                    [options]="sortFieldOptions"
                    [(ngModel)]="scroller.sortField"
                    [placeholder]="t('selectField')"
                    appendTo="body">
                  </p-select>
                </div>

                <div class="scroller-field">
                  <label>{{ t('direction') }}</label>
                  <p-select
                    fluid
                    [options]="sortDirectionOptions"
                    [(ngModel)]="scroller.sortDirection"
                    [placeholder]="t('selectDirection')"
                    appendTo="body">
                  </p-select>
                </div>
              }
            </div>

            <div class="scroller-field max-items-field">
              <label>{{ t('maxItems') }}</label>
              <p-inputNumber
                fluid
                [(ngModel)]="scroller.maxItems"
                [min]="MIN_ITEMS"
                [max]="MAX_ITEMS"
                [showButtons]="true">
              </p-inputNumber>
            </div>

            <div class="scroller-controls-right">
              <p-button
                icon="pi pi-arrow-up"
                outlined
                rounded
                severity="info"
                size="small"
                [disabled]="i === 0"
                (click)="moveUp(i)">
              </p-button>
              <p-button
                icon="pi pi-arrow-down"
                outlined
                rounded
                severity="info"
                size="small"
                [disabled]="i === config.scrollers.length - 1"
                (click)="moveDown(i)">
              </p-button>
              <p-button
                icon="pi pi-trash"
                outlined
                rounded
                size="small"
                severity="danger"
                (click)="removeScroller(i)"
                [disabled]="config.scrollers.length === 1">
              </p-button>
            </div>
          </div>
        </div>
      }
    </div>

    <div class="dialog-footer">
      <div class="footer-left">
        <p-button
          [label]="t('addScroller')"
          icon="pi pi-plus"
          severity="primary"
          (click)="addScroller()"
          [disabled]="config.scrollers.length >= 5">
        </p-button>
        <p-button
          [label]="t('resetToDefault')"
          icon="pi pi-refresh"
          severity="secondary"
          text
          (click)="resetToDefault()">
        </p-button>
      </div>
      <div class="footer-actions">
        <p-button
          [label]="'common.cancel' | transloco"
          [outlined]="true"
          severity="secondary"
          (click)="cancel()">
        </p-button>
        <p-button
          [label]="'common.save' | transloco"
          icon="pi pi-check"
          severity="success"
          (click)="save()">
        </p-button>
      </div>
    </div>
  </div>
</ng-container>
