<section class="content">
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-md-6 mb-2">
        <span *ngIf="!isEditMode" class="mb-0 page-title">{{'ADD_EMAIL_SMTP_SETTING' | translate}}<app-page-help-text
            code="MANAGE_EMAIL_SMTP_SETTING"></app-page-help-text></span>
        <span *ngIf="isEditMode" class="mb-0 page-title">{{'EDIT_EMAIL_SMTP_SETTING' | translate}}<app-page-help-text
            code="MANAGE_EMAIL_SMTP_SETTING"></app-page-help-text></span>
      </div>
    </div>
    <div class="card">
      <div class="body">
        <form [formGroup]="smtpSettingForm">
          <div class="row">
            <div class="col-md-3">
              <div class="form-group ">
                <label> {{'HOST' | translate}}</label>
                <input formControlName="host" class="form-control" type="text">
                <div *ngIf="smtpSettingForm.get('host').touched && smtpSettingForm.get('host').errors">
                  <div class="text-danger" *ngIf="smtpSettingForm.get('host').errors?.required">
                    {{'HOST_IS_REQUIRED' | translate}}
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group ">
                <label> {{'PORT' | translate}}</label>
                <input formControlName="port" class="form-control" type="number">
                <div *ngIf="smtpSettingForm.get('port').touched && smtpSettingForm.get('port').errors">
                  <div class="text-danger" *ngIf="smtpSettingForm.get('port').errors?.required">
                    {{'PORT_IS_REQUIRED' | translate}}
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group ">
                <label>{{'USER_NAME' | translate}}</label>
                <input formControlName="userName" class="form-control" type="text">
                <div *ngIf="smtpSettingForm.get('userName').touched && smtpSettingForm.get('userName').errors">
                  <div class="text-danger" *ngIf="smtpSettingForm.get('userName').errors?.required">
                    {{'USER_NAME_IS_REQUIRED' | translate}}
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label>{{'PASSWORD' | translate}}</label>
                <input autocomplete="new-password" formControlName="password" class="form-control" type="password">
                <div *ngIf="smtpSettingForm.get('password').touched && smtpSettingForm.get('password').errors">
                  <div class="text-danger" *ngIf="smtpSettingForm.get('password').errors?.required">
                    {{'PASSWORD_IS_REQUIRED' | translate}}
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label class="form-label">{{ "ENCRYPTION" | translate }}</label>
                <mat-select class="form-control" panelClass="mat-select-control" formControlName="encryptionType">
                  <mat-option value=""> None </mat-option>
                  <mat-option value="ssl"> ssl </mat-option>
                  <mat-option value="tls"> tls </mat-option>
                  <mat-option value="starttls"> starttls </mat-option>
                </mat-select>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label class="form-label">{{ "FROM_EMAIL" | translate }}</label>
                <input formControlName="fromEmail" class="form-control" type="email" />
                @if(smtpSettingForm.get('fromEmail')?.touched && smtpSettingForm.get('fromEmail')?.errors){
                @if(smtpSettingForm.get('fromEmail')?.errors?.['required']){
                <div class="text-danger">
                  {{ "FROM_EMAIL_IS_REQUIRED" | translate }}
                </div>
                }
                @if(smtpSettingForm.get('fromEmail')?.errors?.['email']){
                <div class="text-danger">
                  {{ "INVALID_EMAIL" | translate }}
                </div>
                }
                }
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label class="form-label">{{ "FROM_NAME" | translate }}</label>
                <input formControlName="fromName" class="form-control" type="text" />
                @if(smtpSettingForm.get('fromName')?.touched &&
                smtpSettingForm.get('fromName')?.errors?.['required']){
                <div class="text-danger">
                  {{ "FROM_NAME_IS_REQUIRED" | translate }}
                </div>
                }
              </div>
            </div>
            <div class="row my-2">
              <div class="col-md-3 status-switch">
                <mat-slide-toggle color="primary" formControlName="isDefault">
                  @if(smtpSettingForm.get('isDefault')?.value){
                  {{ "IS_DEFAULT" | translate }}
                  } @else {
                  {{ "IS_DEFAULT" | translate }}
                  }
                </mat-slide-toggle>
              </div>
            </div>
            <div class="m-top-10 col-md-12">
              <ng-container *ngIf="isEditMode">
                <button class="btn btn-success btn-sm me-2" (click)="saveEmailSMTPSetting()" cdkFocusInitial><i
                    class="fas fa-save"></i> {{'SAVE' | translate}}</button>
              </ng-container>
              <ng-container *ngIf="!isEditMode">
                <button class="btn btn-success btn-sm me-2" (click)="saveEmailSMTPSetting()" cdkFocusInitial>
                  <i-feather name="save" class="small-icon"></i-feather> {{'SAVE' | translate}}</button>
              </ng-container>
              <button type="button" class="btn btn-danger btn-sm" [routerLink]="['/email-smtp']"><i-feather
                  name="x-circle" class="small-icon"></i-feather>
                {{'CANCEL' | translate}}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>