<form appFormSubmit (ngSubmit)="saveTermsOfService()" [formGroup]="termsOfServiceForm" layoutDirection="column"
      class="fl-content">
  <app-form-errors #formErrors [formGroup]="termsOfServiceForm"></app-form-errors>
  <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="25px">
    <div layoutDirection="column" appFlex="50" xsFlex="100">
      <mat-form-field>
        <mat-label i18n>Title</mat-label>
        <input matInput placeholder="Title" i18n-placeholder type="text" formControlName="title" required>
        <mat-error>{{backendErrors['title'] || fieldRequiredTxt }}</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label i18n>Version</mat-label>
        <input matInput placeholder="Version" i18n-placeholder type="text" formControlName="version">
        <mat-error>{{backendErrors['version'] || fieldRequiredTxt }}</mat-error>
      </mat-form-field>
    </div>
    <div appFlex="50" class="hide-xs">
      <h3 i18n>Version</h3>
      <p i18n>
        Be consistent when defining version as the latest version TOS is the first one in the TOS list
        automatically ordered by the version!
        <br>
        Use for example: "2019.09", "2019.10", "2019.10.1" or "a.0", "a.1", "b", etc.
      </p>
    </div>
  </div>

  <mat-checkbox [color]="'primary'" formControlName="draft"
                class="fl-margin-bottom" i18n>
    Draft (drafts won't be taken into consideration)
  </mat-checkbox>

  <div layoutDirection="column" class="fl-margin-bottom">
    <p class="fl-heading-md fl-no-margin-top" i18n>Content ...</p>
    <div class="fl-tinymce-placeholder">
    <span *ngIf="tinyMCEOptions">
      <editor [init]="tinyMCEOptions" formControlName="content" [licenseKey]="'gpl'"
              (onKeyDown)="handleTinyKeyDown($event)"></editor>
      <mat-error *ngIf="termsOfServiceForm.controls.content.invalid &&
      ((termsOfServiceForm.controls.content.touched && termsOfServiceForm.dirty) || tosSaveSubmitted)">
        {{backendErrors['content'] || fieldRequiredTxt}}
      </mat-error>
    </span>
    </div>
  </div>

  <div layoutDirection="row" layoutAlign="end center">
    <a mat-button [routerLink]="[config.getPanelUrl('settings/general')]"
            fragment="terms-of-service" i18n>Cancel</a>
    <button mat-button id="save_tos" type="submit" [color]="'primary'">
      {{isNew ? addTxt : saveTxt}}
    </button>
  </div>
</form>
