<app-frame>
  <div body class="container">

    <div class="card mb-4" *ngIf="notificationService.notifications.length>0">
      <h5 class="card-header" i18n>
        Server notifications
      </h5>
      <div class="card-body">
        <ng-container *ngFor="let notification of notificationService.notifications">

          <div class="alert alert-{{getCss(notification.type)}}" role="alert">
            {{notification.message}}
            <br *ngIf="notification.details"/>
            {{notification.details | json}}
          </div>
        </ng-container>
      </div>

      <div class="card-footer" i18n>
        To dismiss these notifications, restart the server.
      </div>
    </div>
    <div class="form-horizontal">
      <div class="form-group d-flex justify-content-end">
        <label class="control-label align-self-end mr-2" for="simplifiedMode" i18n>Mode</label>
        <bSwitch
          id="simplifiedMode"
          class="switch"
          name="simplifiedMode"
          [switch-off-color]="'warning'"
          [switch-on-color]="'primary'"
          [switch-inverse]="'inverse'"
          [switch-off-text]="text.Advanced"
          [switch-on-text]="text.Simplified"
          [switch-handle-width]="'100'"
          [switch-label-width]="'20'"
          [(ngModel)]="simplifiedMode">
        </bSwitch>
      </div>
    </div>
    <app-settings-basic [simplifiedMode]="simplifiedMode"></app-settings-basic>
    <app-settings-usermanager></app-settings-usermanager>
    <app-settings-database [simplifiedMode]="simplifiedMode"></app-settings-database>
    <app-settings-thumbnail #thumbnail [hidden]="!thumbnail.hasAvailableSettings"
                            [simplifiedMode]="simplifiedMode"></app-settings-thumbnail>
    <app-settings-search #search [hidden]="!search.hasAvailableSettings"
                         [simplifiedMode]="simplifiedMode"></app-settings-search>
    <app-settings-share #share [hidden]="!share.hasAvailableSettings"
                        [simplifiedMode]="simplifiedMode"></app-settings-share>
    <app-settings-map #map [hidden]="!map.hasAvailableSettings" [simplifiedMode]="simplifiedMode"></app-settings-map>
    <app-settings-other #other [hidden]="!other.hasAvailableSettings"
                        [simplifiedMode]="simplifiedMode"></app-settings-other>
    <app-settings-indexing #other [hidden]="!other.hasAvailableSettings"
                           [simplifiedMode]="simplifiedMode"></app-settings-indexing>
  </div>
</app-frame>