<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you 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.
-->

<nz-spin [nzSpinning]="loading">
  <nz-list nzItemLayout="horizontal">
    <nz-list-item [nzActions]="[emailOp]">
      <ng-template #emailOp>
        <a (click)="onConfigEmailServer()">{{ 'common.button.setting' | i18n }}</a>
      </ng-template>
      <nz-list-item-meta [nzTitle]="'settings.server.email' | i18n" [nzDescription]="emailDesc">
        <ng-template #emailDesc>
          {{ 'alert.notice.sender.mail.host' | i18n }}: {{ emailSender.emailHost }}
          <br />
          {{ 'alert.notice.sender.mail.username' | i18n }}: {{ emailSender.emailUsername }}
          <br />
          {{ 'alert.notice.sender.mail.port' | i18n }}: {{ emailSender.emailPort }}
          <br />
          {{ 'alert.notice.sender.mail.ssl' | i18n }}: {{ emailSender.emailSsl ? ('common.yes' | i18n) : ('common.no' | i18n) }}
          <br />
          {{ 'alert.notice.sender.mail.starttls' | i18n }}: {{ emailSender.emailStarttls ? ('common.yes' | i18n) : ('common.no' | i18n) }}
          <br />
          {{ 'alert.notice.sender.mail.enable' | i18n }}: {{ emailSender.enable ? ('common.yes' | i18n) : ('common.no' | i18n) }}
        </ng-template>
      </nz-list-item-meta>
    </nz-list-item>
    <nz-list-item [nzActions]="[smsOp]">
      <ng-template #smsOp>
        <a (click)="onConfigSmsServer()">{{ 'common.button.setting' | i18n }}</a>
      </ng-template>
      <nz-list-item-meta [nzTitle]="'settings.server.sms' | i18n" [nzDescription]="smsDesc">
        <ng-template #smsDesc>
          {{ 'alert.notice.sender.sms.type' | i18n }}: {{ 'alert.notice.sender.sms.type.' + smsNoticeSender.type | i18n }}
          <br />
          <ng-container [ngSwitch]="smsNoticeSender.type">
            <!-- Tencent SMS -->
            <ng-container *ngSwitchCase="SmsType.TENCENT">
              {{ 'alert.notice.sender.sms.tencent.appId' | i18n }}: {{ smsNoticeSender.tencent.appId }}
              <br />
              {{ 'alert.notice.sender.sms.tencent.signName' | i18n }}: {{ smsNoticeSender.tencent.signName }}
              <br />
              {{ 'alert.notice.sender.sms.tencent.templateId' | i18n }}: {{ smsNoticeSender.tencent.templateId }}
            </ng-container>

            <!-- Alibaba SMS -->
            <ng-container *ngSwitchCase="SmsType.ALIBABA">
              {{ 'alert.notice.sender.sms.alibaba.signName' | i18n }}: {{ smsNoticeSender.alibaba.signName }}
              <br />
              {{ 'alert.notice.sender.sms.alibaba.templateCode' | i18n }}: {{ smsNoticeSender.alibaba.templateCode }}
            </ng-container>

            <!-- UniSMS -->
            <ng-container *ngSwitchCase="SmsType.UNISMS">
              {{ 'alert.notice.sender.sms.unisms.signature' | i18n }}: {{ smsNoticeSender.unisms.signature }}
              <br />
              {{ 'alert.notice.sender.sms.unisms.templateId' | i18n }}: {{ smsNoticeSender.unisms.templateId }}
              <br />
              {{ 'alert.notice.sender.sms.unisms.authMode' | i18n }}: {{ smsNoticeSender.unisms.authMode }}
            </ng-container>
            <ng-container *ngSwitchCase="SmsType.TWILIO">
              {{ 'alert.notice.sender.sms.twilio.accountSid' | i18n }}: {{ smsNoticeSender.twilio.accountSid }}
              <br />
              {{ 'alert.notice.sender.sms.twilio.twilioPhoneNumber' | i18n }}: {{ smsNoticeSender.twilio.twilioPhoneNumber }}
            </ng-container>
          </ng-container>
          <br />
          {{ 'common.enable' | i18n }}: {{ smsNoticeSender.enable ? ('common.yes' | i18n) : ('common.no' | i18n) }}
        </ng-template>
      </nz-list-item-meta>
    </nz-list-item>
  </nz-list>
