<div class="fl-content">
  <div class="fl-heading" i18n>{{ tos.tos_data.title }}</div>
  <div class="fl-margin-top fl-margin-bottom" i18n>Version {{ tos.tos_data.version }}</div>
  <hr class="full-width fl-medium-opacity fl-no-margin">
  <div [innerHTML]="translatedContent"></div>

  <form [formGroup]="agreeForm" class="fl-margin-top" *ngIf="!tos.tos_data.agreed">
    <app-form-errors #formErrors [formGroup]="agreeForm"></app-form-errors>
    <mat-checkbox formControlName="agree" color="primary" i18n>
      I agree
    </mat-checkbox>
    <div layoutDirection="row" appLayoutGap="10px" class="fl-margin-top">
      <button mat-raised-button color="primary" (click)="agree()"
              [disabled]="!agreeForm.controls.agree.value" i18n>Save</button>
      <a mat-button [routerLink]="config.getPrevUrl()" *ngIf="tos.tos_data.remind_later_button_available" i18n>
        Remind me later
      </a>
    </div>
  </form>
  <span class="fl-detail fl-green-color fl-margin-top-medium" *ngIf="tos.tos_data.agreed" i18n>
    You agreed with the above.
  </span>

</div>
