@if (ticketDataParent && ticketDataParent?.ticket?.status != 'Closed' && ticketDataParent?.ticket?.status != 'Suspend'
&& ticketDataParent.allowreply) {
@if (ticketDataParent?.comments?.data?.length) {
<div ngbAccordion #replyBox="ngbAccordion">
  <div ngbAccordionItem [collapsed]="true">
    <div ngbAccordionHeader>
      <button type="button" ngbAccordionButton class="accordion-button bg-secondary text-white"><i
          class="feather feather-edit-2 me-1"></i>
        {{'Reply Ticket' | translate}}
        @if (ticketDataParent.ticketdraft) {
        <span class="badge badge-warning-light py-1 ms-2 clear-drafts">
          <i class="feather feather-edit-2" placement="top" [ngbTooltip]="'Draft' | translate" aria-label="Ticket Draft"></i>
          {{'Draft' | translate}}
          <button [disabled]="sendingResponse['deleteticketDraft']" href="javascript:void(0)" class="ms-2 btn-remove-styles"
            (click)="draftdelete(ticketDataParent.ticketdraft.id, 'deleteticketDraft')" id="draftdelete"  [ngbTooltip]="'Delete Draft' | translate"
            data-bs-toggle="tooltip" data-placement="top" title="Delete">
            @if (sendingResponse['deleteticketDraft']) {
            <i class="fa fa-spinner fa-spin mx-1"></i>
            }@else {
            <i class="feather feather-trash-2 text-danger fs-16"></i>
            }
          </button>
        </span>
        }
      </button>
    </div>
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>
        <ng-template>
          <div class="card border-0 box-shadow-0 mb-0">
            <form #replyTicket="ngForm" (ngSubmit)="ticketReply(replyTicket, 'ticketReply')">
              <input type="hidden" name="ticket_id" value="{{ ticketDataParent?.ticket?.id }}" ngModel>
              @if (ticketDataParent?.ticketdraft) {
              <input type="hidden" name="draft_id" :value="ticketDataParent.ticketdraft?.id">
              }
              <div class="card-body status">
                <div class="col-md-12 col-sm-12 ps-0 pb-5 pe-0">
                  <div class="d-flex flex-fill flex-wrap align-items-center">
                    <label class="form-label me-2">{{'Canned Response' | translate}}</label>
                    <div class="flex-1 mb-2 mb-lg-0">
                      <ng-select [items]="ticketDataParent?.cannedmessages"
                        [placeholder]="'Select canned response' | translate" [virtualScroll]="true" bindLabel="title"
                        [loading]="!ticketDataParent" [multiple]="false" [searchable]="true" dropdownPosition="auto"
                        bindValue="messages" name="cannedmessage" id="cannedmessagess"
                        class="cannedmessage form-control mw text-break" [ngModel]="null"
                        (change)="cannedResponseFn($event)">
                        <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                          <div><span>{{item?.title}}</span></div>
                        </ng-template>
                      </ng-select>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  @if (replayStatus?.employees?.length) {
                  <angular-editor [config]="toolbar" required class="form-control" [placeholder]="'Comment' | translate"
                    name="comment"></angular-editor>
                  <div class="note-editable" contenteditable="false" role="textbox" aria-multiline="true"
                    spellcheck="true" autocorrect="true"
                    style="background-color: hsla(0, 0%, 50.2%, .11);height: auto;position: absolute;inset: 0;">
                    <div id="WorkingUserDiv">
                      <div class="reply-status d-flex"
                        style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
                        <span class="avatar brround me-0 bg-transparent opacity-50"
                          style="background: url(./assets/images/typing.gif) no-repeat center/cover"></span>
                        <span id="replyStatus" class="my-auto">
                          <div class="d-flex gap-2 mt-sm-0 mt-3 ">
                            <div class="px-1 py-1 d-flex mx-auto my-auto h-100">
                              <span class="avatar brround ms-3"
                                [style.backgroundImage]="'url(' + (replayStatus?.employees?.[0]?.profileimage) + ')'"></span>
                              <p class="font-weight-semibold d-block d-sm-flex my-auto">
                                <span
                                  class="font-weight-semibold text-nowrap mx-1">{{replayStatus?.employees?.[0]?.name}}
                                  ({{replayStatus?.diff_time}})<small class="mx-1">{{'Working on it...'|
                                    translate}}</small> </span>
                              </p>
                            </div>
                          </div>
                        </span>
                      </div>
                    </div>
                  </div>
                  }
                  @else{
                  <angular-editor [appMaxLength]="setting?.maxLengthTextField"
                    [appMinLength]="setting?.minLengthTextField"
                    [LengthTextFieldStatus]="setting?.LengthTextFieldStatus" (keyup)="onChange($event.target)"
                    (focusout)="onBlurReply()" (focusin)="onfocusReply()" #comment="ngModel" [(ngModel)]="reply"
                    [config]="toolbar" required class="form-control" [placeholder]="'Comment' | translate"
                    name="comment"></angular-editor>
                  @if (comment.errors?.['minLength'] && comment.touched) {
                  <div class="limit-error">{{' Minimum Characters are required' | translate}}</div>
                  }
                  @if (comment.errors?.['maxLength']) {
                  <div class="limit-error">
                    {{ comment.errors?.['maxLength'].actualLength }}/{{ comment.errors?.['maxLength'].maxLength }} {{'
                    exceeded the limit' | translate}}
                  </div>
                  }
                  @if ((comment.invalid && comment.touched) || comment.dirty) {
                  <div>
                    @if (comment.errors?.['required']) {
                    <small class="text-danger">{{'Comment is required' | translate}}</small>
                    }
                  </div>
                  }
                  }
                </div>

                @if(setting?.enableGeminiApi == 'on'){
                <div ngbDropdown class="btn-group mb-2">
                  <button type="button" class="btn btn-primary" (click)="generateFn()" id="generate-button">
                    {{ generated.title }} {{ isGenerating ? '...' : '' }}
                  </button>

                  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" ngbDropdownToggle
                    id="dropdown-split-basic">
                    <span class="visually-hidden">Toggle Dropdown</span>
                  </button>

                  <ul ngbDropdownMenu aria-labelledby="dropdown-split-basic" class="dropdown-menu">
                    <li>
                      <a class="dropdown-item" href="javascript:void(0);"
                        (click)="setGenerated({ title: 'Generate Text', value: 'generatetext' })" id="generatetext">
                        {{ 'Generate Text' | translate }}
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="javascript:void(0);"
                        (click)="setGenerated({ title: 'Improve Text', value: 'improvetext' })" id="improvetext">
                        {{ 'Improve Text' | translate }}
                      </a>
                    </li>
                  </ul>
                </div>

                }
                @if(showGeneratedText){
                <div id="generated-text" class="form-control p-3">
                  <i class="fa fa-times close-icon float-end" id="close-btn" style="cursor: pointer;"
                    (click)="closeGeneratedText()"></i>

                  <p id="generated-description">{{ generatedDescription }}</p>

                  <div class="d-flex justify-content-end">
                    <button type="button" class="btn btn-info" id="regenerate-btn" (click)="regenerateFn()">
                      {{ 'Regenerate' | translate }}
                    </button>
                    <button type="button" class="btn btn-success ms-2" id="use-btn" (click)="useFn()">
                      {{ 'Use' | translate }}
                    </button>
                  </div>
                </div>
                }
                <div class="form-group">
                  <label class="form-label">{{'Upload File' | translate}}</label>
                  <app-image-upload [disabled]="replayStatus?.employees?.length ? true : false"
                    [directTypes]="setting?.USER_FILE_UPLOAD_TYPES" [setting]="setting"
                    (onImageUploaded)="onImageUploaded($event)"
                    [media]="ticketDataParent?.imageArray"></app-image-upload>
                  <small class="text-muted"><i>
                      {{'The file size should not be more than' | translate}}
                      {{ticketDataParent?.setting?.original?.FILE_UPLOAD_MAX}}
                      {{'MB' | translate}}
                    </i></small>
                </div>
                <div class="form-group">
                  <div class="custom-controls-stacked d-md-flex" id="text">
                    <label class="form-label mt-1 me-5">{{'Status' | translate}}</label>
                    <label class="custom-control form-radio success me-4">
                      <input #status="ngModel" [class.is-invalid]="status.invalid && status.touched" required
                        type="radio" class="custom-control-input hold sprukostatuschange"
                        [disabled]="replayStatus?.employees?.length ? true : false" name="status" value="Inprogress"
                        [ngModel]="currentStatus" (change)="ratingStatus('Inprogress')">
                      <span class="custom-control-label">{{'Inprogress' |
                        translate}}</span>
                    </label>
                    <label class="custom-control form-radio success me-4">
                      <input #status="ngModel" [class.is-invalid]="status.invalid && status.touched" required
                        type="radio" class="custom-control-input hold sprukostatuschange"
                        [disabled]="replayStatus?.employees?.length ? true : false" name="status" value="Solved"
                        [ngModel]="currentStatus" (change)="ratingStatus('Solved')">
                      <span class="custom-control-label">{{'Solved' | translate}}</span>
                    </label>
                    <label class="custom-control form-radio success me-4">
                      <input #status="ngModel" [class.is-invalid]="status.invalid && status.touched" required
                        type="radio" class="custom-control-input sprukostatuschange"
                        [disabled]="replayStatus?.employees?.length ? true : false" name="status" id="onhold"
                        value="On-Hold" [ngModel]="currentStatus" (change)="ratingStatus('On-Hold')">
                      <span class="custom-control-label">{{'On-Hold' | translate}}</span>
                    </label>
                    @if ((status.invalid && status.touched) || status.dirty) {
                    <div>
                      @if (status.errors?.['required']) {
                      <small class="text-danger">{{'Status is required' | translate}}</small>
                      }
                    </div>
                    }
                  </div>
                  @if(holdremove){
                  <div class="pt-4" id="holdremove"><textarea
                      ngModel="Thank you for reaching out! Your ticket has been placed on hold momentarily as we gather additional information to provide you with the best possible assistance. We appreciate your patience and will prioritize resolving your issue as soon as possible."
                      #onhold="ngModel" [class.is-invalid]="onhold.invalid && onhold.touched" required type="text"
                      name="note" class="form-control " rows="3"
                      [placeholder]="'Leave a message for On-Hold' | translate"></textarea></div>
                  @if((onhold.invalid && onhold.touched) || onhold.dirty){
                  <div>
                    @if(onhold.errors?.required){
                    <small class="text-danger">{{'On Hold is required' | translate}}</small>
                    }
                  </div>
                  }
                  }
                  @if (ticketDataParent.setting?.original?.ticketrating == 'off') {
                  @if (ratingonoff) {
                  <div class="switch_section" id="ratingonoff">
                    <div class="d-flex d-md-max-block mt-4 ms-0">
                      <span class="onoffswitch2">
                        <input type="checkbox" name="rating_on_off" id="rating_on_off"
                          class=" toggle-class onoffswitch2-checkbox sprukoregister" value="yes" [checked]="true"
                          [ngModel]="'yes'">
                        <label for="rating_on_off" class="toggle-class onoffswitch2-label"></label>
                      </span>
                      <label for="rating_on_off" class="form-label ps-3 ps-md-max-0">{{'Rating page to customer' |
                        translate}}</label>
                      <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you Disable this switch, you stop rating page
                          to the customer' |
                          translate}})</i></small>
                    </div>
                  </div>
                  }
                  }
                  @if (ticketDataParent?.setting?.original?.USER_REOPEN_ISSUE == "yes" && ticketDataParent?.tickettype != 'emalitoticket') {
                  @if (reopenTkt) {
                  <div class="switch_section" id="reopenonoff">
                    <div class="d-flex d-md-max-block mt-4 ms-0">
                      <a class="onoffswitch2">
                        <input type="checkbox" name="reopen_on_off" id="reopen_on_off"
                          class=" toggle-class onoffswitch2-checkbox sprukoregister" value="yes" [checked]="true"
                          [ngModel]="'yes'">
                        <label for="reopen_on_off" class="toggle-class onoffswitch2-label"></label>
                      </a>
                      <label class="form-label ps-3 ps-md-max-0">{{'Ticket Re-open' | translate}}</label>
                      <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you disable this switch, you can stop the
                          reopen option to the customer for this ticket.' | translate}})</i></small>
                    </div>
                  </div>
                  }
                  }
                </div>
              </div>
              <div class="card-footer">
                <div class="form-group float-end">
                  <button type="button" class="btn btn-gray ms-auto me-2"
                    [disabled]="replayStatus?.employees?.length ? true : false || replyTicket.invalid || sendingResponse['ticketDraft']"
                    (click)="saveToDraft(replyTicket, 'ticketDraft')" id="draftsave">{{'Save As Draft' | translate}}@if
                    (sendingResponse['ticketDraft']) {
                    <i class="fa fa-spinner fa-spin mx-1"></i>
                    }</button>
                  <button
                    [disabled]="replayStatus?.employees?.length ? true : false || replyTicket.invalid || sendingResponse['ticketReply']"
                    type="submit" aria-label="Reply" class="btn btn-secondary" id="btnsprukodisable"> {{'Reply Ticket' |
                    translate}}@if (sendingResponse['ticketReply']) {
                    <i class="fa fa-spinner fa-spin mx-1"></i>
                    }
                  </button>
                </div>
              </div>
            </form>
          </div>
        </ng-template>
      </div>
    </div>
  </div>

</div>
} @else {
<div class="card">
  <div class="card-header border-0">
    <h4 class="card-title">{{'Reply Ticket' | translate}}
      @if (ticketDataParent.ticketdraft) {
      <span class="badge badge-warning-light py-1 ms-2 clear-drafts">
        <i class="feather feather-edit-2" placement="top" [ngbTooltip]="'Draft' | translate" aria-label="Ticket Draft"></i>
        {{'Draft' | translate}}
        <button [disabled]="sendingResponse['deleteticketDraft']" href="javascript:void(0)" class="ms-2 btn-remove-styles"
          (click)="draftdelete(ticketDataParent.ticketdraft.id, 'deleteticketDraft')" id="draftdelete" [ngbTooltip]="'Delete Draft' | translate"
          data-bs-toggle="tooltip" data-placement="top" title="Delete">
          @if (sendingResponse['deleteticketDraft']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
          }@else {
          <i class="feather feather-trash-2 text-danger fs-16"></i>
          }
        </button>
      </span>
      }
    </h4>
  </div>
  <form #replyTicket="ngForm" (ngSubmit)="ticketReply(replyTicket, 'ticketReply')">
    <input type="hidden" name="ticket_id" value="{{ ticketDataParent?.ticket?.id }}">
    @if (ticketDataParent?.ticketdraft) {
    <input type="hidden" name="draft_id" :value="ticketDataParent.ticketdraft?.id">
    }
    <div class="card-body status">
      @if (ticketDataParent?.cannedmessages?.length) {
      <div class="col-12 ps-0 ps-lg-1 pb-5">
        <div class="d-flex flex-wrap align-items-center">
          @if (ticketDataParent?.cannedmessages?.length) {
          <label class="form-label me-2">{{'Canned Response' | translate}}</label>
          <div class="flex-1 mb-2 mb-lg-0 me-2">
            <ng-select [items]="ticketDataParent?.cannedmessages"
              [disabled]="replayStatus?.employees?.length ? true : false"
              [placeholder]="'Select canned response' | translate" [virtualScroll]="true" bindLabel="title"
              [loading]="!ticketDataParent" [multiple]="false" [searchable]="true" dropdownPosition="auto"
              bindValue="messages" name="cannedmessage" id="cannedmessagess"
              class="cannedmessage form-control mw text-break canned-responsive canned-responsive" [ngModel]="null"
              (change)="cannedResponseFn($event)">
              <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                <div><span>{{item?.title}}</span></div>
              </ng-template>
            </ng-select>
          </div>
          }
        </div>
      </div>
      }
      <div class="form-group position-relative">
        @if (replayStatus?.employees?.length) {
        <angular-editor [config]="toolbar" required class="form-control" [placeholder]="'Comment' | translate"
          name="comment"></angular-editor>
        <div class="note-editable" contenteditable="false" role="textbox" aria-multiline="true" spellcheck="true"
          autocorrect="true"
          style="background-color: hsla(0, 0%, 50.2%, .11);height: auto;position: absolute;inset: 0;">
          <div id="WorkingUserDiv">
            <div class="reply-status d-flex"
              style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
              <span class="avatar brround me-0 bg-transparent opacity-50"
                style="background: url(./assets/images/typing.gif) no-repeat center/cover"></span>
              <span id="replyStatus" class="my-auto">
                <div class="d-flex gap-2 mt-sm-0 mt-3 ">
                  <div class="px-1 py-1 d-flex mx-auto my-auto h-100">
                    <span class="avatar brround ms-3"
                      [style.backgroundImage]="'url(' + (replayStatus?.employees?.[0]?.profileimage) + ')'"></span>
                    <p class="font-weight-semibold d-block d-sm-flex my-auto">
                      <span class="font-weight-semibold text-nowrap mx-1">{{replayStatus?.employees?.[0]?.name}}
                        ({{replayStatus?.diff_time}})<small class="mx-1">{{'Working on it...'| translate}}</small>
                      </span>
                    </p>
                  </div>
                </div>
              </span>
            </div>
          </div>
        </div>
        }
        @else{
        <angular-editor [appMaxLength]="setting?.maxLengthTextField" [appMinLength]="setting?.minLengthTextField"
          [LengthTextFieldStatus]="setting?.LengthTextFieldStatus" (keyup)="onChange($event.target)"
          (focusout)="onBlurReply()" (focusin)="onfocusReply()" #comment="ngModel" [(ngModel)]="reply"
          [config]="toolbar" required class="form-control" [placeholder]="'Comment' | translate"
          name="comment"></angular-editor>
        @if (comment.errors?.['minLength'] && comment.touched) {
        <div class="limit-error">{{' Minimum Characters are required' | translate}}</div>
        }
        @if (comment.errors?.['maxLength']) {
        <div class="limit-error">
          {{ comment.errors?.['maxLength'].actualLength }}/{{ comment.errors?.['maxLength'].maxLength }} {{' exceeded
          the limit' | translate}}
        </div>
        }
        @if ((comment.invalid && comment.touched) || comment.dirty) {
        <div>
          @if (comment.errors?.['required']) {
          <small class="text-danger">{{'Comment is required' | translate}}</small>
          }
        </div>
        }
        }
      </div>
      @if(setting?.enableGeminiApi == 'on'){
      <div ngbDropdown class="btn-group">
        <button type="button" class="btn btn-primary" (click)="generateFn()" id="generate-button">
          {{ generated.title }} {{ isGenerating ? '...' : '' }}
        </button>

        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" ngbDropdownToggle
          id="dropdown-split-basic">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>

        <ul ngbDropdownMenu aria-labelledby="dropdown-split-basic" class="dropdown-menu">
          <li>
            <a class="dropdown-item" href="javascript:void(0);"
              (click)="setGenerated({ title: 'Generate Text', value: 'generatetext' })" id="generatetext">
              {{ 'Generate Text' | translate }}
            </a>
          </li>
          <li>
            <a class="dropdown-item" href="javascript:void(0);"
              (click)="setGenerated({ title: 'Improve Text', value: 'improvetext' })" id="improvetext">
              {{ 'Improve Text' | translate }}
            </a>
          </li>
        </ul>
      </div>

      }
      @if(showGeneratedText){
      <div id="generated-text" class="form-control p-3">
        <i class="fa fa-times close-icon float-end" id="close-btn" style="cursor: pointer;"
          (click)="closeGeneratedText()"></i>

        <p id="generated-description">{{ generatedDescription }}</p>

        <div class="d-flex justify-content-end">
          <button type="button" class="btn btn-info" id="regenerate-btn" (click)="regenerateFn()">
            {{ 'Regenerate' | translate }}
          </button>
          <button type="button" class="btn btn-success ms-2" id="use-btn" (click)="useFn()">
            {{ 'Use' | translate }}
          </button>
        </div>
      </div>
      }
      <div class="form-group">
        <label class="form-label">{{'Upload File'| translate}}</label>
        <app-image-upload [disabled]="replayStatus?.employees?.length ? true : false"
          [directTypes]="setting?.USER_FILE_UPLOAD_TYPES" [setting]="setting"
          (onImageUploaded)="onImageUploaded($event)" [media]="ticketDataParent?.imageArray"></app-image-upload>
        <small class="text-muted"><i>{{'The file size should not be more than'| translate}}
            {{ticketDataParent?.setting?.original?.FILE_UPLOAD_MAX}}{{'MB'| translate}}</i></small>
      </div>
      <div class="form-group">
        <div class="custom-controls-stacked d-md-flex">
          <label class="form-label mt-1 me-5">{{'Status' | translate}}</label>
          <label class="custom-control form-radio success me-4">
            <input #status="ngModel" [class.is-invalid]="status.invalid && status.touched" required type="radio"
              class="custom-control-input hold sprukostatuschange" name="status"
              [disabled]="replayStatus?.employees?.length ? true : false" value="Inprogress" [ngModel]="currentStatus"
              (change)="ratingStatus('Inprogress')" (load)="ratingStatus('Inprogress')">
            <span class="custom-control-label">{{'Inprogress' | translate}}</span>
          </label>
          <label class="custom-control form-radio success me-4">
            <input #status="ngModel" [class.is-invalid]="status.invalid && status.touched" required type="radio"
              class="custom-control-input hold sprukostatuschange" name="status"
              [disabled]="replayStatus?.employees?.length ? true : false" [ngModel]="currentStatus" value="Solved"
              (change)="ratingStatus('Solved')">
            <span class="custom-control-label">{{'Solved' | translate}}</span>
          </label>
          <label class="custom-control form-radio success me-4">
            <input #status="ngModel" [class.is-invalid]="status.invalid && status.touched" required type="radio"
              class="custom-control-input sprukostatuschange" name="status"
              [disabled]="replayStatus?.employees?.length ? true : false" [ngModel]="currentStatus" value="On-Hold"
              (change)="ratingStatus('On-Hold')">
            <span class="custom-control-label">{{'On-Hold' | translate}}</span>
          </label>
          @if ((status.invalid && status.touched) || status.dirty) {
          <div>
            @if (status.errors?.['required']) {
            <small class="text-danger">{{'Status is required' | translate}}</small>
            }
          </div>
          }
        </div>
        @if(holdremove){
        <div class="pt-4" id="holdremove"><textarea
            ngModel="Thank you for reaching out! Your ticket has been placed on hold momentarily as we gather additional information to provide you with the best possible assistance. We appreciate your patience and will prioritize resolving your issue as soon as possible."
            #onhold="ngModel" [class.is-invalid]="onhold.invalid && onhold.touched" required type="text" name="note"
            class="form-control " rows="3" [placeholder]="'Leave a message for On-Hold' | translate"></textarea></div>

        @if((onhold.invalid && onhold.touched) || onhold.dirty){
        <div>
          @if(onhold.errors?.required){
          <small class="text-danger">{{'On Hold is required' | translate}}</small>
          }
        </div>
        }
        }
        @if (ticketDataParent?.setting?.original?.ticketrating == "off") {
        @if (ratingonoff) {
        <div class="switch_section">
          <div class="d-flex d-md-max-block mt-4 ms-0">
            <span class="onoffswitch2">
              <input type="checkbox" name="rating_on_off" id="rating_on_off"
                class=" toggle-class onoffswitch2-checkbox sprukoregister" value="yes" [checked]="true"
                [ngModel]="'yes'">
              <label for="rating_on_off" class="toggle-class onoffswitch2-label"></label>
            </span>
            <label for="rating_on_off" class="form-label ps-3 ps-md-max-0">{{'Rating page to customer' |
              translate}}</label>
            <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you disable this switch, you can stop rating page to
                the customer' | translate}})</i></small>
          </div>
        </div>
        }
        }
        @if (ticketDataParent?.setting?.original?.USER_REOPEN_ISSUE == "yes" && ticketDataParent?.tickettype != 'emalitoticket') {
        @if (reopenTkt) {
        <div class="switch_section" id="reopenonoff">
          <div class="d-flex d-md-max-block mt-4 ms-0">
            <a class="onoffswitch2">
              <input type="checkbox" name="reopen_on_off" id="reopen_on_off"
                class=" toggle-class onoffswitch2-checkbox sprukoregister" value="yes" [checked]="true"
                [ngModel]="'yes'">
              <label for="reopen_on_off" class="toggle-class onoffswitch2-label"></label>
            </a>
            <label class="form-label ps-3 ps-md-max-0">{{'Ticket Re-open' | translate}}</label>
            <small class="text-muted ps-2 ps-md-max-0"><i>({{'If you disable this switch, you can stop the reopen option
                to the customer for this ticket.' | translate}})</i></small>
          </div>
        </div>
        }
        }
      </div>
    </div>
    <div class="card-footer">
      <div class="form-group float-end">
        <button type="button" class="btn btn-gray ms-auto me-2"
          [disabled]="replayStatus?.employees?.length ? true : false || sendingResponse['ticketDraft']"
          (click)="saveToDraft(replyTicket, 'ticketDraft')" id="draftsave">{{'Save As Draft' | translate}}@if
          (sendingResponse['ticketDraft']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
        <button
          [disabled]="replayStatus?.employees?.length ? true : false || replyTicket.invalid || sendingResponse['ticketReply']"
          type="submit" class="btn btn-secondary">{{'Reply Ticket' | translate}}@if (sendingResponse['ticketReply']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
          }
        </button>
      </div>
    </div>
  </form>
</div>
}
}