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

    <div class="section-body">
      <div class="setting-item">
        <div class="setting-header">
          <p-toggleswitch
            [(ngModel)]="publicReviewSettings.downloadEnabled"
            (onChange)="onPublicReviewsToggle($event.checked)">
          </p-toggleswitch>
          <label class="setting-label">{{ t('downloadLabel') }}</label>
        </div>
      </div>

      @if (publicReviewSettings.downloadEnabled) {
        <div class="setting-item">
          <div class="setting-header">
            <p-toggleswitch
              [(ngModel)]="publicReviewSettings.autoDownloadEnabled"
              (onChange)="onAutoDownloadToggle($event.checked)">
            </p-toggleswitch>
            <label class="setting-label">{{ t('autoDownloadLabel') }}</label>
          </div>
          <p class="setting-description">{{ t('autoDownloadDesc') }}</p>
        </div>

        <div class="setting-item">
          <div class="setting-header-standalone">
            <label class="setting-label">{{ t('reviewSources') }}</label>
          </div>
          <p class="setting-description">{{ t('reviewSourcesDesc') }}</p>
          @if (publicReviewSettings.providers.length > 0) {
            <div class="setting-options">
              <div class="providers-grid">
                @for (provider of publicReviewSettings.providers; track provider.provider) {
                  <div class="provider-item">
                    <div class="provider-row">
                      <p-toggleswitch
                        [(ngModel)]="provider.enabled"
                        (onChange)="onProviderToggle(provider.provider, $event.checked)">
                      </p-toggleswitch>
                      <label class="provider-label">{{ provider.provider }}</label>
                    </div>
                    @if (provider.enabled) {
                      <div class="max-reviews-control">
                        <label class="max-reviews-label">{{ t('maxLabel') }}</label>
                        <input
                          type="number"
                          class="max-reviews-input"
                          min="1"
                          max="10"
                          [(ngModel)]="provider.maxReviews"
                          (blur)="onMaxReviewsChange(provider.provider, provider.maxReviews)"
                          [title]="t('maxTooltip')">
                      </div>
                    }
                  </div>
                }
              </div>
            </div>
          } @else {
            <div class="no-providers-message">
              <i class="pi pi-exclamation-triangle"></i>
              <span>{{ t('noProviders') }}</span>
            </div>
          }
        </div>
      }
    </div>
  </div>
</ng-container>
