<div class="fl-content fl-content-min-height" layoutDirection="column" appLayoutGap="10px">
  <app-fl-backdrop *ngIf="loadingSettings" overlayParent></app-fl-backdrop>
  <div layoutDirection="row" layoutAlign="start center" appLayoutGap="10px">
    <div>
      <app-icon [icon]="{
        'name': 'warning',
        'class': 'fl-red-color'
      }"></app-icon>
    </div>
    <p class="fl-red-color" i18n>Changing these settings may have undesirable effects on Fleio functionality.</p>
  </div>
  <form appFormSubmit (ngSubmit)="saveSettings()"
        [formGroup]="advancedSettingsForm">
    <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
      <div appFlex="33" xsFlex="100" smFlex="100">
        <mat-checkbox [color]="'primary'" formControlName="disable_periodic_tasks" i18n>Disable periodic tasks
        </mat-checkbox>
      </div>
      <div class="fl-help-text">
        <h3 class="hide-lt-md" i18n>Disable periodic tasks</h3>
        <p class="fl-detail" i18n>Checking this will prevent periodic tasks(e.g. process clients) from running.</p>
      </div>
    </div>

    <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
      <div appFlex="33" xsFlex="100" smFlex="100">
        <mat-checkbox [color]="'primary'" formControlName="grant_all_permissions_implicitly"
                      i18n>Grant all permissions implicitly
        </mat-checkbox>
      </div>
      <div class="fl-help-text">
        <h3 class="hide-lt-md" i18n>Grant all permissions implicitly</h3>
        <p class="fl-detail" i18n>Checking this grants all permissions to users that have no associated permissions.</p>
      </div>
    </div>

    <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
      <div layoutDirection="row" appFlex="33" xsFlex="100" smFlex="100">
        <mat-checkbox [color]="'primary'" formControlName="delete_activity_log_entries"
                      i18n>Delete activity log entries
        </mat-checkbox>
      </div>
      <div class="fl-help-text">
        <h3 class="hide-lt-md" i18n>Delete activity log entries</h3>
        <p class="fl-detail" i18n>Checking this will periodically delete older entries from activity log.</p>
      </div>
    </div>
    <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
      <div layoutDirection="row" appFlex="33" xsFlex="100" smFlex="100" appLayoutGap="10px" layoutAlign="start center">
        <mat-form-field class="fl-indent" subscriptSizing="dynamic">
          <mat-label i18n>Delete entries older than</mat-label>
          <input matInput type="number" formControlName="delete_activity_log_entries_older_than_months" min="1"
                 placeholder="Delete entries older than" i18n-placeholder required>
          <mat-error>{{advancedSettingsForm.controls.delete_activity_log_entries_older_than_months.errors | errorFormatter}}</mat-error>
        </mat-form-field>
        <p i18n>months</p>
      </div>
      <div class="fl-help-text">
        <h3 class="hide-lt-md" i18n>Delete activity log entries older than</h3>
        <p class="fl-detail" i18n>Allows you to select number of months of activity logs to keep.</p>
      </div>
    </div>

    <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
      <div layoutDirection="row" appFlex="33" xsFlex="100" smFlex="100">
        <mat-checkbox [color]="'primary'" formControlName="delete_email_log_entries"
                      i18n>Delete email log entries
        </mat-checkbox>
      </div>
      <div class="fl-help-text">
        <h3 class="hide-lt-md" i18n>Delete email log entries</h3>
        <p class="fl-detail" i18n>Checking this will periodically delete older entries from email log.</p>
      </div>
    </div>
    <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
      <div layoutDirection="row" appFlex="33" xsFlex="100" smFlex="100" appLayoutGap="10px" layoutAlign="start center">
        <mat-form-field class="fl-indent" subscriptSizing="dynamic">
          <mat-label i18n>Delete entries older than</mat-label>
          <input matInput type="number" formControlName="delete_email_log_entries_older_than_months" min="1"
                 placeholder="Delete entries older than" i18n-placeholder required>
          <mat-error>{{advancedSettingsForm.controls.delete_email_log_entries_older_than_months.errors | errorFormatter}}</mat-error>
        </mat-form-field>
        <p i18n>months</p>
      </div>
      <div class="fl-help-text">
        <h3 class="hide-lt-md" i18n>Delete email log entries older than</h3>
        <p class="fl-detail" i18n>Allows you to select number of months of email logs to keep.</p>
      </div>
    </div>

    <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
      <div layoutDirection="row" appFlex="33" xsFlex="100" smFlex="100">
        <mat-checkbox [color]="'primary'" formControlName="delete_periodic_task_log_entries"
                      i18n>Delete periodic task log entries
        </mat-checkbox>
      </div>
      <div class="fl-help-text">
        <h3 class="hide-lt-md" i18n>Delete periodic task log entries</h3>
        <p class="fl-detail" i18n>Checking this will periodically delete older entries from periodic task log.</p>
      </div>
    </div>
    <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
      <div layoutDirection="row" appFlex="33" xsFlex="100" smFlex="100" appLayoutGap="10px" layoutAlign="start center">
        <mat-form-field class="fl-indent" subscriptSizing="dynamic">
          <mat-label i18n>Delete entries older than</mat-label>
          <input matInput type="number" formControlName="delete_periodic_task_log_entries_older_than_months" min="1"
                 placeholder="Delete entries older than" i18n-placeholder required>
          <mat-error>{{advancedSettingsForm.controls.delete_periodic_task_log_entries_older_than_months.errors | errorFormatter}}</mat-error>
        </mat-form-field>
        <p i18n>months</p>
      </div>
      <div class="fl-help-text">
        <h3 class="hide-lt-md" i18n>Delete periodic task log entries older than</h3>
        <p class="fl-detail" i18n>Allows you to select number of months of periodic task logs to keep.</p>
      </div>
    </div>

    <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
      <div layoutDirection="row" appFlex="33" xsFlex="100" smFlex="100">
        <mat-checkbox [color]="'primary'" formControlName="cleanup_temporary_directory"
                      i18n>Cleanup temporary directory
        </mat-checkbox>
      </div>
      <div class="fl-help-text">
        <h3 class="hide-lt-md" i18n>Cleanup temporary directory</h3>
        <p class="fl-detail" i18n>Checking this will periodically delete old files from temporary directory.</p>
      </div>
    </div>

    <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
      <div layoutDirection="row" appFlex="33" xsFlex="100" smFlex="100" appLayoutGap="10px" layoutAlign="start center">
        <mat-form-field class="fl-indent" subscriptSizing="dynamic">
          <mat-label i18n>Delete temporary files older than</mat-label>
          <input matInput type="number" formControlName="delete_temporary_files_older_than_months" min="1"
                 placeholder="Delete temporary files older than" i18n-placeholder required>
          <mat-error>{{advancedSettingsForm.controls.delete_temporary_files_older_than_months.errors | errorFormatter}}</mat-error>
        </mat-form-field>
        <p i18n>months</p>
      </div>
      <div class="fl-help-text">
        <h3 class="hide-lt-md" i18n>Delete temporary files older than</h3>
        <p class="fl-detail" i18n>Allows you to select number of months of temporary files to keep.</p>
      </div>
    </div>

    <div class="fl-margin-top" layoutDirection="row" layoutDirection-lt-md="column">
      <div layoutDirection="column" appFlex="33">
        <mat-form-field class="fl-indent" subscriptSizing="dynamic">
          <mat-label i18n>Short operation step timeout (minutes)</mat-label>
          <input matInput type="number" formControlName="short_operation_step_timeout"
                 placeholder="Short operation step timeout (minutes)" i18n-placeholder required>
          <mat-error>{{advancedSettingsForm.controls.short_operation_step_timeout.errors | errorFormatter}}</mat-error>
        </mat-form-field>
        <mat-form-field class="fl-indent" subscriptSizing="dynamic">
          <mat-label i18n>Long operation step timeout (minutes)</mat-label>
          <input matInput type="number" formControlName="long_operation_step_timeout"
                 placeholder="Long operation step timeout (minutes)" i18n-placeholder required>
          <mat-error>{{advancedSettingsForm.controls.long_operation_step_timeout.errors | errorFormatter}}</mat-error>
        </mat-form-field>
        <mat-form-field class="fl-indent" subscriptSizing="dynamic">
          <mat-label i18n>Operations run interval (seconds)</mat-label>
          <input matInput type="number" formControlName="operations_run_interval"
                 placeholder="Operations run interval (seconds)" i18n-placeholder required>
          <mat-error>{{advancedSettingsForm.controls.operations_run_interval.errors | errorFormatter}}</mat-error>
        </mat-form-field>
      </div>
      <div class="fl-help-text">
        <h3 i18n>Short/long operation step timeout</h3>
        <p class="fl-detail" i18n>
          Operations are waiting for external events to happen. Short operation steps include waiting for instance
          to be created or deleted. Long operation steps include moving an instance disk, deleting a client or
          uploading an image. Change these values if some operation steps are taking unusually long in your environment.
        </p>
        <h3 i18n>Operations run interval</h3>
        <p class="fl-detail" i18n>
          Seconds to wait between processing batches of operations.
        </p>
      </div>
    </div>
  </form>
  <div layoutDirection="row" layoutAlign="end end" class="fl-margin-top" appFlex="auto">
    <button mat-button [disabled]="!this.advancedSettingsForm.valid" (click)="saveSettings()" color="primary"
            i18n>Save settings</button>
  </div>
</div>
