marketplaces/src/app/features/admin/settings/pages/admin-settings-page.component.html

<section class="admin-settings-page">
  <div class="settings-card">
    <h2>{{ 'adminSettings.density' | translate }}</h2>
    <p class="settings-explain">{{ 'adminSettings.densityExplain' | translate }}</p>
    <label class="toggle-row">
      <app-toggle
        [ngModel]="preferences.density() === 'compact'"
        (ngModelChange)="onCompactToggle($event)"
        [ariaLabel]="'adminSettings.densityCompact' | translate"
      />
      <span>{{ 'adminSettings.densityCompact' | translate }}</span>
    </label>
  </div>

  <div class="settings-card">
    <h2>{{ 'adminSettings.currencyRates' | translate }}</h2>
    <p class="settings-explain">{{ 'adminSettings.currencyRatesExplain' | translate }}</p>
    <div class="rate-row" *ngFor="let currency of languageService.currencies">
      <span class="rate-code">{{ currency.code }}</span>
      <input
        class="rate-input"
        type="number"
        min="0"
        step="0.0001"
        [disabled]="currency.code === currencyRates.baseCurrency"
        [ngModel]="rateDrafts()[currency.code]"
        (ngModelChange)="onRateInput(currency.code, $event)"
      />
    </div>
    <div class="rate-actions">
      <button type="button" class="save-button" (click)="saveRates()">{{ 'adminSettings.currencyRatesSave' | translate }}</button>
      <span class="saved-message" *ngIf="showSavedMessage()">{{ 'adminSettings.currencyRatesSaved' | translate }}</span>
    </div>
  </div>
</section>