<form #settingsForm="ngForm" class="form-horizontal">
  <div class="card mb-4">
    <h5 class="card-header">
      {{Name}}
    </h5>
    <div class="card-body">
      <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>

      <ng-container *ngIf="!simplifiedMode">
        <div class="form-group row">
          <label class="col-md-2 control-label" for="cachedFolderTimeout" i18n>Index cache timeout [ms]</label>
          <div class="col-md-10">
            <input type="number" class="form-control" placeholder="36000"
                   id="cachedFolderTimeout"
                   min="0"
                   step="1"
                   [(ngModel)]="settings.cachedFolderTimeout"
                   name="cachedFolderTimeout" required>
            <small class="form-text text-muted" i18n>If there was no indexing in this time, it reindexes. (skipped if
              indexes are in DB and sensitivity is low)
            </small>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-2 control-label" for="folderPreviewSize" i18n>Sub folder preview size</label>
          <div class="col-md-10">
            <input type="number" class="form-control" placeholder="1"
                   id="folderPreviewSize"
                   min="0"
                   step="1"
                   [(ngModel)]="settings.folderPreviewSize"
                   name="folderPreviewSize" required>
            <small class="form-text text-muted" i18n>Reads this many photos from sub folders</small>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-md-2 control-label" for="reIndexingSensitivity" i18n>Folder reindexing sensitivity</label>
          <div class="col-md-10">
            <select id="reIndexingSensitivity" class="form-control" [(ngModel)]="settings.reIndexingSensitivity"
                    name="reIndexingSensitivity" required>
              <option *ngFor="let type of types" [ngValue]="type.key">{{type.value}}
              </option>
            </select>
            <small
              class="form-text text-muted"
              i18n>Set the reindexing sensitivity. High value check the folders for change more often.
            </small>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-md-2 control-label" for="excludeFolderList" i18n>Exclude Folder List</label>
          <div class="col-md-10">
            <input type="text" class="form-control" placeholder="/media/images/family/private;private;family/private"
                   id="excludeFolderList"
                   [(ngModel)]="excludeFolderList"
                   name="excludeFolderList" required>
            <small class="form-text text-muted">
              <ng-container i18n>Folders to exclude from indexing</ng-container>
              <br/>
              <ng-container
                i18n>';' separated strings. If an entry starts with '/' it is treated as an absolute path. If it doesn't
                start with '/' but contains a '/', the path is relative to the image directory. If it doesn't contain a
                '/', any folder with this name will be excluded.
              </ng-container>
            </small>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-md-2 control-label" for="excludeFileList" i18n>Exclude File List</label>
          <div class="col-md-10">
            <input type="text" class="form-control" placeholder=".ignore;.pg2ignore"
                   id="excludeFileList"
                   [(ngModel)]="excludeFileList"
                   name="excludeFileList" required>
            <small class="form-text text-muted">
              <ng-container i18n>Files that mark a folder to be excluded from indexing</ng-container>
              <br/>
              <ng-container
                i18n>';' separated strings. Any folder that contains a file with this name will be excluded from
                indexing.
              </ng-container>
            </small>
          </div>
        </div>


        <button class="btn btn-success float-right"
                [disabled]="!settingsForm.form.valid || !changed || inProgress"
                (click)="save()" i18n>Save
        </button>
        <button class="btn btn-secondary float-right"
                [disabled]=" !changed || inProgress"
                (click)="reset()" i18n>Reset
        </button>
        <br/>
        <hr/>
      </ng-container>

      <div class="alert alert-secondary" role="alert">
        <ng-container i18n>If you add a new folder to your gallery, the site indexes it automatically.</ng-container>&nbsp;
        <ng-container i18n>If you would like to trigger indexing manually, click index button.</ng-container>
        <br/>
        (
        <ng-container i18n>Note: search only works among the indexed directories</ng-container>
        )
      </div>


      <app-settings-job-progress [progress]="Progress"></app-settings-job-progress>

      <app-settings-job-button #indexingButton
                               [soloRun]="true"
                               (error)="error=$event"
                               [allowParallelRun]="false"
                               [jobName]="indexingJobName"></app-settings-job-button>


      <app-settings-job-button class="ml-md-2 mt-2 mt-md-0"
                               danger="true"
                               [soloRun]="true"
                               (error)="error=$event"
                               [allowParallelRun]="false"
                               [disabled]="indexingButton.Running"
                               [jobName]="resetJobName"></app-settings-job-button>


      <hr/>
      <div class="row statics">
        <div class="col-md-4 col-12" i18n>
          Statistic:
        </div>
        <div class="col-md-2 col-6">
          <span class="oi oi-folder" title="Folders" i18n-title aria-hidden="true">  </span>
          {{_settingsService.statistic.value ? _settingsService.statistic.value.directories : '...'}}
        </div>
        <div class="col-md-2 col-6">
          <span class="oi oi-camera-slr" title="Photos" i18n-title aria-hidden="true">  </span>
          {{_settingsService.statistic.value ? _settingsService.statistic.value.photos : '...'}}
        </div>
        <div class="col-md-2 col-6">
          <span class="oi oi-video" title="Videos" i18n-title aria-hidden="true">  </span>
          {{_settingsService.statistic.value ? _settingsService.statistic.value.videos : '...'}}

        </div>
        <div class="col-md-2 col-6">
          <span class="oi oi-pie-chart" title="Size" i18n-title aria-hidden="true">  </span>
          {{_settingsService.statistic.value ? (_settingsService.statistic.value.diskUsage | fileSize) : '...'}}
        </div>
      </div>
    </div>
  </div>

</form>
