<div class="fl-content fl-content-min-height" layoutDirection="row" layoutDirection-lt-md="column">
  <div layoutDirection="column" appFlex="60" ltMdFlex="100">
    <div class="fl-margin-bottom-small">
      <a (click)="openInsertMassMessageTemplateDialog()" class="active-link" i18n>
        Insert mass message template...
      </a>
      <app-icon [icon]="insertTemplateIcon"></app-icon>
    </div>
    <div *ngIf="massEmailForm.controls.message_type.value === 'message'">
      <h3 class="fl-detail" *ngIf="clientsCount === 1" i18n>Sending panel notification to {{clientsCount}} client</h3>
      <h3 class="fl-detail" *ngIf="clientsCount > 1" i18n>Sending panel notification to {{clientsCount}} clients</h3>
    </div>
    <div *ngIf="massEmailForm.controls.message_type.value === 'email_and_message'">
      <h3 class="fl-detail" *ngIf="clientsCount === 1" i18n>Sending email and panel notification to {{clientsCount}} client</h3>
      <h3 class="fl-detail" *ngIf="clientsCount > 1" i18n>Sending email and panel notification to {{clientsCount}} clients</h3>
    </div>
    <div *ngIf="massEmailForm.controls.message_type.value === 'email'">
      <h3 class="fl-detail" *ngIf="clientsCount === 1" i18n>Sending email to {{clientsCount}} client</h3>
      <h3 class="fl-detail" *ngIf="clientsCount > 1" i18n>Sending email to {{clientsCount}} clients</h3>
    </div>
    <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)" [formGroup]="massEmailForm">
      <!--suppress JSUnusedGlobalSymbols -->
      <app-form-errors #formErrors [formGroup]="massEmailForm"></app-form-errors>

      <div layoutDirection="column">

        <mat-radio-group aria-labelledby="Message type" layoutDirection="column"
                       formControlName="message_type" class="fl-margin-bottom fl-margin-top-medium">
          <mat-radio-button color="primary" value="email_and_message"
                            i18n>Send mass email and panel notification message</mat-radio-button>
          <mat-radio-button color="primary" value="message"
                            i18n>Send panel notification message</mat-radio-button>
          <mat-radio-button color="primary" value="email"
                            i18n>Send mass email</mat-radio-button>
        </mat-radio-group>

        <mat-form-field>
          <mat-label i18n>Message type</mat-label>
          <mat-select formControlName="targeted_notifications" placeholder="Message type" i18n-placeholder>
            <mat-option *ngFor="let target of createOptions.targeted_notifications | keyvalue" [value]="target.key">
              {{ target.value }}
            </mat-option>
            <mat-option [value]="''" i18n>None</mat-option>
          </mat-select>
        </mat-form-field>

        <mat-checkbox *ngIf="['email_and_message', 'message'].indexOf(massEmailForm.controls.message_type.value) > -1"
                      formControlName="top_line_notification" color="primary"
                      [class.fl-margin-bottom]="massEmailForm.controls.top_line_notification.value === false"
                      i18n>Show top line notification in end-user panel</mat-checkbox>

        <mat-checkbox *ngIf="massEmailForm.controls.top_line_notification.value"
                      [ngModel]="topPanelNotificationPreview"
                      [ngModelOptions]="{standalone: true}"
                      (change)="changedPreviewOpt($event)" color="primary" class="fl-margin-bottom"
                      i18n>Show top line notification preview on this page</mat-checkbox>

        <div *ngIf="massEmailForm.controls.top_line_notification.value">
          <div layoutDirection="row" appLayoutGap="5px">
            <mat-form-field appFlex="50">
              <mat-label i18n>Top panel notification background color</mat-label>
              <input matInput
                     placeholder="Top panel notification background color" i18n-placeholder
                     formControlName="top_line_background_color">
              <mat-error>{{fieldErrors['top_line_background_color']}}</mat-error>
            </mat-form-field>

            <mat-form-field appFlex="50">
              <mat-label i18n>Top panel notification text color</mat-label>
              <input matInput
                     placeholder="Top panel notification text color" i18n-placeholder
                     formControlName="top_line_text_color">
              <mat-error>{{fieldErrors['top_line_text_color']}}</mat-error>
            </mat-form-field>
          </div>
        </div>

        <div layoutDirection="row" appLayoutGap="5px" class="fl-margin-bottom-small"
             *ngIf="massEmailForm.controls.top_line_notification.value">
          <mat-form-field appFlex="50">
            <mat-label i18n>Show top notification until</mat-label>
            <input matInput [matDatepicker]="showUntilPicker" placeholder="Show top notification until" i18n-placeholder
                   formControlName="show_top_line_until">
            <mat-datepicker-toggle matSuffix [for]="showUntilPicker"></mat-datepicker-toggle>
            <mat-datepicker #showUntilPicker></mat-datepicker>
            <mat-hint i18n>Until acknowledged by user if empty</mat-hint>
            <mat-error>{{ fieldErrors['show_top_line_until']}}</mat-error>
          </mat-form-field>
          <mat-form-field appFlex="50">
            <mat-label i18n>Time ({{timeHelper.timeFormat}})</mat-label>
            <input matInput placeholder="{{timeHelper.timeFormat}}"
                   formControlName="show_top_line_until_time">
            <button [attr.fl-tooltip]="timeHelper.localTimeTooltip" mat-icon-button matSuffix (click)="$event.preventDefault();">
              <mat-icon>info</mat-icon>
            </button>
            <mat-error>{{ massEmailForm.controls.show_top_line_until_time.errors | errorFormatter }}</mat-error>
            <mat-hint i18n>E.g. {{timeHelper.timeExample}}, {{timeHelper.timezoneDisplay}} time</mat-hint>
          </mat-form-field>
        </div>

        <mat-form-field appFlex="100" *ngIf="this.messageType.value !== 'message'">
          <mat-label i18n>From name</mat-label>
          <input matInput placeholder="From name" i18n-placeholder
                 type="text" formControlName="from_name">
          <mat-error>{{fieldErrors['from_name']}}</mat-error>
        </mat-form-field>

        <mat-form-field appFlex="100" *ngIf="this.messageType.value !== 'message'">
          <mat-label i18n>From email</mat-label>
          <input matInput placeholder="From email" i18n-placeholder
                 type="text" formControlName="from_email" required>
          <mat-error>{{fieldErrors['from_email']}}</mat-error>
        </mat-form-field>

        <mat-form-field appFlex="100">
          <mat-label i18n>Subject</mat-label>
          <input matInput placeholder="Subject" i18n-placeholder
                 type="text" formControlName="subject" required>
          <mat-error>{{fieldErrors['subject']}}</mat-error>
        </mat-form-field>
        <div layoutDirection="column">
          <h2 class="fl-heading-md" i18n>Message body</h2>
          <div class="fl-tinymce-placeholder">
            <editor #tinyMceArea [init]="tinyMCEOptions" (onKeyDown)="handleTinyKeyDown($event)"
                    formControlName="body" [licenseKey]="'gpl'"></editor>
            <mat-error>{{fieldErrors['body']}}</mat-error>
          </div>
        </div>
        <div layoutDirection="column" *ngIf="this.messageType.value !== 'message'">
          <p class="fl-heading-md fl-no-margin-bottom" i18n>Add attachments</p>
          <app-upload-interface [maxSize]="maxAttachmentSize"
                                [multipleFileSelectors]="true" #uploadInterface></app-upload-interface>
        </div>
        <div layoutDirection="row" appLayoutGap="10px" class="fl-margin-top-large">
          <mat-form-field appFlex="50">
            <mat-label i18n>Send batch size</mat-label>
            <input matInput placeholder="Send batch size" i18n-placeholder
                   type="number" formControlName="send_batch_size" required>
            <mat-error>{{fieldErrors['send_batch_size']}}</mat-error>
          </mat-form-field>
          <mat-form-field appFlex="50">
            <mat-label i18n>Send interval between batches (seconds)</mat-label>
            <input matInput placeholder="Send interval between batches (seconds)" i18n-placeholder
                   type="number" formControlName="send_interval" required>
            <mat-error>{{fieldErrors['send_interval']}}</mat-error>
          </mat-form-field>
        </div>
      </div>
    </form>
  </div>
  <div layoutDirection="column" class="fl-help-text" appFlex="40" ltMdFlex="100">
    <h3 i18n>Send mass email/panel notification</h3>
    <p i18n>
      You can choose to either send emails, send a notification in end-user panel (notifications page) or both.
      You can even show the notification as a top line over the app if you choose an option that involves panel
      notification, see below options.
    </p>
    <h3 i18n>Message type</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>
    <h3 i18n>Show top line notification in end-user panel</h3>
    <p i18n>
      End-users will receive a line with the message title and a readme button at the top of the panel.
    </p>
    <h3 i18n>Show top line notification preview on this page</h3>
    <p i18n>
      This option appears if you choose the top line notification setting. It will show a preview on this page
      of the top line, with colors changing as you change related fields.
    </p>
    <h3 i18n>Show top notification until</h3>
    <p i18n>
      The top line panel notification will be displayed until this date if not seen by the users.
    </p>
    <h3 i18n>From name</h3>
    <p i18n>
      Fill in the name that will appear in the From field, e.g. your company name.
    </p>
    <h3 i18n>From email</h3>
    <p i18n>
      Email address to appear in the From field.
    </p>
    <h3 i18n>Subject</h3>
    <p i18n>
      The subject of the email. Parameters can be used to customize subject. See email body for details.
    </p>
    <h3 i18n>Email body</h3>
    <p i18n>
      The body of the email. The following parameters can be used to customize email body:
    </p>
    <div *ngIf="createOptions" layoutDirection="row" class="variables-container">
      <span *ngFor="let item of createOptions.email_variables"
            (click)="clickVariable(item)" class="fl-tag fl-cursor-pointer fl-margin-right-small fl-margin-bottom-small"
            [attr.fl-tooltip]="'Click to copy'">{{item}}</span>
    </div>
  </div>
</div>
