<div class="fl-padding-left fl-content fl-no-padding-bottom" layoutDirection="column">
  <h2 class="fl-heading-md" i18n>Settings</h2>
  <div layoutDirection="row" layoutDirection-lt-md="column" appFlex="100">
    <div layoutDirection="column" appFlex="100">
      <form appFormSubmit (ngSubmit)="saveTosSettings()"
            layoutDirection="column" [formGroup]="tosSettingsForm">
        <mat-checkbox [color]="'primary'" formControlName="require_end_users_to_agree_with_latest_tos"
                      class="fl-margin-bottom" i18n>Ask end-users to agree with latest TOS</mat-checkbox>

        <mat-form-field>
          <mat-label i18n>Ask again after (minutes)</mat-label>
          <input matInput placeholder="Ask again after (minutes)" i18n-placeholder
                 type="number" formControlName="ask_again_after"
                 required min="0" step="1">
          <mat-error>{{ tosSettingsForm.controls.ask_again_after.errors | errorFormatter }}</mat-error>
        </mat-form-field>

        <mat-form-field>
          <mat-label i18n>Forbid access after (YYYY-MM-DD h:m:s)</mat-label>
          <input matInput placeholder="Forbid access after (YYYY-MM-DD h:m:s)" i18n-placeholder
                 type="text"
                 formControlName="forbid_access_after">
        </mat-form-field>
      </form>

    </div>
    <div class="fl-margin-top hide-gt-sm"></div>
    <div appFlex="50" class="fl-help-text">
      <h3 i18n>Ask end-users to agree with latest TOS</h3>
      <p i18n>Users will be redirected to the terms of service page that shows the latest version TOS you defined
        (that is not marked as draft).</p>
      <h3 i18n>Ask again after (minutes)</h3>
      <p i18n>After user has been notified about new terms of service, he would only be asked again after the time
        you defined in minutes has passed or when he logs in again.</p>
      <h3 i18n>Forbid access after (YYYY-MM-DD h:m:s)</h3>
      <p i18n>After this date, user won't be able to use the fleio panel anymore unless he agrees with terms
        and conditions.</p>
    </div>
  </div>
  <div layoutDirection="column">
    <h2 class="fl-heading-md fl-margin-top" i18n>Terms of service</h2>
    <div *ngIf="termsOfService" layoutDirection="row">
      <table mat-table [dataSource]="termsOfService.objects" class="full-width fl-padding-right">
        <ng-container matColumnDef="version">
          <th mat-header-cell *matHeaderCellDef i18n>Version</th>
          <td mat-cell *matCellDef="let tos">
            {{tos.version}}
          </td>
        </ng-container>
        <ng-container matColumnDef="title">
          <th mat-header-cell *matHeaderCellDef i18n>Title</th>
          <td mat-cell *matCellDef="let tos">
            <span *ngIf="tos.title.length < 30; else longTitle">
              {{tos.title}}
            </span>
            <ng-template #longTitle>
              {{tos.title | slice: 0: 30}} ...
            </ng-template>
          </td>
        </ng-container>
        <ng-container matColumnDef="draft">
          <th mat-header-cell *matHeaderCellDef i18n>Draft</th>
          <td mat-cell *matCellDef="let tos">
            {{tos.draft | yesNo}}
          </td>
        </ng-container>
        <ng-container matColumnDef="(actions)">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let tos">
            <app-object-actions [objectActions]="tosActions[tos.id]" [maxVisibleActions]="2">
            </app-object-actions>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>
    <div layoutDirection="row" class="fl-margin-top">
      <button mat-button id="add_new_terms_of_service" [color]="'primary'"
              [routerLink]="[this.config.getPanelUrl('settings/general/new-tos')]" i18n>Add new terms of service</button>
    </div>
  </div>
  <div layoutDirection="row" layoutAlign="end" class="fl-margin-top">
    <button mat-button id="save_tos_settings" [disabled]="tosSettingsForm.disabled"
            (click)="saveTosSettings()" [color]="'primary'" i18n>Save settings</button>
  </div>
</div>
