<div class="fl-content">
  <div *ngIf="createOptions" layoutDirection="row" layoutDirection-lt-sm="column">
    <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
          [formGroup]="messageTemplatesForm" layoutDirection="column" appFlex="60">
      <!--suppress JSUnusedGlobalSymbols -->
      <app-form-errors #formErrors [formGroup]="messageTemplatesForm"></app-form-errors>
      <mat-checkbox formControlName="disable_notification" color="primary" i18n>
        Disable this notification
      </mat-checkbox>
      <mat-form-field appFlex="50" class="fl-margin-top-small">
        <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-hint *ngIf="isEmailOnly" i18n>
          This notification can be sent only as an email so UI option is not available.
        </mat-hint>
      </mat-form-field>
      <mat-form-field appFlex="50" class="fl-margin-top-small">
        <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>
      <div *ngFor="let template of messageTemplates; let first = first; let last = last"
           formGroupName="{{'template' + template.id}}">
        <h2 class="fl-heading-md" i18n>Language: {{template.language_display}}</h2>

        <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>{{templateGroups['template' + template.id].controls.title.errors | errorFormatter}}</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="messageTemplatesForm.controls['template' + template.id]['controls'].content.invalid &&
            ((messageTemplatesForm.controls['template' + template.id]['controls'].content.touched && messageTemplatesForm.dirty))">
            {{fieldErrors['content'] || fieldRequiredTxt}}
          </mat-error>
        </div>

        <div layoutDirection="row" class="fl-margin-bottom">
          <!-- first one is the default one which cannot be deleted. Custom ones however can be deleted from card actions -->
          <a *ngIf="!first" class="fl-margin-top" mat-button color="primary"
             [disabled]="!objectController.permissions['messagetemplates.destroy']"
             (click)="deleteTemplate(template)" i18n>Delete template</a>
          <!-- display load default for first template -->
          <ng-container *ngIf="first && template.default_content">
            <ng-container
              *ngIf="isDefault(template); else noDefault">
              <div fl-tooltip="Text already has default value">
                <a class="fl-margin-top" mat-button color="primary" [disabled]="true" i18n>Load default</a>
              </div>
            </ng-container>
            <ng-template #noDefault>
              <a class="fl-margin-top" mat-button color="primary"
                 (click)="loadDefault(template)" i18n>Load default</a>
            </ng-template>
          </ng-container>
        </div>

        <mat-divider *ngIf="!last" [inset]="true" class="divider"></mat-divider>
      </div>
    </form>
    <div layoutDirection="column" appFlex="40" xsFlex="100" smFlex="100"
         class="fl-padding-left fl-margin-top fl-margin-bottom">
      <h2 class="help-text-padding" i18n>Help text for {{templateName}} template</h2>
      <ng-container *ngIf="object[0].type === 'system' &&
      createOptions.help_text_map && createOptions.help_text_map[templateName]">
        <p class="help-text-padding">{{createOptions.help_text_map[templateName].detail}}</p>
        <div layoutDirection="row" class="fl-padding-lr variables-container">
            <span *ngFor="let item of createOptions.help_text_map[templateName].variables"
                  (click)="clickVariable(item)" class="fl-tag fl-margin-right-small fl-margin-bottom-small"
                  [attr.fl-tooltip]="clickToCopyTooltip">{{item}}</span>
        </div>
      </ng-container>

      <div *ngIf="object[0].type === 'custom' && createOptions.category_variables &&
      createOptions.category_variables[object[0].category_display]" class="fl-padding-lr">
        <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[object[0].category_display]"
                  (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-margin-top">
        <div class="fl-help-text">
          <h3 i18n>Disable notification</h3>
          <p i18n>Ignore all other settings and do not send this kind of notification.</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>
