
<admin-page-header [title]="'Canned Response Create'" ></admin-page-header>

<div class="row">
  <div class="col-xl-9 col-lg-12 col-md-12">
    <div class="card">
      <div class="card-header border-0 justify-content-between">
        <h4 class="card-title">{{'Canned Response Create'| translate}}</h4>
      </div>
      <form #createCanned="ngForm" (ngSubmit)="createCannedResponse(createCanned, 'cannedCreate')">

        <div class="card-body">
          <div class="form-group">
            <label class="form-label">{{'Select Type' | translate}}</label>            
            <ng-select class="form-control" [items]="selectType" #select [placeholder]="'Select Type' | translate" [loading]="!selectType" [virtualScroll]="true" bindLabel="name" bindValue="value" [multiple]="false" [searchable]="true" dropdownPosition="auto" name="responsetype" [(ngModel)]="selectedType" required>
              <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                  <div><span>{{item?.name}}</span></div>
              </ng-template>
            </ng-select>
          </div>
          
          <div class="form-group">
            <label for="" class="form-label">{{'Canned Response Title'| translate}} <span class="text-red">*</span> </label>
            <input type="text" name="title" class="form-control" ngModel #titlefield="ngModel" [class.is-invalid]="titlefield.invalid && titlefield.touched" required>

          </div>
          <div class="form-group">
            <label for="" class="form-label">{{'Canned Response Message'| translate}} <span class="text-red">*</span> </label>
            <angular-editor [config]="toolbar" (keyup)="eventToStoreData($event.target)" #description="ngModel" [(ngModel)]="message" [class.is-invalid]="description.invalid && description.touched" required class="form-control" [placeholder]="'Enter text here' | translate" name="message"></angular-editor>
            @if (description.errors?.['maxLength']) {
              <div class="limit-error">
                {{ description.errors?.['maxLength'].actualLength }}/{{ description.errors?.['maxLength'].maxLength }} {{' exceeded the limit' | translate}}
              </div>
            }
          </div>
          <div class="form-group">
            <div class="switch_section">
              <div class="switch-toggle d-flex mt-4">
                <label class="form-label pe-2">{{'Status'| translate}}:</label>
                <span class="onoffswitch2">
                  <input type="checkbox" name="statuscanned" id="myonoffswitch18"
                    class=" toggle-class onoffswitch2-checkbox" value="1" ngModel>
                  <label for="myonoffswitch18" class="toggle-class onoffswitch2-label"></label>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <div class="form-group float-end">
            <button [disabled]="sendingResponse['cannedCreate'] || createCanned.invalid" type="submit" class="btn btn-secondary">{{'Save' | translate}}@if (sendingResponse['cannedCreate']) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
            }</button>
          </div>
        </div>
      </form>

    </div>

  </div>
  @if(selectedType == "ticket"){
    <div class="col-xl-3 col-lg-12 col-md-12">
      <div class="card">
        <div class="card-header border-0">
          <h4 class="card-title">{{'Canned Response Fields' | translate}}</h4>
        </div>
        <div class="card-body pt-2 px-0 pb-0">
          <div class="table-responsive tr-lastchild">
            <table class="table mb-0 table-information">
              <tbody>
                @for (list of resposeList; track list.name) {
                  <tr>
                    <td>
                      <span class="w-50 text-bold">{{list.name}}</span>
                    </td>
                    <td>:</td>
                    <td>
                      <span class="font-weight-semibold" [innerHTML]="sanitizeHtml(list.description | translate)" ></span>
                    </td>
                  </tr>
                }
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  }
</div>