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

    <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 title="{{versionExtra}}" 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>

    <div class="row">
      <div class="col-md-2 ">
        <nav class="nav flex-column sticky-top">
          <div class="card">
            <div class="card-body text-md-left text-center align-content-md-start align-content-center">
              <h5 class="card-title">Menu</h5>
              <button class="btn btn-link nav-link  text-md-left py-md-1 px-md-0"
                      *ngFor="let s of contents; let i=index;"
                      (click)="scrollTo(i)"
                      [hidden]="!s.HasAvailableSettings">
                {{s.Name}}
              </button>
            </div>
          </div>

        </nav>
      </div>
      <div class="col-md-10">
        <app-settings-basic #setting #basic
                            [simplifiedMode]="simplifiedMode"
                            [hidden]="!basic.HasAvailableSettings"></app-settings-basic>
        <app-settings-usermanager #setting #userManager
                                  [hidden]="!userManager.HasAvailableSettings"></app-settings-usermanager>
        <app-settings-database #setting #database
                               [simplifiedMode]="simplifiedMode"
                               [hidden]="!database.HasAvailableSettings"></app-settings-database>
        <app-settings-photo #setting #photo
                            [hidden]="!photo.HasAvailableSettings"
                            [simplifiedMode]="simplifiedMode"></app-settings-photo>
        <app-settings-video #setting #video
                            [hidden]="!video.HasAvailableSettings"
                            [simplifiedMode]="simplifiedMode"></app-settings-video>
        <app-settings-thumbnail #setting #thumbnail
                                [hidden]="!thumbnail.HasAvailableSettings"
                                [simplifiedMode]="simplifiedMode"></app-settings-thumbnail>
        <app-settings-search #setting #search
                             [hidden]="!search.HasAvailableSettings"
                             [simplifiedMode]="simplifiedMode"></app-settings-search>
        <app-settings-share #setting #share
                            [hidden]="!share.HasAvailableSettings"
                            [simplifiedMode]="simplifiedMode"></app-settings-share>
        <app-settings-map #setting #map
                          [hidden]="!map.HasAvailableSettings"
                          [simplifiedMode]="simplifiedMode"></app-settings-map>
        <app-settings-meta-file #setting #metaFile
                                [hidden]="!metaFile.HasAvailableSettings"
                                [simplifiedMode]="simplifiedMode"></app-settings-meta-file>
        <app-settings-other #setting #other
                            [hidden]="!other.HasAvailableSettings"
                            [simplifiedMode]="simplifiedMode"></app-settings-other>
        <app-settings-random-photo #setting #random
                                   [hidden]="!random.HasAvailableSettings"
                                   [simplifiedMode]="simplifiedMode"></app-settings-random-photo>
        <app-settings-faces #setting #faces
                            [hidden]="!faces.HasAvailableSettings"
                            [simplifiedMode]="simplifiedMode"></app-settings-faces>
        <app-settings-indexing #setting #indexing
                               [hidden]="!indexing.HasAvailableSettings"
                               [simplifiedMode]="simplifiedMode"></app-settings-indexing>
        <app-settings-jobs #setting #jobs
                           [hidden]="!jobs.HasAvailableSettings"
                           [simplifiedMode]="simplifiedMode"></app-settings-jobs>
      </div>
    </div>

    <div class="row mb-2">
      <div class="col-12">
        <div class="text-right">
          <ng-container i18n>Up time</ng-container><!--
          -->: {{upTime | date:'medium'}}
        </div>
      </div>
    </div>

  </div>
</app-frame>
