<admin-page-header [title]="'Email Setting'"></admin-page-header>

<!-- Send Test Mail -->
<div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card ">
        <div class="card-header border-0">
            <h4 class="card-title">{{'Send Test Mail' | translate}}</h4>
        </div>
        <div class="card-body">
            <form method="post" #FormData="ngForm" (ngSubmit)="testmail(FormData.value, 'testmail')" id="my-form">
                <div class="row">
                    <div class="form-group col-md-6">
                        <input class="form-control" ngModel #c_email="ngModel"
                        [class.is-invalid]="c_email.invalid && c_email.touched" name="email" [placeholder]="'Enter Mail' | translate" type="email" value="email"
                            id="example-email-input">
                            @if ((c_email.invalid && c_email.touched) || c_email.dirty) {
                                <div
                                  >
                                  @if (c_email.errors?.['required']) {
                                    <small class="text-danger"
                                      >
                                    {{'Email address is required' | translate}}</small>
                                  }
              @if (c_email.errors?.['pattern']) {
              <small class="text-danger">{{'Please check Email Format' | translate}}</small>
              }
                                </div>
                              }
                    </div>
                    <div class="form-group col-md-6">
                        <button [disabled]="sendingResponse['testmail']" type="submit"
                            class="btn btn-secondary">{{'Send' | translate}}
                            @if(sendingResponse['testmail']){
                                <i class="fa fa-spinner fa-spin mx-1"></i>
                            }
                            </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Send Test Mail -->

