<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.notificationInterval' | translate }}</h2>
    <p class="settings-explain">{{ 'adminSettings.notificationIntervalExplain' | translate }}</p>
    <div class="rate-row">
      <input
        class="rate-input"
        type="number"
        min="1"
        step="1"
        [ngModel]="notificationIntervalSecondsDraft()"
        (ngModelChange)="notificationIntervalSecondsDraft.set($event)"
      />
    </div>
    <div class="rate-actions">
      <button type="button" class="save-button" (click)="saveNotificationInterval()">{{ 'adminSettings.notificationIntervalSave' | translate }}</button>
      <span class="saved-message" *ngIf="showNotificationIntervalSaved()">{{ 'adminSettings.notificationIntervalSaved' | translate }}</span>
    </div>
  </div>
</section>