</nz-spin>

<!-- email server modal -->
<nz-modal
  [(nzVisible)]="isEmailServerModalVisible"
  [nzTitle]="'settings.server.email.setting' | i18n"
  (nzOnCancel)="onCancelEmailServer()"
  (nzOnOk)="onSaveEmailServer()"
  nzMaskClosable="false"
  nzWidth="40%"
  [nzOkLoading]="senderServerLoading"
>
  <div *nzModalContent class="-inner-content">
    <form nz-form #senderForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="emailHost" nzRequired="true">{{ 'alert.notice.sender.mail.host' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="emailSender.emailHost" nz-input required name="emailHost" type="text" id="emailHost" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="emailPort" nzRequired="true">{{ 'alert.notice.sender.mail.port' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="emailSender.emailPort" nz-input required name="emailPort" type="number" id="emailPort" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="emailUsername" nzRequired="true">{{ 'alert.notice.sender.mail.username' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="emailSender.emailUsername" nz-input required name="emailUsername" type="text" id="emailUsername" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="emailPassword" nzRequired="true">{{ 'alert.notice.sender.mail.password' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="emailSender.emailPassword" nz-input required name="emailPassword" type="password" id="emailPassword" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="emailSsl" nzRequired="true">{{ 'alert.notice.sender.mail.ssl' | i18n }}</nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-switch [(ngModel)]="emailSender.emailSsl" required name="emailSsl" id="emailSsl"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="emailStarttls" nzRequired="true">{{ 'alert.notice.sender.mail.starttls' | i18n }}</nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-switch [(ngModel)]="emailSender.emailStarttls" required name="emailStarttls" id="emailStarttls"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="emailEnable" nzRequired="true">{{ 'common.enable' | i18n }}</nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-switch [(ngModel)]="emailSender.enable" required name="emailEnable" id="emailEnable"></nz-switch>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</nz-modal>

<!-- sms server model -->
<nz-modal
  [(nzVisible)]="isSmsServerModalVisible"
  [nzTitle]="'settings.server.sms.setting' | i18n"
  (nzOnCancel)="onCancelSmsServer()"
  (nzOnOk)="onSaveSmsServer()"
  nzMaskClosable="false"
  nzWidth="40%"
  [nzOkLoading]="senderServerLoading"