<!-- Email Setting -->
<div class="col-xl-12 col-lg-12 col-md-12">
    <!--- Custom notification -->
    
    <ngb-alert type="warning-light" [dismissible]="true" class="br-13 mt-6 align-items-center border-0 d-flex btn-close-border-0" >
        <p class="fs-14 mb-0">
            {{"Ensure that your Email Setting, specifically SMTP/Send Mail and IMAP Settings, should utilize only single-domain emails, even if you are using different email id's (e.g., if using gmail.com, ensure both settings correspond to that domain.)" | translate | titlecase}}
        </p>
     </ngb-alert>
 
 <!--- End Custom notification -->
    <div class="card ">
        <div class="card-header border-0">
            <h4 class="card-title">{{'Email Setting' | translate}}</h4>
        </div>
        <form #EmailSetting="ngForm" (ngSubmit)="emailSetting(EmailSetting, 'emailSetting')">
            <div class="card-body">
                <div class="row" id="selectmail">
                    <div class="col-sm-12 col-md-12">
                        <div class="form-group">
                            <label class="form-label">{{'Mail Username' | translate}}<span
                                    class="text-red">*</span></label>
                            <input type="text" class="form-control" required [ngModel]="MailUsername"
                                name="mail_username" #mailusername="ngModel"
                                [class.is-invalid]="mailusername.invalid && mailusername.touched">
                                @if((mailusername.invalid && mailusername.touched) || mailusername.dirty){
                                    <div>
                                        @if(mailusername.errors?.['required']){
                                            <small class="text-danger">{{'Mail Username is required' | translate}}</small>
                                        }   
                                    </div>
                                }
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 mb-2">
                        <div class="form-group">
                            <label class="form-label">{{'Mail Driver' | translate}}</label>
                            <ng-select class="form-control" [items]="emailSettingOptions" #select
                                [placeholder]="'Select Mail Setting' | translate" [virtualScroll]="true"
                                bindLabel="name" [multiple]="false" [searchable]="true" [loading]="!emailSettingOptions"
                                dropdownPosition="auto" bindValue="value" name="mail_driver" [(ngModel)]="MailDriver">
                                <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                                    <div><span>{{item?.name}}</span></div>
                                </ng-template>
                            </ng-select>
                        </div>
                    </div>
                    @if(MailDriver == 'smtp'){
                        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3 col-xxl-3 fromail">
                            <div class="form-group">
                                <label class="form-label">{{'Mail Host' | translate}} <span
                                        class="text-red">*</span></label>
                                <input type="text" class="form-control" required ngModel="{{MailHost}}" name="mail_host"
                                    #mailhost="ngModel" [class.is-invalid]="mailhost.invalid && mailhost.touched">
                                    @if((mailhost.invalid && mailhost.touched) || mailhost.dirty){
                                <div >
                                    @if(mailhost.errors?.['required']){
                                    <small class="text-danger">{{'Mail Host is required' | translate}}</small>
                                    }
                                </div>
                            }
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3 col-xxl-3 fromail">
                            <div class="form-group">
                                <label class="form-label">{{'Mail Port' | translate}}<span
                                        class="text-red">*</span></label>
                                <input type="text" class="form-control" required [ngModel]="MailPort" name="mail_port"
                                    #mailport="ngModel" [class.is-invalid]="mailport.invalid && mailport.touched">
                                    @if((mailport.invalid && mailport.touched) || mailport.dirty){
                                <div>
                                    @if(mailport.errors?.['required']){
                                    <small class="text-danger">{{'Mail Port is required' | translate}}</small>}
                                </div>
                            }

                            </div>
                        </div>

                        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3 col-xxl-3 fromail">
                            <div class="form-group">
                                <label class="form-label">{{'Mail Password' | translate}}<span
                                        class="text-red">*</span></label>
                                <input class="form-control" required [ngModel]="MailPassword" type="password"
                                    name="mail_password" #mailpswd="ngModel"
                                    [class.is-invalid]="mailpswd.invalid && mailpswd.touched">
                                    @if((mailpswd.invalid && mailpswd.touched) || mailpswd.dirty){
                                <div >
                                    @if(mailpswd.errors?.['required']){
                                    <small class="text-danger">{{'Mail Password is required' | translate}}</small>}
                                </div>
                            }
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3 col-xxl-3 fromail">
                            <div class="form-group">
                                <label class="form-label">{{'Mail Encryption' | translate}}<span
                                        class="text-red">*</span></label>
                                <ng-select required [ngModel]="MailEncryption"
                                    class="form-control select2form select2-hidden-accessible" name="mail_encryption"
                                    #mailencryption="ngModel"
                                    [class.is-invalid]="mailencryption.invalid && mailencryption.touched" tabindex="-1"
                                    aria-hidden="true">
                                    <ng-option value="ssl" selected>ssl</ng-option>
                                    <ng-option value="tls">tls</ng-option>
                                </ng-select>
                                @if((mailencryption.invalid && mailencryption.touched) || mailencryption.dirty){
                                <div>
                                    @if(mailencryption.errors?.['required']){
                                    <small class="text-danger">{{'Mail Encryption is required' | translate}}</small>}
                                </div>}
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3 col-xxl-3 fromail">
                            <div class="form-group">
                                <label class="form-label">{{'From Name' | translate}} <span
                                        class="text-red">*</span></label>
                                <input type="text" class="form-control" required [ngModel]="MailFromName"
                                    name="mail_from_name" #fromName="ngModel"
                                    [class.is-invalid]="fromName.invalid && fromName.touched">
                                    @if((fromName.invalid && fromName.touched) || fromName.dirty){
                                <div>
                                    @if(fromName.errors?.['required']){
                                    <small class="text-danger">{{'From Name is required' | translate}}</small>}
                                </div>}
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3 col-xxl-3 fromail">
                            <div class="form-group">
                                <label class="form-label">{{'From Email' | translate}}<span
                                        class="text-red">*</span></label>
                                <input type="email"  #c_email="ngModel"
                                    name="mail_from_address" required [ngModel]="MailFromAddress" class="form-control"
                                    #fromEmail="ngModel" [class.is-invalid]="fromEmail.invalid && fromEmail.touched"
                                    [class.is-valid]="fromEmail.valid">
                                    @if((fromEmail.invalid && fromEmail.touched) || fromEmail.dirty){
                                <div>
                                    @if(fromEmail.errors?.['required']){
                                    <small class="text-danger" >{{'From Email address is required' | translate}}</small>
                                    }
                                    @if (fromEmail.errors?.['pattern']) {
                                    <small class="text-danger">{{'Please check Email Format' | translate}}</small>
                                    }
                                </div>}
                            </div>
                        </div>
                    
                }
                    @if(MailDriver == 'sendmail'){
                        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 fromail">
                            <div class="form-group">
                                <label class="form-label">{{'From Name' | translate}} <span
                                        class="text-red">*</span></label>
                                <input type="text" class="form-control" required [ngModel]="MailFromName"
                                    name="mail_from_name" #fromName="ngModel"
                                    [class.is-invalid]="fromName.invalid && fromName.touched">
                                    @if((fromName.invalid && fromName.touched) || fromName.dirty){
                                <div>
                                    @if(fromName.errors?.['required']){
                                    <small class="text-danger">{{'From Name is required' | translate}}</small>}
                                </div>}
                            </div>
                        </div>

                        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 fromail">
                            <div class="form-group">
                                <label class="form-label">{{'From Email' | translate}}<span
                                        class="text-red">*</span></label>
                                <input type="email" 
                                    name="mail_from_address" required [ngModel]="MailFromAddress" class="form-control"
                                    #fromEmail="ngModel" [class.is-invalid]="fromEmail.invalid && fromEmail.touched"
                                    [class.is-valid]="fromEmail.valid">
                                    @if((fromEmail.invalid && fromEmail.touched) || fromEmail.dirty){
                                <div>
                                    @if(fromEmail.errors?.['required']){
                                    <small class="text-danger">{{'From Email address is required' | translate}}</small>}
                                    @if (fromEmail.errors?.['pattern']) {
                                    <small class="text-danger">{{'Please check Email Format' | translate}}</small>
                                    }
                                </div>}
                            </div>
                        </div>
                    }
                </div>
            </div>
            
            <div class="modal-footer">
                <button class="btn btn-secondary imapsave" id="imapsave">{{ 'Save Changes' | translate | titlecase }}</button>
            </div>
        </form>
    </div>
