<div class="fl-content">
  <div layoutDirection="row" layoutDirection-lt-md="column">
    <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
          [formGroup]="templateForm" layoutDirection="column" appFlex="60">
      <!--suppress JSUnusedGlobalSymbols -->
      <app-form-errors #formErrors [formGroup]="templateForm"></app-form-errors>
      <mat-form-field class="full-width">
        <mat-label i18n>Name</mat-label>
        <input matInput formControlName="name" required type="text" placeholder="Name" i18n-placeholder>
        <mat-error>{{fieldErrors['name']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="50">
        <mat-label i18n>Target</mat-label>
        <mat-select formControlName="target" placeholder="Target" i18n-placeholder required>
          <mat-option *ngFor="let target of createOptions.target | keyvalue" [value]="target.key">
            {{ target.value }}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field appFlex="100">
        <mat-label i18n>Target category</mat-label>
        <mat-select formControlName="target_category" placeholder="Target category" i18n-placeholder>
          <mat-option *ngFor="let target of createOptions.target_category | keyvalue" [value]="target.key">
            {{ target.value }}
          </mat-option>
          <mat-option [value]="''" i18n>None</mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field appFlex="100">
        <mat-label i18n>Category</mat-label>
        <mat-select formControlName="category" placeholder="Category" i18n-placeholder required>
          <mat-option *ngFor="let category of createOptions.categories" [value]="category.id">
            {{category.description}}
          </mat-option>
        </mat-select>
        <mat-error>{{fieldErrors['category']}}</mat-error>
      </mat-form-field>

      <mat-form-field class="full-width">
        <mat-label i18n>Title</mat-label>
        <input matInput formControlName="title" required type="text" placeholder="Title" i18n-placeholder>
        <mat-error>{{fieldErrors['title']}}</mat-error>
      </mat-form-field>

      <div class="fl-tinymce-placeholder">
        <editor [init]="tinyMCEOptions" formControlName="content" [licenseKey]="'gpl'"
                (onKeyDown)="handleTinyKeyDown($event)" required></editor>
        <mat-error *ngIf="templateForm.controls.content.invalid &&
          ((templateForm.controls.content.touched && templateForm.dirty))">
          {{fieldErrors['content'] || fieldRequiredTxt}}
        </mat-error>
      </div>
    </form>
    <div layoutDirection="column" appFlex="40" xsFlex="100" smFlex="100">
      <div class="fl-margin-top">
        <div *ngIf="selectedCategory && createOptions.category_variables[selectedCategory.name]"
             class="fl-margin-bottom variables-padding">
          <p class="fl-detail" i18n>You can make use of the following variables:</p>
          <div layoutDirection="row" class="variables-container">
              <span *ngFor="let item of createOptions.category_variables[selectedCategory.name]"
                    (click)="clickVariable(item)" class="fl-tag fl-margin-right-small fl-margin-bottom-small"
                    [attr.fl-tooltip]="clickToCopyTooltip">{{item}}</span>
          </div>
        </div>
        <div class="fl-help-text">
          <h3 i18n>Name</h3>
          <p i18n>Unique identifier for this template.</p>
        </div>
        <div class="fl-help-text">
          <h3 i18n>Target</h3>
          <p i18n>
            Where this notification should be sent. Choose "User interface" to show the notification in
            "/user/notifications" page, "Email" to send this just as an email, or "Email & user interface"
            for both options.
          </p>
        </div>
        <div class="fl-help-text">
          <h3 i18n>Target category</h3>
          <p i18n>
            If user notifications settings do not have the target category notifications enabled, he won't receive
            this kind of notification. A value of "none" will send the notification regardless of user settings.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