>
  <div *nzModalContent class="-inner-content">
    <form nz-form #senderForm="ngForm">
      <nz-form-item>
        <nz-form-label nzSpan="7" nzRequired="true">{{ 'alert.notice.sender.sms.type' | i18n }}</nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-select [(ngModel)]="smsType" name="type" id="type" (ngModelChange)="onSmsTypeChange($event)">
            <nz-option [nzValue]="SmsType.TENCENT" nzLabel="{{ 'alert.notice.sender.sms.type.tencent' | i18n }}"></nz-option>
            <nz-option [nzValue]="SmsType.ALIBABA" nzLabel="{{ 'alert.notice.sender.sms.type.alibaba' | i18n }}"></nz-option>
            <nz-option [nzValue]="SmsType.UNISMS" nzLabel="{{ 'alert.notice.sender.sms.type.unisms' | i18n }}"></nz-option>
            <nz-option [nzValue]="SmsType.SMSLOCAL" nzLabel="{{ 'alert.notice.sender.sms.type.smslocal' | i18n }}"></nz-option>
            <nz-option [nzValue]="SmsType.AWS" nzLabel="{{ 'alert.notice.sender.sms.type.aws' | i18n }}"></nz-option>
            <nz-option [nzValue]="SmsType.TWILIO" nzLabel="{{ 'alert.notice.sender.sms.type.twilio' | i18n }}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <!-- Tencent SMS -->
      <ng-container *ngIf="smsType === SmsType.TENCENT">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="secretId" nzRequired="true">
            {{ 'alert.notice.sender.sms.tencent.secretId' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input [(ngModel)]="smsNoticeSender.tencent.secretId" nz-input required name="secretId" type="password" id="secretId" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="secretKey" nzRequired="true">
            {{ 'alert.notice.sender.sms.tencent.secretKey' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input [(ngModel)]="smsNoticeSender.tencent.secretKey" nz-input required name="secretKey" type="password" id="secretKey" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="signName" nzRequired="true">{{
            'alert.notice.sender.sms.tencent.signName' | i18n
          }}</nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input [(ngModel)]="smsNoticeSender.tencent.signName" nz-input required name="signName" type="text" id="signName" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="appId" nzRequired="true">{{ 'alert.notice.sender.sms.tencent.appId' | i18n }}</nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input [(ngModel)]="smsNoticeSender.tencent.appId" nz-input required name="appId" type="text" id="appId" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label nzSpan="7" nzFor="templateId" nzRequired="true">{{
            'alert.notice.sender.sms.tencent.templateId' | i18n
          }}</nz-form-label>
          <nz-form-control nzSpan="12">
            <input [(ngModel)]="smsNoticeSender.tencent.templateId" nz-input required name="templateId" type="text" id="templateId" />
          </nz-form-control>
        </nz-form-item>
      </ng-container>

      <!-- Alibaba SMS -->
      <ng-container *ngIf="smsType === SmsType.ALIBABA">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="accessKeyId" nzRequired="true">
            {{ 'alert.notice.sender.sms.alibaba.accessKeyId' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input
              [(ngModel)]="smsNoticeSender.alibaba.accessKeyId"
              nz-input
              required
              name="accessKeyId"
              type="password"
              id="alibabaAccessKeyId"
            />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="accessKeySecret" nzRequired="true">
            {{ 'alert.notice.sender.sms.alibaba.accessKeySecret' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input
              [(ngModel)]="smsNoticeSender.alibaba.accessKeySecret"
              nz-input
              required
              name="accessKeySecret"
              type="password"
              id="alibabaAccessKeySecret"
            />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="signName" nzRequired="true">
            {{ 'alert.notice.sender.sms.alibaba.signName' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input [(ngModel)]="smsNoticeSender.alibaba.signName" nz-input required name="signName" type="text" id="alibabaSignName" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="templateCode" nzRequired="true">
            {{ 'alert.notice.sender.sms.alibaba.templateCode' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input
              [(ngModel)]="smsNoticeSender.alibaba.templateCode"
              nz-input
              required
              name="templateCode"
              type="text"
              id="alibabaTemplateCode"
            />
          </nz-form-control>
        </nz-form-item>
      </ng-container>

      <!-- UniSMS -->
      <ng-container *ngIf="smsType === SmsType.UNISMS">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="accessKeyId" nzRequired="true">
            {{ 'alert.notice.sender.sms.unisms.accessKeyId' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input
              [(ngModel)]="smsNoticeSender.unisms.accessKeyId"
              nz-input
              required
              name="accessKeyId"
              type="password"
              id="unismsAccessKeyId"
            />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label nzSpan="7" nzFor="authMode" nzRequired="true">
            {{ 'alert.notice.sender.sms.unisms.authMode' | i18n }}
          </nz-form-label>
          <nz-form-control nzSpan="12">
            <nz-select [(ngModel)]="smsNoticeSender.unisms.authMode" name="authMode" id="unismsAuthMode" required>
              <nz-option [nzValue]="uniSmsAuthModes.HMAC" nzLabel="HMAC"></nz-option>
              <nz-option [nzValue]="uniSmsAuthModes.SIMPLE" nzLabel="Simple"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <!-- accessKeySecret 根据 authMode 动态显示 -->
        <nz-form-item *ngIf="isAccessKeySecretRequired()">
          <nz-form-label [nzSpan]="7" nzFor="accessKeySecret" nzRequired="true">
            {{ 'alert.notice.sender.sms.unisms.accessKeySecret' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input
              [(ngModel)]="smsNoticeSender.unisms.accessKeySecret"
              nz-input
              required
              name="accessKeySecret"
              type="password"
              id="unismsAccessKeySecret"
            />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="signature" nzRequired="true">
            {{ 'alert.notice.sender.sms.unisms.signature' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input [(ngModel)]="smsNoticeSender.unisms.signature" nz-input required name="signature" type="text" id="unismsSignature" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="templateId" nzRequired="true">
            {{ 'alert.notice.sender.sms.unisms.templateId' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input [(ngModel)]="smsNoticeSender.unisms.templateId" nz-input required name="templateId" type="text" id="unismsTemplateId" />
          </nz-form-control>
        </nz-form-item>
      </ng-container>

      <!-- Smslocal SMS -->
      <ng-container *ngIf="smsType === SmsType.SMSLOCAL">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="apiKey" nzRequired="true">
            {{ 'alert.notice.sender.sms.smslocal.apiKey' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input [(ngModel)]="smsNoticeSender.smslocal.apiKey" nz-input required name="apiKey" type="password" id="apiKey" />
          </nz-form-control>
        </nz-form-item>
      </ng-container>

      <!-- AWS SMS -->
      <ng-container *ngIf="smsType === SmsType.AWS">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="accessKeyId" nzRequired="true">
            {{ 'alert.notice.sender.sms.aws.accessKeyId' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input [(ngModel)]="smsNoticeSender.aws.accessKeyId" nz-input required name="accessKeyId" type="password" id="awsAccessKeyId" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="accessKeySecret" nzRequired="true">
            {{ 'alert.notice.sender.sms.aws.accessKeySecret' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input
              [(ngModel)]="smsNoticeSender.aws.accessKeySecret"
              nz-input
              required
              name="accessKeySecret"
              type="password"
              id="awsAccessKeySecret"
            />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="region" nzRequired="true">
            {{ 'alert.notice.sender.sms.aws.region' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input [(ngModel)]="smsNoticeSender.aws.region" nz-input required name="region" type="text" id="awsRegion" />
          </nz-form-control>
        </nz-form-item>
      </ng-container>

      <!-- Twilio SMS -->
      <ng-container *ngIf="smsType === SmsType.TWILIO">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="accountSid" nzRequired="true">
            {{ 'alert.notice.sender.sms.twilio.accountSid' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input
              [(ngModel)]="smsNoticeSender.twilio.accountSid"
              nz-input
              required
              name="accountSid"
              type="password"
              id="twilioAccountSid"
            />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="authToken" nzRequired="true">
            {{ 'alert.notice.sender.sms.twilio.authToken' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input [(ngModel)]="smsNoticeSender.twilio.authToken" nz-input required name="authToken" type="password" id="twilioAuthToken" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="twilioPhoneNumber" nzRequired="true">
            {{ 'alert.notice.sender.sms.twilio.twilioPhoneNumber' | i18n }}
          </nz-form-label>
          <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
            <input
              [(ngModel)]="smsNoticeSender.twilio.twilioPhoneNumber"
              nz-input
              required
              name="twilioPhoneNumber"
              type="text"
              id="twilioPhoneNumber"
            />
          </nz-form-control>
        </nz-form-item>
      </ng-container>

      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="smsEnable" nzRequired="true">{{ 'common.enable' | i18n }}</nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-switch [(ngModel)]="smsNoticeSender.enable" required name="smsEnable" id="smsEnable"></nz-switch>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</nz-modal>