</div>

<!-- Eamil to ticket  Test Mail -->
<div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card ">
        <div class="card-header border-0">
            <h4 class="card-title">{{'Email to Ticket' | translate}}</h4>
        </div>
        <div class="card-body">
            <form #cloneTicket="ngForm" (ngSubmit)="EmailToTicket(cloneTicket)">
                <div class="switch_section">
                    <div class="switch-toggle d-flex d-md-max-block mt-4">
                        <span class="onoffswitch2">
                            <input type="checkbox" name="IMAP_STATUS" id="IMAP_STATUS"
                                class=" toggle-class onoffswitch2-checkbox sprukoregister" value="off"
                                [checked]="setting?.IMAP_STATUS =='on' ? true : false"
                                [ngModel]="setting?.IMAP_STATUS =='on' ? true : false"
                                [value]="setting?.IMAP_STATUS =='on' ? true : false">
                            <label for="IMAP_STATUS" class="toggle-class onoffswitch2-label"></label>
                        </span>
                        <label class="form-label ps-3 ps-md-max-0">{{'Enable Email to ticket' | translate |
                            titlecase}}</label>
                        <small class="text-muted ps-2 ps-md-max-0"><i>({{'Configure IMAP settings first on the
                                "Email to Ticket" page and enable this "Email to Ticket" feature so that customers
                                will be able to generate support tickets through their email correspondence.' |
                                translate}})</i></small>
                    </div>
                </div>
                <div class="switch_section">
                    <div class="switch-toggle d-flex d-md-max-block mt-4">
                        <span class="onoffswitch2">
                            <input type="checkbox" name="email_delete" id="email_delete"
                                class=" toggle-class onoffswitch2-checkbox sprukoregister" value="off"
                                [checked]="setting?.email_delete == 1 ? true : false"
                                [ngModel]="setting?.email_delete == 1 ? true : false"
                                [value]="setting?.email_delete == 1 ? true : false">
                            <label for="email_delete" class="toggle-class onoffswitch2-label"></label>
                        </span>
                        <label class="form-label ps-3 ps-md-max-0">{{'Auto-delete Email Upon Ticket Creation' |
                            translate | titlecase}}</label>
                        <small class="text-muted ps-2 ps-md-max-0"><i>({{'By enabling this switch, emails will be permanently deleted from your inbox once a ticket is created in the support system.' |
                                translate}})</i></small>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 d-flex align-items-center">
                    <input type="number" [maxlength]="2" class="form-control wd-5 w-lg-max-30 my-3"
                        name="email_ticket_limit" [ngModel]="setting?.email_ticket_limit" [min]="1"
                        [value]="setting?.email_ticket_limit">
                    <!-- <label class="form-label mt-2 ms-2">{{'Limit of Email Template' | translate | titlecase}}</label> -->
                        <label class="form-label ps-3 ps-md-max-0">{{'Maximum Emails to Read' |
                            translate | titlecase}}</label>
                        <small class="text-muted ps-2 ps-md-max-0"><i>({{'Use this field to specify the maximum number of emails to process at a time. Setting a value here determines the batch size for creating tickets from incoming emails, ensuring efficient handling of customer inquiries.' |
                                translate}})</i></small>
                </div>

                <div class="card-footer ">
                    <div class="form-group float-end">
                        <button [disabled]="FormData.invalid || sendingResponse['ticketSetting']" type="submit"
                            class="btn btn-secondary">{{'Save Changes' | translate | titlecase}}@if
                            (sendingResponse['ticketSetting']) {
                            <i class="fa fa-spinner fa-spin mx-1"></i>
                            }</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card ">
        <div class="card-header border-0">
            <h4 class="card-title">{{ 'IMAP Settings' | translate  | titlecase }}</h4>
               
            <div class="card-options mt-sm-max-2 d-md-max-block">
                <a href="javascript:;" (click)="createNewImap(createImap)" class="btn btn-secondary mb-md-max-2 me-3 text-capitalize" id="addimapmodal">
                    {{ 'Add new' | translate  | titlecase }}</a>
            </div>
        </div>
        <div class="card-body">
            
            <div class="table-responsive">
                <div class="table-options">
                    <div class="custom-buttons">
                            <button type="button" [disabled]="sendingResponse['imapDelete']" (click)="massDeleteImap('imapDelete')" id="massdeletenotify" class="btn btn-outline-light btn-sm mb-4 "><i
                                    class="fe fe-trash"></i>
                                {{'Delete' | translate}}
                                @if(sendingResponse['imapDelete']){<i class="fa fa-spinner fa-spin mx-1"></i>}</button>
                    </div>
                    <mat-form-field class="pull-right">
                        <input type="text" matInput (keyup)="applyFilter($event)" [placeholder]="'search' | translate" #input>
                    </mat-form-field>
                </div>

                <div>
                    @if(isloader){
                    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                    }
                    <table class="table table-bordered ticketdeleterow border-bottom text-nowrap w-100 dataTable " mat-table [dataSource]="dataSource" matSort>

                        <!-- Sno Column -->
                        <ng-container matColumnDef="sno">
                            <th scope="col" class="wpx-40 text-center" mat-header-cell *matHeaderCellDef mat-sort-header> {{'Sl.No' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row; let i = index" class="wpx-40 text-center"> {{i + 1 + (paginator.pageIndex * paginator.pageSize)}}
                            </td>
                        </ng-container>
                        <!-- Checkbox Column -->
                        <ng-container matColumnDef="select">
                            <th scope="col" class="wpx-40 text-center" mat-header-cell *matHeaderCellDef>
                                <mat-checkbox (change)="$event ? toggleAllRows() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()"
                                    [aria-label]="checkboxLabel()">
                                </mat-checkbox>
                            </th>
                            <td mat-cell class="wpx-40 text-center" *matCellDef="let row">
                                <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"
                                    [aria-label]="checkboxLabel(row)">
                                </mat-checkbox>
                            </td>
                        </ng-container>

                        <!-- Title Column -->
                        <ng-container matColumnDef="email">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="email"> {{'Email' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                               {{ row?.['imap_username']}}
                            </td>

                        </ng-container>

                        <!-- Start Date Column -->
                        <ng-container matColumnDef="host">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="host"> {{'Host' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                    {{row?.['imap_host']}}
                            </td>

                        </ng-container>
                        <!-- End Date Column -->
                        <ng-container matColumnDef="category">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="category"> {{'Category' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                @if(row.category){
                                    {{row?.category?.name}}
                                }
                                @else{
                                    ~
                                }
                            </td>

                        </ng-container>

                        <!-- Status Column -->
                        <ng-container matColumnDef="status">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="status"> {{'Status' | translate}} </th>
                            <td mat-cell *matCellDef="let row ; let i = index">
                                    <label class="custom-switch form-switch mb-0">
                                        <input [disabled]="sendingResponse['imapEditStatus'+i]" type="checkbox" name="groupstatus" (click)="imapStatusChange($event.target, row, 'imapEditStatus'+i)" id="myonoffswitch{{row?.id}}"
                                            [value]="row?.groupstatus" class="custom-switch-input tswitch" [checked]="row?.status == 1 ? true: false">
                                        <span class="custom-switch-indicator"></span>
                                    </label>
                                    @if(sendingResponse['imapEditStatus'+i]){<i class="fa fa-spinner fa-spin mx-1"></i>}
                            </td>
                        </ng-container>

                        <!-- Actions Column -->
                        <ng-container matColumnDef="actions">
                            <th scope="col" mat-header-cell *matHeaderCellDef> {{'Actions' | translate}} </th>
                            <td mat-cell *matCellDef="let row; let i = index">
                                <div>
                                    <button class="action-btns1" id="editimapsettings" (click)="editImapModel(editcontent, row, 'editimap')"
                                        data-id="{{ row?.['id'] }}" data-bs-toggle="tooltip"
                                        data-bs-placement="top" title="{{ 'Edit' | translate | titlecase }}">
                                        <i class="feather feather-edit text-primary"></i>
                                    </button>

                                    <button [disabled]="sendingResponse['imapDelete'+row?.['id']]" class="action-btns1 deleteholiday" (click)="deleteImap(row?.['id'], 'imapDelete'+row?.['id'])"
                                        id="deleteimap" data-id="{{ row?.['id'] }}" data-bs-toggle="tooltip"
                                        data-bs-placement="top" title="{{ 'Delete' | translate | titlecase }}">
                                        <i class="feather feather-trash-2 text-danger"></i>
                                        @if(sendingResponse['imapDelete'+row?.['id']]){
                                        <i class="fa fa-spinner fa-spin mx-1"></i>
                                        }
                                    </button>
                                </div>
                            </td>
                        </ng-container>

                        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

                        <!-- Row shown when there is no matching data. -->
                        <tr class="mat-row" *matNoDataRow>
                            @if(!input.value.length){
                            <td class="mat-cell text-center" colspan="12">
                                {{'No data Found'| translate}}
                            </td>
                        }@else{
                            <td class="mat-cell text-center" colspan="12"> {{'No data matching the filter'| translate}} " {{input.value}} " </td>
                        }
                        </tr>
                    </table>
                    <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]="[10, 25, 50, 100]" (page)="onPaginateTable()" aria-label="Select page of users" [length]="paginator?.length" [pageIndex]="paginator?.pageIndex" [pageSize]="paginator?.pageSize" >
                    </mat-paginator>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- Email Setting -->

<ng-template #nodata>~</ng-template>



<!-- // Imap Setting create model start -->
<ng-template #createImap let-modal>
    <div class="modal-header">
        <h4 class="card-title">{{'Create IMAP Setting' | translate}}</h4>
        <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
        </button>
    </div>
    <div class="modal-body">
        
        @if(!smtpCheck){
        <div class="my-4" id="imapCheck">
            <div class="col-sm-12 ">
                <div class="form-group text-center">
                    <strong>{{ 'This may take a while, please wait...' | translate | titlecase }}<i
                            class="fa fa-spinner fa-spin"></i></strong>
                </div>
            </div>
        </div>
    }
        @if(smtpCheck){
        <div class="modal-body p-0 " id="smtpchecked">
            <div class="single-page customerpage">
                <div class="wrapper wrapper2 box-shadow-0 border-0">


                    <form id="imapform" #addImap="ngForm" (ngSubmit)="addNewImap(addImap, 'addImap')">
                        <div class="card-body border-top-0 pt-4">
                            <input type="hidden" name="imap_id" id="imap_id">
                            <div class="row ">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="form-label">{{ 'Email' | translate | titlecase }} <span
                                                class="text-red">*</span></label>
                                        <input type="text" class="form-control" name="imap_username" ngModel
                                            id="imap_username">
                                        <span class="text-danger" id="imap_username_error"></span>
                                    </div>
                                </div>
                                <div class="col-sm-6 ">
                                    <div class="form-group">
                                        <label class="form-label">{{ 'IMAP Host' | translate | titlecase }} <span
                                                class="text-red">*</span></label>
                                        <input type="text" class="form-control" name="imap_host" id="imap_host" ngModel>
                                        <span class="text-danger" id="imaphostError"></span>
                                    </div>
                                </div>
                                <div class="col-sm-6 ">
                                    <div class="form-group">
                                        <label class="form-label">{{ 'IMAP Port' | translate | titlecase }} <span
                                                class="text-red">*</span></label>
                                        <input type="text" class="form-control" name="imap_port" id="imap_port" ngModel>
                                        <span class="text-danger" id="imapportError"></span>
                                    </div>
                                </div>
                                <div class="col-sm-6 ">
                                    <div class="form-group">
                                        <label class="form-label">{{ 'IMAP Encryption' | translate | titlecase }} <span
                                                class="text-red">*</span></label>
                                        <input type="text" class="form-control" name="imap_encryption"
                                            id="imap_encryption" ngModel>
                                        <span class="text-danger" id="imapencryptionError"></span>
                                    </div>
                                </div>
                                <div class="col-sm-6 ">
                                    <div class="form-group">
                                        <label class="form-label">{{ 'IMAP Protocol' | translate | titlecase }} <span
                                                class="text-red">*</span></label>
                                        <input type="text" class="form-control" name="imap_protocol"
                                            id="imap_protocol" ngModel>
                                        <span class="text-danger" id="imapprotocalError"></span>
                                    </div>
                                </div>
                                <div class="col-sm-6 ">
                                    <div class="form-group">
                                        <label class="form-label">{{ 'IMAP Password' | translate | titlecase }} <span
                                                class="text-red">*</span></label>
                                        <input type="password" class="form-control" name="imap_password"
                                            id="imap_password" ngModel>
                                        <span class="text-danger" id="imappasswordError"></span>
                                    </div>
                                </div>
                                <div class="col-sm-6 ">

                                    <div class="form-group">
                                        <label class="form-label">{{ 'Category' | translate | titlecase }}</label>
                                        <ng-select class="form-control" [items]="category" #select [placeholder]="'Select Category' | translate" [loading]="!category" [virtualScroll]="true" bindLabel="name" [multiple]="false" [searchable]="true" dropdownPosition="auto" bindValue="id" name="category" [ngModel]="">
                                            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                                                <div><span>{{item?.name}}</span></div>
                                            </ng-template>
                                        </ng-select>
                                    </div>
                                </div>
                                <div class="col-sm-6  mt-4">

                                    <div class="form-group">
                                        <div class="switch_section">
                                            <div class="switch-toggle d-flex">
                                                <label class="form-label pe-2">{{ 'Status' | translate | titlecase }}</label>
                                                <a class="onoffswitch2">
                                                    <input type="checkbox" name="status" id="imapstatus"
                                                        class=" toggle-class onoffswitch2-checkbox" ngModel>
                                                    <label for="imapstatus"
                                                        class="toggle-class onoffswitch2-label"></label>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <a href="javascript:void(0);" class="btn btn-outline-primary"
                                data-bs-dismiss="modal" (click)="modal.dismiss('Close click')">{{ 'Close' | translate | titlecase }}</a>
                            <button class="btn btn-primary imapsave" id="imapsave">{{ 'Save' | translate | titlecase }}</button>
                        </div>

                    </form>


                </div>

            </div>
        </div>
    }
    </div>
</ng-template>
<!-- // Imap Setting create model end -->
<!-- // Imap Setting edit model start -->
<ng-template #editcontent let-modal>
    <div class="modal-header">
        <h4 class="card-title">{{'Edit IMAP Setting' | translate}}</h4>
        <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
        </button>
    </div>
    <div class="modal-body">
        <div class="single-page customerpage">
            <div class="wrapper wrapper2 box-shadow-0 border-0">
                <form id="imapform" #editImapM="ngForm" (ngSubmit)="editImap(editImapM, 'editImap')">
                    <div class="card-body border-top-0 pt-4">
                        <div class="row ">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="form-label">{{ 'Email' | translate | titlecase }} <span
                                            class="text-red">*</span></label>
                                    <input type="text" class="form-control" name="imap_username" [ngModel]="imapData?.imap_username"
                                        id="imap_username">
                                    <span class="text-danger" id="imap_username_error"></span>
                                </div>
                            </div>
                            <div class="col-sm-6 ">
                                <div class="form-group">
                                    <label class="form-label">{{ 'IMAP Host' | translate | titlecase }} <span
                                            class="text-red">*</span></label>
                                    <input type="text" class="form-control" name="imap_host" id="imap_host" [ngModel]="imapData?.imap_host">
                                    <span class="text-danger" id="imaphostError"></span>
                                </div>
                            </div>
                            <div class="col-sm-6 ">
                                <div class="form-group">
                                    <label class="form-label">{{ 'IMAP Port' | translate | titlecase }} <span
                                            class="text-red">*</span></label>
                                    <input type="text" class="form-control" name="imap_port" id="imap_port" [ngModel]="imapData?.imap_port">
                                    <span class="text-danger" id="imapportError"></span>
                                </div>
                            </div>
                            <div class="col-sm-6 ">
                                <div class="form-group">
                                    <label class="form-label">{{ 'IMAP Encryption' | translate | titlecase }} <span
                                            class="text-red">*</span></label>
                                    <input type="text" class="form-control" name="imap_encryption"
                                        id="imap_encryption" [ngModel]="imapData?.imap_encryption">
                                    <span class="text-danger" id="imapencryptionError"></span>
                                </div>
                            </div>
                            <div class="col-sm-6 ">
                                <div class="form-group">
                                    <label class="form-label">{{ 'IMAP Protocol' | translate | titlecase }} <span
                                            class="text-red">*</span></label>
                                    <input type="text" class="form-control" name="imap_protocol"
                                        id="imap_protocol" [ngModel]="imapData?.imap_protocol">
                                    <span class="text-danger" id="imapprotocalError"></span>
                                </div>
                            </div>
                            <div class="col-sm-6 ">
                                <div class="form-group">
                                    <label class="form-label">{{ 'IMAP Password' | translate | titlecase }} <span
                                            class="text-red">*</span></label>
                                    <input type="password" class="form-control" name="imap_password"
                                        id="imap_password" [ngModel]="imapData?.imap_password">
                                    <span class="text-danger" id="imappasswordError"></span>
                                </div>
                            </div>
                            <div class="col-sm-6 ">
                                <div class="form-group">
                                    <label class="form-label">{{ 'Category' | translate | titlecase }}</label>
                                    <ng-select class="form-control" [items]="category" #select [placeholder]="'Select Category' | translate" [loading]="!category" [virtualScroll]="true" bindLabel="name" [multiple]="false" [searchable]="true" dropdownPosition="auto" bindValue="id" name="category" [ngModel]="imapData?.category_id">
                                        <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                                            <div><span>{{item?.name}}</span></div>
                                        </ng-template>
                                    </ng-select>
                                </div>
                            </div>
                            <div class="col-sm-6  mt-4">

                                <div class="form-group">
                                    <div class="switch_section">
                                        <div class="switch-toggle d-flex">
                                            <label class="form-label pe-2">{{ 'Status' | translate | titlecase }}</label>
                                            <a class="onoffswitch2">
                                                <input type="checkbox" name="status" id="imapstatus"
                                                    class=" toggle-class onoffswitch2-checkbox" 
                                                    [ngModel]="imapData?.status ? true : false"
                                                    [checked]="imapData?.status ? true : false"
                                                    >
                                                <label for="imapstatus"
                                                    class="toggle-class onoffswitch2-label"></label>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a href="javascript:void(0);" class="btn btn-outline-primary"
                            data-bs-dismiss="modal" (click)="modal.dismiss('Close click')">{{ 'Close' | translate | titlecase }}</a>
                        <button class="btn btn-primary imapsave" id="imapsave">{{ 'Save' | translate | titlecase }}</button>
                    </div>

                </form>


            </div>

        </div>
    </div>
</ng-template>
<!-- // Imap Setting edit model end -->