openstapps/src/app/modules/settings/page/settings-page.html

<ion-header>
  <ion-toolbar color="primary" mode="ios">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>{{ 'settings.title' | translate | titlecase }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list *ngFor="let categoryKey of categoriesOrder">
    <div *ngIf="objectKeys(settingsCache).includes(categoryKey)">
      <ion-item-divider>
        <h5>
          {{
            'categories[0]'
              | thingTranslate
                : $any(
                    settingsCache[categoryKey]?.settings[
                      objectKeys(settingsCache[categoryKey]?.settings)[0]
                    ]
                  )
              | titlecase
          }}
        </h5>
      </ion-item-divider>
      <stapps-settings-item
        *ngFor="
          let settingKeys of objectKeys(settingsCache[categoryKey].settings)
        "
        [setting]="settingsCache[categoryKey].settings[settingKeys]"
      ></stapps-settings-item>
    </div>
  </ion-list>

  <calendar-sync-settings></calendar-sync-settings>

  <ion-button
    color="medium"
    expand="block"
    fill="outline"
    (click)="presentResetAlert()"
  >
    {{ 'settings.resetSettings' | translate }}
    <ion-icon slot="start" name="arrow-back-up"></ion-icon>
  </ion-button>
</ion-content>