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

    <div class="section-body">
      <div class="setting-item">
        <div class="setting-header-standalone">
          <label class="setting-label">{{ t('displayMode') }}</label>
        </div>
        <p class="setting-description">{{ t('displayModeDesc') }}</p>
        <div class="setting-options">
          <div class="button-group">
            <button
              type="button"
              class="option-button"
              [class.selected]="viewMode === 'route'"
              (click)="onViewModeChange('route')">
              <i class="pi pi-window-maximize"></i>
              <span class="option-text">{{ t('openInPage') }}</span>
            </button>
            <button
              type="button"
              class="option-button"
              [class.selected]="viewMode === 'dialog'"
              (click)="onViewModeChange('dialog')">
              <i class="pi pi-external-link"></i>
              <span class="option-text">{{ t('openInDialog') }}</span>
            </button>
          </div>
        </div>
      </div>

      <div class="setting-item">
        <div class="setting-header-standalone">
          <label class="setting-label">{{ t('seriesViewMode') }}</label>
        </div>
        <p class="setting-description">{{ t('seriesViewModeDesc') }}</p>
        <div class="setting-options">
          <div class="button-group">
            <button
              type="button"
              class="option-button"
              [class.selected]="seriesViewMode === true"
              (click)="onSeriesViewModeChange(true)">
              <i class="pi pi-check-circle"></i>
              <span class="option-text">{{ t('enabled') }}</span>
            </button>
            <button
              type="button"
              class="option-button"
              [class.selected]="seriesViewMode === false"
              (click)="onSeriesViewModeChange(false)">
              <i class="pi pi-times-circle"></i>
              <span class="option-text">{{ t('disabled') }}</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-container>
