<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="departmentForm" *ngIf="createOptions" layoutDirection="column">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="departmentForm"></app-form-errors>
  <div layoutDirection="row" appLayoutGap="10px">
    <mat-form-field appFlex="50">
      <mat-label i18n>Name</mat-label>
      <input matInput placeholder="Name" i18n-placeholder type="text" formControlName="name" required>
      <mat-error>{{fieldErrors['name']}}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="50">
      <mat-label i18n>Main email</mat-label>
      <input matInput placeholder="Main email" i18n-placeholder type="text" formControlName="email" required>
      <mat-error>{{departmentForm.controls.email.errors | errorFormatter}}</mat-error>
    </mat-form-field>
  </div>
  <mat-form-field>
    <input matInput
           placeholder="Additional email addresses (comma separated list)" i18n-placeholder
           type="text" formControlName="additional_emails">
    <mat-label i18n>Additional email addresses (comma separated list)</mat-label>
    <mat-error>{{fieldErrors['additional_emails']}}</mat-error>
  </mat-form-field>
  <div class="fl-margin-top">
    <a mat-button class="tickets-id-short-keys"
       [attr.fl-tooltip]="fullYearTxt"
       (click)="addTicketIdShortKey('%Y')">
      %Y
    </a>
    <a mat-button class="tickets-id-short-keys"
       [attr.fl-tooltip]="yearTxt"
       (click)="addTicketIdShortKey('%y')">
      %y
    </a>
    <a mat-button class="tickets-id-short-keys"
       [attr.fl-tooltip]="monthTxt"
       (click)="addTicketIdShortKey('%M')">
      %M
    </a>
    <a mat-button class="tickets-id-short-keys"
       [attr.fl-tooltip]="dayTxt"
       (click)="addTicketIdShortKey('%D')">
      %D
    </a>
    <a mat-button class="tickets-id-short-keys"
       [attr.fl-tooltip]="hourTxt"
       (click)="addTicketIdShortKey('%h')">
      %h
    </a>
    <a mat-button class="tickets-id-short-keys"
       [attr.fl-tooltip]="minuteTxt"
       (click)="addTicketIdShortKey('%m')">
      %m
    </a>
    <a mat-button class="tickets-id-short-keys"
       [attr.fl-tooltip]="rulTxt"
       (click)="addTicketIdShortKey('%L')">
      %L
    </a>
    <a mat-button class="tickets-id-short-keys"
       [attr.fl-tooltip]="rllTxt"
       (click)="addTicketIdShortKey('%l')">
      %l
    </a>
    <a mat-button class="tickets-id-short-keys"
       [attr.fl-tooltip]="rnTxt"
       (click)="addTicketIdShortKey('%n')">
      %n
    </a>
  </div>
  <div class="fl-margin-top-medium">
    <mat-form-field appFlex="100">
      <mat-label i18n>Ticket id format</mat-label>
      <input matInput placeholder="Ticket id format" i18n-placeholder type="text" formControlName="ticket_id_format" required>
      <mat-error>{{fieldErrors['ticket_id_format']}}</mat-error>
    </mat-form-field>
  </div>
  <div>
    <h2 class="fl-heading-md" i18n>Notifications to end users (ticket owner)</h2>
    <div>
      <mat-checkbox [color]="'primary'" formControlName="notification_to_user_on_ticket_opened" i18n>
        Send notifications to end users when a ticket is opened
      </mat-checkbox>
      <mat-error>{{fieldErrors['notification_to_user_on_ticket_opened']}}</mat-error>
    </div>
    <div>
      <mat-checkbox [color]="'primary'" formControlName="notification_to_user_on_ticket_closed" i18n>
        Send notifications to end users when a ticket is closed
      </mat-checkbox>
      <mat-error>{{fieldErrors['notification_to_user_on_ticket_closed']}}</mat-error>
    </div>
    <div>
      <mat-checkbox [color]="'primary'" formControlName="notification_on_staff_user_reply_to_user" i18n>
        Send notifications to end users when a staff user replies to ticket
      </mat-checkbox>
      <mat-error>{{fieldErrors['notification_on_staff_user_reply_to_user']}}</mat-error>
    </div>
  </div>
  <div>
    <h2 class="fl-heading-md" i18n>Notifications to ticket CC recipients</h2>
    <div>
      <mat-checkbox [color]="'primary'" formControlName="notify_cc_recipients_on_ticket_open" i18n>
        Send notifications to CC recipients when ticket is opened
      </mat-checkbox>
      <mat-error>{{fieldErrors['notify_cc_recipients_on_ticket_open']}}</mat-error>
    </div>
    <div>
      <mat-checkbox [color]="'primary'" formControlName="notify_cc_recipients_on_ticket_close" i18n>
        Send notifications to CC recipients when ticket is closed
      </mat-checkbox>
      <mat-error>{{fieldErrors['notify_cc_recipients_on_ticket_close']}}</mat-error>
    </div>
    <div>
      <mat-checkbox [color]="'primary'" formControlName="notify_cc_recipients_on_ticket_reply" i18n>
        Send notifications to CC recipients when a reply is added to a ticket
      </mat-checkbox>
      <mat-error>{{fieldErrors['notify_cc_recipients_on_ticket_reply']}}</mat-error>
    </div>
  </div>
  <div *ngIf="staffNotificationsSettings && staffNotificationsSettings.length">
    <h2 class="fl-heading-md" i18n>Notifications to staff users</h2>
    <p class="fl-detail" i18n>To enable email notification, check the corresponding box for each staff user.</p>
    <table class="fl-table fl-smaller-rows-table fl-grid">
      <thead>
        <tr>
          <th>
            <div class="fl-margin-left-small" [class.fl-ellipsis-text]="appBreakpoint === 'xs'" i18n>Staff user</div>
          </th>
          <th>
            <div [class.fl-ellipsis-text]="appBreakpoint === 'xs'" i18n>Ticket open</div>
          </th>
          <th>
            <div [class.fl-ellipsis-text]="appBreakpoint === 'xs'" i18n>Staff reply</div>
          </th>
          <th>
            <div [class.fl-ellipsis-text]="appBreakpoint === 'xs'" i18n>End-user reply</div>
          </th>
          <th>
            <div [class.fl-ellipsis-text]="appBreakpoint === 'xs'" i18n>Ticket close</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <ng-container formArrayName="staff_ticket_notifications_settings"
                      *ngFor="let staffSetting of staffNotificationsSettings['controls']; let i = index;">
          <tr [formGroupName]="i">
            <td class="wrap-text-content">
              <div class="fl-margin-left-small"
                   [title]="staffSetting.value.user_display"
                   [class.fl-ellipsis-text]="appBreakpoint === 'xs'"
                   [class.shorten-staff-name-col]="appBreakpoint === 'xs'">
                {{staffSetting.value.user_display}}
              </div>
            </td>
            <td>
              <mat-checkbox formControlName="ticket_open" color="primary"></mat-checkbox>
            </td>
            <td>
              <mat-checkbox formControlName="staff_reply" color="primary"></mat-checkbox>
            </td>
            <td>
              <mat-checkbox formControlName="enduser_reply" color="primary"></mat-checkbox>
            </td>
            <td>
              <mat-checkbox formControlName="ticket_close" color="primary"></mat-checkbox>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </table>
  </div>
</form>
