<ng-container *transloco="let t; prefix: 'settingsMeta.fieldSelector'">
  <div class="settings-card">
    <div class="section-header">
      <h3 class="section-title">
        <i class="pi pi-list"></i>
        {{ t('sectionTitle') }}
      </h3>
      <p class="section-description">
        {{ t('sectionDesc') }}
      </p>
    </div>

    <div class="section-body">
      <div class="provider-groups-container">
        @for (group of providerGroups; track group.labelKey) {
          <div class="provider-group">
            <div class="group-header">
              <span class="group-icon pi pi-database"></span>
              <h4 class="group-label">{{ getProviderLabel(group.labelKey) }}</h4>
            </div>
            <div class="field-list">
              @for (field of group.fields; track field) {
                <div class="field-item">
                  <p-toggleswitch
                    [inputId]="field"
                    [ngModel]="selectedFields.includes(field)"
                    (ngModelChange)="toggleField(field, $event)">
                  </p-toggleswitch>
                  <label [for]="field">{{ getFieldLabel(field) }}</label>
                </div>
              }
            </div>
          </div>
        }
      </div>
    </div>
  </div>
</ng-container>
