<!--

    Copyright © 2016-2026 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<section class="tb-template-header">
  <div class="tb-form-panel-title" translate>notification.customize-messages</div>
  <div class="tb-form-panel-hint tb-hint-available-params">
    <span class="content">{{ 'notification.input-fields-support-templatization' | translate }}</span>
    <span tb-help-popup="{{ NotificationTemplateTypeTranslateMap.get(notificationType).helpId }}"
          tb-help-popup-placement="bottom"
          trigger-style="letter-spacing:0.25px;font-size:12px;"
          [tb-help-popup-style]="{maxWidth: '800px'}"
          trigger-text="{{ 'notification.see-documentation' | translate }}"></span>
  </div>
</section>
<section [formGroup]="templateConfigurationForm" class="tb-form-panel no-border no-padding">
  @if (templateConfigurationForm.get('WEB.enabled').value) {
    <section class="tb-form-panel tb-slide-toggle stroked" [formGroupName]="NotificationDeliveryMethod.WEB">
      <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.WEB) }}">
        <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
          <mat-panel-title class="template-tittle">
            <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.WEB).icon }}</tb-icon>
            {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.WEB).name | translate }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent class="tb-extension-panel">
          <mat-form-field class="mat-block" appearance="outline">
            <mat-label translate>notification.subject</mat-label>
            <input matInput formControlName="subject">
            @if (templateConfigurationForm.get('WEB.subject').hasError('required')) {
              <mat-error>{{ 'notification.subject-required' | translate }}</mat-error>
            }
            @if (templateConfigurationForm.get('WEB.subject').hasError('maxlength')) {
              <mat-error>{{ 'notification.subject-max-length' | translate :
                {length: templateConfigurationForm.get('WEB.subject').getError('maxlength').requiredLength}
                }}</mat-error>
            }
          </mat-form-field>
          <mat-form-field class="mat-block" appearance="outline">
            <mat-label translate>notification.message</mat-label>
            <textarea matInput cdkTextareaAutosize cols="1" cdkAutosizeMinRows="1" formControlName="body"></textarea>
            @if (templateConfigurationForm.get('WEB.body').hasError('required')) {
              <mat-error>{{ 'notification.message-required' | translate }}</mat-error>
            }
            @if (templateConfigurationForm.get('WEB.body').hasError('maxlength')) {
              <mat-error>{{ 'notification.message-max-length' | translate :
                {length: templateConfigurationForm.get('WEB.body').getError('maxlength').requiredLength}
                }}</mat-error>
            }
          </mat-form-field>
          <section formGroupName="additionalConfig" class="tb-form-panel no-padding no-border">
            <div class="tb-form-row space-between" formGroupName="icon">
              <mat-slide-toggle formControlName="enabled" class="mat-slide">
                {{ 'icon.icon' | translate }}
              </mat-slide-toggle>
              <div class="flex flex-row items-center justify-start gap-2">
                <tb-material-icon-select asBoxInput
                                         [color]="templateConfigurationForm.get('WEB.additionalConfig.icon.color').value"
                                         formControlName="icon">
                </tb-material-icon-select>
                <tb-color-input asBoxInput formControlName="color"></tb-color-input>
              </div>
            </div>
            <tb-notification-action-button-configuration
              actionTitle="{{ 'notification.action-button' | translate }}"
              formControlName="actionButtonConfig">
            </tb-notification-action-button-configuration>
          </section>
        </ng-template>
      </mat-expansion-panel>
    </section>
  }
  @if (templateConfigurationForm.get('MOBILE_APP.enabled').value) {
    <section class="tb-form-panel tb-slide-toggle stroked" [formGroupName]="NotificationDeliveryMethod.MOBILE_APP">
      <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.MOBILE_APP) }}">
        <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
          <mat-panel-title class="template-tittle">
            <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MOBILE_APP).icon }}</tb-icon>
            {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MOBILE_APP).name | translate }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent class="tb-extension-panel">
          <mat-form-field class="mat-block" appearance="outline">
            <mat-label translate>notification.subject</mat-label>
            <input matInput formControlName="subject">
            @if (templateConfigurationForm.get('MOBILE_APP.subject').hasError('required')) {
              <mat-error>{{ 'notification.subject-required' | translate }}</mat-error>
            }
            @if (templateConfigurationForm.get('MOBILE_APP.subject').hasError('maxlength')) {
              <mat-error>{{ 'notification.subject-max-length' | translate :
                {length: templateConfigurationForm.get('MOBILE_APP.subject').getError('maxlength').requiredLength}
                }}</mat-error>
            }
          </mat-form-field>
          <mat-form-field class="mat-block" appearance="outline">
            <mat-label translate>notification.message</mat-label>
            <textarea matInput cdkTextareaAutosize cols="1" cdkAutosizeMinRows="1" formControlName="body"></textarea>
            @if (templateConfigurationForm.get('MOBILE_APP.body').hasError('required')) {
              <mat-error>{{ 'notification.message-required' | translate }}</mat-error>
            }
            @if (templateConfigurationForm.get('MOBILE_APP.body').hasError('maxlength')) {
              <mat-error>{{ 'notification.message-max-length' | translate :
                {length: templateConfigurationForm.get('MOBILE_APP.body').getError('maxlength').requiredLength}
                }}</mat-error>
            }
          </mat-form-field>
          <div formGroupName="additionalConfig" class="tb-form-panel no-padding no-border">
            <div class="tb-form-row space-between" formGroupName="icon">
              <mat-slide-toggle formControlName="enabled" class="mat-slide">
                {{ 'icon.icon' | translate }}
              </mat-slide-toggle>
              <div class="flex flex-row items-center justify-start gap-2">
                <tb-material-icon-select asBoxInput
                                         [color]="templateConfigurationForm.get('MOBILE_APP.additionalConfig.icon.color').value"
                                         formControlName="icon">
                </tb-material-icon-select>
                <tb-color-input asBoxInput formControlName="color"></tb-color-input>
              </div>
            </div>
            <tb-notification-action-button-configuration
              formControlName="onClick"
              hideButtonText
              [sliderHint]="notificationTapActionHint"
              actionTitle="{{ 'notification.notification-tap-action' | translate }}">
            </tb-notification-action-button-configuration>
          </div>
        </ng-template>
      </mat-expansion-panel>
    </section>
  }
  @if (templateConfigurationForm.get('SMS.enabled').value) {
    <section class="tb-form-panel tb-slide-toggle stroked" [formGroupName]="NotificationDeliveryMethod.SMS">
      <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.SMS) }}">
        <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
          <mat-panel-title class="template-tittle">
            <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SMS).icon }}</tb-icon>
            {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SMS).name | translate }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent class="tb-extension-panel">
          <mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic">
            <mat-label translate>notification.message</mat-label>
            <textarea matInput cdkTextareaAutosize cols="1" cdkAutosizeMinRows="1" formControlName="body"></textarea>
            <mat-hint></mat-hint>
            @if (templateConfigurationForm.get('SMS.body').hasError('required')) {
              <mat-error>{{ 'notification.message-required' | translate }}</mat-error>
            }
            @if (templateConfigurationForm.get('SMS.body').hasError('maxlength')) {
              <mat-error>{{ 'notification.message-max-length' | translate :
                {length: templateConfigurationForm.get('SMS.body').getError('maxlength').requiredLength}
                }}</mat-error>
            }
          </mat-form-field>
        </ng-template>
      </mat-expansion-panel>
    </section>
  }
  @if (templateConfigurationForm.get('EMAIL.enabled').value) {
    <section class="tb-form-panel tb-slide-toggle stroked" [formGroupName]="NotificationDeliveryMethod.EMAIL">
      <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.EMAIL) }}">
        <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
          <mat-panel-title class="template-tittle">
            <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).icon }}</tb-icon>
            {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).name | translate }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent class="tb-extension-panel">
          <mat-form-field class="mat-block" appearance="outline">
            <mat-label translate>notification.subject</mat-label>
            <input matInput formControlName="subject">
            @if (templateConfigurationForm.get('EMAIL.subject').hasError('required')) {
              <mat-error>{{ 'notification.subject-required' | translate }}</mat-error>
            }
            @if (templateConfigurationForm.get('EMAIL.subject').hasError('maxlength')) {
              <mat-error>{{ 'notification.subject-max-length' | translate :
                {length: templateConfigurationForm.get('EMAIL.subject').getError('maxlength').requiredLength}
                }}</mat-error>
            }
          </mat-form-field>
          <mat-label class="tb-title tb-required"
                     [class.tb-error]="(interacted || templateConfigurationForm.get('EMAIL.body').touched) && templateConfigurationForm.get('EMAIL.body').hasError('required')"
                     translate>notification.message
          </mat-label>
          <editor [init]="tinyMceOptions" formControlName="body"></editor>
          @if ((interacted || templateConfigurationForm.get('EMAIL.body').touched) && templateConfigurationForm.get('EMAIL.body').hasError('required')) {
            <mat-error class="tb-mat-error">{{ 'notification.message-required' | translate }}</mat-error>
          }
        </ng-template>
      </mat-expansion-panel>
    </section>
  }
  @if (templateConfigurationForm.get('SLACK.enabled').value) {
    <section class="tb-form-panel tb-slide-toggle stroked" [formGroupName]="NotificationDeliveryMethod.SLACK">
      <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.SLACK) }}">
        <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
          <mat-panel-title class="template-tittle">
            <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).icon }}</tb-icon>
            {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).name | translate }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent class="tb-extension-panel">
          <mat-form-field class="mat-block" appearance="outline">
            <mat-label translate>notification.message</mat-label>
            <textarea matInput cdkTextareaAutosize cols="1" cdkAutosizeMinRows="1" formControlName="body"></textarea>
            @if (templateConfigurationForm.get('SLACK.body').hasError('required')) {
              <mat-error>{{ 'notification.message-required' | translate }}</mat-error>
            }
          </mat-form-field>
        </ng-template>
      </mat-expansion-panel>
    </section>
  }
  @if (templateConfigurationForm.get('MICROSOFT_TEAMS.enabled').value) {
    <section class="tb-form-panel tb-slide-toggle stroked" [formGroupName]="NotificationDeliveryMethod.MICROSOFT_TEAMS">
      <mat-expansion-panel class="tb-settings" expanded="{{ expandedForm(NotificationDeliveryMethod.MICROSOFT_TEAMS) }}">
        <mat-expansion-panel-header class="fill-width flex flex-row flex-wrap">
          <mat-panel-title class="template-tittle">
            <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MICROSOFT_TEAMS).icon }}</tb-icon>
            {{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MICROSOFT_TEAMS).name | translate }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent class="tb-extension-panel">
          <mat-form-field class="mat-block" appearance="outline">
            <mat-label translate>notification.subject</mat-label>
            <input matInput formControlName="subject">
          </mat-form-field>
          <mat-form-field class="mat-block" appearance="outline">
            <mat-label translate>notification.message</mat-label>
            <textarea matInput cdkTextareaAutosize cols="1" cdkAutosizeMinRows="1" formControlName="body"></textarea>
            @if (templateConfigurationForm.get('MICROSOFT_TEAMS.body').hasError('required')) {
              <mat-error>{{ 'notification.message-required' | translate }}</mat-error>
            }
          </mat-form-field>
          <div class="tb-form-panel no-padding no-border">
            <div class="tb-form-row space-between">
              <div translate>notification.theme-color</div>
              <tb-color-input asBoxInput formControlName="themeColor"></tb-color-input>
            </div>
            <tb-notification-action-button-configuration
              actionTitle="{{ 'notification.action-button' | translate }}"
              formControlName="button">
            </tb-notification-action-button-configuration>
          </div>
        </ng-template>
      </mat-expansion-panel>
    </section>
  }
</section>
