<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="d-flex justify-content-between">
        <a class="version" href="https://github.com/bpatrik/pigallery2/releases">
          <span i18n>App version:</span>&nbsp;
          v<span>{{appVersion}}</span>
        </a>
        <div class="form-group">
          <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]="true"
            [switch-off-text]="text.Advanced"
            [switch-on-text]="text.Simplified"
            [switch-handle-width]="100"
            [switch-label-width]="20"
            [(ngModel)]="simplifiedMode">
          </bSwitch>
        </div>
      </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-video #video [hidden]="!video.hasAvailableSettings"
                        [simplifiedMode]="simplifiedMode"></app-settings-video>
    <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-meta-file #metaFile [hidden]="!metaFile.hasAvailableSettings"
                            [simplifiedMode]="simplifiedMode"></app-settings-meta-file>
    <app-settings-other #other [hidden]="!other.hasAvailableSettings"
                        [simplifiedMode]="simplifiedMode"></app-settings-other>
    <app-settings-random-photo #random [hidden]="!random.hasAvailableSettings"
                               [simplifiedMode]="simplifiedMode"></app-settings-random-photo>
    <app-settings-faces #random [hidden]="!random.hasAvailableSettings"
                               [simplifiedMode]="simplifiedMode"></app-settings-faces>
    <app-settings-indexing #indexing [hidden]="!indexing.hasAvailableSettings"
                           [simplifiedMode]="simplifiedMode"></app-settings-indexing>
    <app-settings-tasks #tasks [hidden]="!tasks.hasAvailableSettings"
                           [simplifiedMode]="simplifiedMode"></app-settings-tasks>
  </div>
</app-frame>
