<div class="card">
  <div class="card-header  border-0">
    <div class="card-title">{{'Ticket Information' | translate}}</div>
  </div>
  <div class="card-body pt-2 ps-0 pe-0 pb-0">
    <div class="table-responsive tr-lastchild">
      <table class="table mb-0 table-information">
        <tbody>

          <tr>
            <td>
              <span class="w-50">{{'Ticket ID' | translate}}</span>
            </td>
            <td>:</td>
            <td>
              <span class="font-weight-semibold">#{{ ticketDataParent?.ticket?.ticket_id }}
                @if (!ticketDataParent) {
                <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
                }
              </span>
            </td>
          </tr>
          @if(ticketDataParent?.ticket?.ccemails?.length){
            <tr>
                <td>
                    <span className="w-50">{{'CC Mail' | translate }}</span>
                </td>
                <td>:</td>
                <td>
                    <span className="font-weight-semibold">{{ ticketDataParent?.ticket?.ccemails?.[0]?.ccemails }}</span>
                </td>
            </tr>
          }
          <tr>
            <td>
              <span class="w-50">{{'Category' | translate}}</span>
            </td>
            <td>:</td>
            <td>
              @if (ticketDataParent?.ticket?.category_id && ticketDataParent?.ticket?.category) {
              <span class="font-weight-semibold">{{ ticketDataParent?.ticket?.category.name}}</span>
              @if (ticketDataParent?.ticket?.status != 'Closed' && ticketDataParent?.ticket?.status != 'Suspend') {
              <a aria-label="category" (click)="categoryModel(catModel)" href="javascript:void(0)"
                class="p-1 sprukocategory border border-primary br-7 text-white bg-primary ms-2 d-inline-block lh-1">
                <i class="feather feather-edit-2" [ngbTooltip]="'Change Category' | translate"></i></a>
              }
              } @else {
              @if (ticketDataParent?.ticket?.status != 'Closed' && ticketDataParent?.ticket?.status != 'Suspend') {
              <a aria-label="Category" (click)="categoryModel(catModel)" href="javascript:void(0)"
                class="p-2 sprukocategory border border-primary br-7 text-white bg-primary ms-2 d-inline-block lh-1">
                <i class="feather feather-plus-square" [ngbTooltip]="'Add Category' | translate"></i></a>
              }
              }
              @if (!ticketDataParent) {
              <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </td>
          </tr>
          @if (ticketDataParent?.ticket?.subcategory != null) {
          <tr>
            <td>
              <span class="w-50">{{'SubCategory' | translate}}</span>
            </td>
            <td>:</td>
            <td>
              <span class="font-weight-semibold">{{ticketDataParent?.ticket?.subcategoriess?.subcategoryname}}</span>
              @if (!ticketDataParent) {
              <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </td>
          </tr>
          }

          @if (ticketDataParent?.ticket?.item_name != null) {
          <tr>
            <td>
              <span class="w-50">{{'Item name' | translate}}</span>
            </td>
            <td>:</td>
            <td>
              <span class="font-weight-semibold">{{ ticketDataParent?.ticket?.item_name }}</span>
              @if (!ticketDataParent) {
              <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </td>
          </tr>
          }
          @if (ticketDataParent?.ticket?.project?.length) {
          <tr>
            <td>
              <span class="w-50">{{'Project' | translate}}</span>
            </td>
            <td>:</td>
            <td>
              <span class="font-weight-semibold">{{ ticketDataParent?.ticket?.project }}</span>
              @if (!ticketDataParent) {
              <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </td>
          </tr>
          }
          @if (ticketDataParent?.ticket?.priority != null) {
          <tr>
            <td>
              <span class="w-50">{{'Priority' | translate}}</span>
            </td>
            <td>:</td>
            <td id="priorityid">
              @if (ticketDataParent?.ticket?.priority == 'Low') {
              <span class="badge badge-success-light">{{ ticketDataParent?.ticket?.priority | translate}}</span>
              @if (ticketDataParent?.ticket?.status != 'Closed' && ticketDataParent?.ticket?.status != 'Suspend') {
              <a aria-label="Add priority" (click)="priorityModel(priority)" href="javascript:void(0)" id="priority"
                class="p-1 border border-primary br-7 text-white bg-primary ms-2">
                <i class="feather feather-edit-2" [ngbTooltip]="'Change priority' | translate"></i>
              </a>
              }
              } @else {
              @if (ticketDataParent?.ticket?.priority == 'High') {
              <span class="badge badge-danger-light">{{
                ticketDataParent?.ticket?.priority | translate}}</span>
              @if (ticketDataParent?.ticket?.status != 'Closed' && ticketDataParent?.ticket?.status != 'Suspend') {
              <a aria-label="Add priority" (click)="priorityModel(priority)" href="javascript:void(0)"
                class="p-1 border border-primary br-7 text-white bg-primary ms-2">
                <i class="feather feather-edit-2" [ngbTooltip]="'Change priority' | translate"></i>
              </a>
              }
              } @else {
              @if (ticketDataParent?.ticket?.priority == 'Critical') {
              <span class="badge badge-danger-dark">{{
                ticketDataParent?.ticket?.priority | translate}}</span>
              @if (ticketDataParent?.ticket?.status != 'Closed' && ticketDataParent?.ticket?.status != 'Suspend') {
              <a aria-label="Add priority" (click)="priorityModel(priority)" href="javascript:void(0)"
                class="p-1 border border-primary br-7 text-white bg-primary ms-2">
                <i class="feather feather-edit-2" [ngbTooltip]="'Change priority' | translate"></i>
              </a>
              }
              } @else {
              <span class="badge badge-warning-light">{{ ticketDataParent?.ticket?.priority | translate}}</span>
              @if (ticketDataParent?.ticket?.status != 'Closed' && ticketDataParent?.ticket?.status != 'Suspend') {
              <a aria-label="Add priority" (click)="priorityModel(priority)" href="javascript:void(0)"
                class="p-1 border border-primary br-7 text-white bg-primary ms-2">
                <i class="feather feather-edit-2" [ngbTooltip]="'Change priority' | translate"></i>
              </a>
              }
              }
              }
              }
              @if (!ticketDataParent) {
              <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </td>
          </tr>
          } @else {
          <tr>
            <td>
              <span class="w-50">{{'Priority' | translate}}</span>
            </td>
            <td>:</td>
            <td>
              @if (ticketDataParent?.ticket?.status != 'Closed' && ticketDataParent?.ticket?.status != 'Suspend') {
              <a aria-label="Add priority" (click)="priorityModel(priority)" href="javascript:void(0)"
                class="p-1 border border-primary br-7 text-white bg-primary">
                <i class="feather feather-plus" [ngbTooltip]="'Change priority' | translate"></i>
              </a>
              }
              @if (!ticketDataParent) {
              <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </td>
          </tr>
          }

          <tr>
            <td>
              <span class="w-50">{{'Open Date' | translate}}</span>
            </td>
            <td>:</td>
            <td>
              <span class="font-weight-semibold">{{ ticketDataParent?.ticket?.created_at | custtimezone :
                ticketDataParent?.setting?.original?.date_format : undefined : user?.timezone ?? 'UTC'}}</span>
              @if (!ticketDataParent) {
              <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </td>
          </tr>
          <tr>
            <td>
              <span class="w-50">{{'Status' | translate}}</span>
            </td>
            <td>:</td>
            <td>
              @if (ticketDataParent?.ticket?.status == 'New') {
              <span class="badge badge-burnt-orange">{{ ticketDataParent?.ticket?.status | translate}}</span>
              } @else {
              @if (ticketDataParent?.ticket?.status == 'Re-Open') {
              <span class="badge badge-teal">{{ ticketDataParent?.ticket?.status | translate}}</span>
              } @else {
              @if (ticketDataParent?.ticket?.status == 'Inprogress') {
              <span class="badge badge-info">{{ ticketDataParent?.ticket?.status | translate}}</span>
              } @else {
              @if (ticketDataParent?.ticket?.status == 'On-Hold') {
              <span class="badge badge-warning">{{ ticketDataParent?.ticket?.status | translate}}</span>
              } @else {
              <span class="badge badge-danger">{{ ticketDataParent?.ticket?.status | translate}}</span>
              }
              }
              }
              }
              @if (!ticketDataParent) {
              <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }

            </td>
          </tr>
          @if (ticketDataParent?.ticket?.replystatus != null && ticketDataParent?.ticket?.replystatus == 'Solved' ||
          ticketDataParent?.ticket?.replystatus == 'Unanswered' || ticketDataParent?.ticket?.replystatus == 'Waiting for
          response') {
          <tr>
            <td>
              <span class="w-50">{{'Reply Status' | translate}}</span>
            </td>
            <td>:</td>
            <td>
              @if (ticketDataParent?.ticket?.replystatus == 'Solved') {
              <span class="badge badge-success">{{ ticketDataParent?.ticket?.replystatus | translate}}</span>
              } @else {
              @if (ticketDataParent?.ticket?.replystatus == 'Unanswered') {
              <span class="badge badge-danger-light">{{ ticketDataParent?.ticket?.replystatus | translate}}</span>
              } @else {
              @if (ticketDataParent?.ticket?.replystatus == 'Waiting for response') {
              <span class="badge badge-warning">{{ ticketDataParent?.ticket?.replystatus | translate}}</span>
              }
              }
              }
              @if (!ticketDataParent) {
              <span class="line-skeleton w-100 d-block mx-auto mb-2"></span>
              }
            </td>
          </tr>
          }

          @if (ticketDataParent?.ticket?.tickettype != 'emalitoticket' && ticketDataParent?.ticket?.status != 'Closed') {
          <tr>
            <td>
              <span class="w-50">{{'File Permission' | translate | titlecase}}</span>
            </td>
            <td>:</td>
            <td>
              <label class="custom-switch form-switch mb-0">
                <input #uploadpermission type="checkbox"
                (change)="ticketFileUploadPermission($event, filePermission)" 
                  name="ticketfileuploadpermission" id="ticketfileuploadpermission" value="1"
                  class="custom-switch-input tswitch" [checked]="(
                    (ticketDataParent?.setting?.original?.USER_FILE_UPLOAD_ENABLE == 'yes' && ticketDataParent?.ticket?.cust?.userType == 'Customer' && ticketDataParent?.ticket?.fileupload_allowed != 'denied') 
                    ||
                    (ticketDataParent?.setting?.original?.GUEST_FILE_UPLOAD_ENABLE == 'yes' && ticketDataParent?.ticket?.cust?.userType == 'Guest' && ticketDataParent?.ticket?.fileupload_allowed != 'denied')) 
                    || ticketDataParent?.ticket?.fileupload_allowed == 'once' 
                    || ticketDataParent?.ticket?.fileupload_allowed == 'always'" />
                <span class="custom-switch-indicator"></span>
              </label>
            </td>
          </tr>
          }
          @if (ticketDataParent?.ticket?.ticketviolation == 'on') {
          <tr>
            <td>
              <span class="w-50">{{'Ticket Violation' | translate | titlecase}}</span>
            </td>
            <td>:</td>
            <td>
              <button class="border-0 bg-transparent">
                <i class="fa fa-exclamation-triangle text-danger"></i>
              </button>
            </td>
          </tr>
          }
          @if (ticketDataParent?.ticket?.ticket_customfield?.length) {
          @for (customfield of ticketDataParent?.ticket?.ticket_customfield; track customfield) {
          @if (customfield.fieldtypes != 'textarea' && customfield.values?.length) {
          <tr>
            <td>{{customfield.fieldnames}}</td>
            <td>: </td>
            <td>
              @if (customfield.privacymode == '1') {
              {{customfield.value }}
              } @else {
              {{customfield.values}}
              }
            </td>
          </tr>
          }
          }
          }
        </tbody>
      </table>
    </div>
  </div>
  <div class="card-footer ticket-buttons">
    @if (ticketDataParent?.ticket?.status =='Closed') {
    <button type="button" [disabled]="sendingResponse['reopen']" class="btn btn-secondary my-1 me-1"
      (click)="reopen(ticketDataParent?.ticket?.id, 'reopen')" id="reopen"> <i class="feather feather-rotate-ccw"></i>
      {{'Re-Open' |
      translate}}@if (sendingResponse['reopen']) {
      <i class="fa fa-spinner fa-spin mx-1"></i>
      }</button>
    }
    @if (permissions?.includes('Ticket Assign')) {
    @if (ticketDataParent?.ticket?.status == 'Suspend' || ticketDataParent?.ticket?.status == 'Closed') {
    @if (!ticketDataParent?.ticket?.ticketassignmutliples?.length && ticketDataParent?.ticket?.selfassignuser_id ==
    null) {
    <div class="btn-group" ngbDropdown>
      <button type="button" class="btn btn-outline-primary dropdown-toggle btn-sm" disabled>{{'Assign' |
        translate}} <span class="caret"></span></button>
    </div>
    } @else {
    <div class="btn-group" ngbDropdown>
      @if (ticketDataParent?.ticket?.ticketassignmutliples?.length && ticketDataParent?.ticket?.selfassignuser_id ==
      null) {
      @if (ticketDataParent?.ticket?.ticketassignmutliples.length > 1) {
      <button disabled type="button" aria-label="button" class="btn btn-outline-primary dropdown-toggle btn-sm">{{'Multi
        Assign'}} <span class="caret"></span></button>
      } @else {
      <button type="button" disabled aria-label="button" class="btn btn-outline-primary dropdown-toggle btn-sm">{{
        ticketDataParent?.ticket?.ticketassignmutliples?.[0]?.toassignuser?.name}} <span class="caret"></span></button>
      }
      } @else {
      @if (!ticketDataParent?.ticket?.ticketassignmutliples?.length && ticketDataParent?.ticket?.selfassignuser_id !=
      null) {
      <button disabled type="button"
        class="btn btn-outline-primary dropdown-toggle btn-sm">{{ticketDataParent?.ticket?.selfassign?.name}} ({{'self'
        | translate}}) <span class="caret"></span></button>
      } @else {
      <button type="button" class="btn btn-outline-primary dropdown-toggle btn-sm">{{'Assign'}} <span
          class="caret"></span></button>
      }
      }
    </div>
    }
    } @else {
    @if (!ticketDataParent?.ticket?.ticketassignmutliples?.length && ticketDataParent?.ticket?.selfassignuser_id ==
    null) {
    <div class="btn-group" ngbDropdown>
      <button type="button" class="btn btn-outline-primary dropdown-toggle btn-sm" ngbDropdownToggle>{{'Assign' |
        translate}} <span class="caret"></span></button>
      <ul ngbDropdownMenu role="menu">
        <li class="dropdown-plus-title">{{'Assign' | translate}} <b aria-hidden="true" class="fa fa-angle-up"></b></li>
        <li>
          <button class="btn" type="button" [disabled]="sendingResponse['self']"
            (click)="SelfAssign(ticketDataParent?.ticket, 'self')">{{'Self Assign' | translate}}@if
            (sendingResponse['self']) {
            <i class="fa fa-spinner fa-spin"></i>
            }</button>
        </li>
        <li>
          <button class="btn" type="button" (click)="AssignTicket(assignTicketModel, ticketDataParent?.ticket)">
            {{'Other Assign' | translate}}
          </button>
        </li>
      </ul>
    </div>
    } @else {
    <div class="btn-group" ngbDropdown>
      @if (ticketDataParent?.ticket?.ticketassignmutliples?.length && ticketDataParent?.ticket?.selfassignuser_id ==
      null) {
      @if (ticketDataParent?.ticket?.ticketassignmutliples.length > 1) {
      <button type="button" aria-label="button" class="btn btn-outline-primary dropdown-toggle btn-sm"
        ngbDropdownToggle>{{'Multi Assign'}} <span class="caret"></span></button>
      <a href="javascript:void(0)" class="btn btn-outline-primary btn-sm"
        (click)="unAssignSelf(ticketDataParent?.ticket?.enc_id, 'multiAss')" [ngbTooltip]="'Unassign' | translate"
        aria-label="Unassign"><i class="fe fe-x"></i>@if (sendingResponse['multiAss']) {
        <i class="fa fa-spinner fa-spin mx-1"></i>
        }</a>
      } @else {
      <button type="button" aria-label="button" class="btn btn-outline-primary dropdown-toggle btn-sm"
        ngbDropdownToggle>{{ ticketDataParent?.ticket?.ticketassignmutliples?.[0]?.toassignuser?.name}} <span
          class="caret"></span></button>
      <a href="javascript:void(0)" class="btn btn-outline-primary btn-sm"
        (click)="unAssignSelf(ticketDataParent?.ticket?.enc_id, 'multiAss')" [ngbTooltip]="'Unassign' | translate"
        aria-label="Unassign"><i class="fe fe-x"></i>@if (sendingResponse['multiAss']) {
        <i class="fa fa-spinner fa-spin mx-1"></i>
        }</a>
      }
      } @else {
      @if (!ticketDataParent?.ticket?.ticketassignmutliples?.length && ticketDataParent?.ticket?.selfassignuser_id !=
      null) {
      <button type="button" class="btn btn-outline-primary dropdown-toggle btn-sm"
        ngbDropdownToggle>{{ticketDataParent?.ticket?.selfassign?.name}} ({{'self' | translate}}) <span
          class="caret"></span></button>
      <button type="button" [disabled]="sendingResponse['unassign']" class="btn btn-outline-primary btn-sm"
        (click)="unAssignSelf(ticketDataParent?.ticket?.enc_id, 'unassign')" [ngbTooltip]="'Unassign' | translate"
        aria-label="Unassign"><i class="fe fe-x"></i>@if (sendingResponse['unassign']) {
        <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      } @else {
      <button type="button" class="btn btn-outline-primary dropdown-toggle btn-sm" ngbDropdownToggle>{{'Assign'}} <span
          class="caret"></span></button>
      }
      }
      <ul ngbDropdownMenu role="menu">
        <li class="dropdown-plus-title">{{'Assign' | translate}} <b aria-hidden="true" class="fa fa-angle-up"></b></li>
        <li>
          <button class="btn" type="button" [disabled]="sendingResponse['self']"
            (click)="SelfAssign(ticketDataParent?.ticket, 'self')">{{'Self Assign' | translate}}@if
            (sendingResponse['self']) {
            <i class="fa fa-spinner fa-spin"></i>
            }</button>
        </li>
        <li>
          <button class="btn" type="button" (click)="AssignTicket(assignTicketModel, ticketDataParent?.ticket)">{{'Other
            Assign' |
            translate}}</button>
        </li>
      </ul>
    </div>
    }
    }
    }
  </div>
</div>


<!-- // Assignticket to agent modal start -->
<ng-template #assignTicketModel let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Assignticket' | translate}}</h5>
    <button aria-label="close" type="button" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #Otherassign="ngForm" (ngSubmit)="OtherAssign(Otherassign.value, 'otherAssign')">
      <div class="custom-controls-stacked d-md-flex">
        <ng-select class="form-control" [items]="userDetails?.table_data" #select
          [placeholder]="'Select Agent' | translate" [virtualScroll]="true" bindLabel="name" [loading]="!userDetails"
          [multiple]="true" [searchable]="true" dropdownPosition="auto" bindValue="id" name="assigned_user_id"
          [ngModel]="assignedMem">
          <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
            <div><span>{{item?.name}}({{item.roles[0]?.name}})</span></div>
          </ng-template>
        </ng-select>
      </div>
      <span id="AssignError" class="text-danger"></span>
      <div class="modal-footer">
        <button [disabled]="sendingResponse['otherAssign']" type="submit" class="btn btn-secondary"
          id="btnsave">{{'Save' | translate}}@if (sendingResponse['otherAssign']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // Assignticket to agent modal end -->

<!-- // catModel ticket to agent modal start -->
<ng-template #catModel let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Category' | translate}}</h5>
    <button aria-label="Close" type="button" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #categoryMdl="ngForm" (ngSubmit)="categoryFn(categoryMdl, 'categoryChange')">
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">{{'Select category' | translate}} <span class="text-danger">*</span> </label>
          <div class="custom-controls-stacked d-md-flex">

            <ng-select class="form-control" [items]="category" #maincategory
              [placeholder]="'Select category' | translate" [virtualScroll]="true" bindLabel="name" [multiple]="false"
              [searchable]="true" [loading]="!category" dropdownPosition="auto" bindValue="id" name="category"
              [ngModel]="ticketDataParent?.ticket?.category?.id" #categoryM="ngModel"
              [class.is-invalid]="categoryM.invalid && categoryM.touched" required (load)="categorychange($event)"
              (change)="categorychange($event)">
              <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                <div><span>{{item?.name}}</span></div>
              </ng-template>
            </ng-select>
          </div>
          @if ((categoryM.invalid && categoryM.touched) || categoryM.dirty) {
          <div>
            @if (categoryM.errors?.['required']) {
            <small class="text-danger">{{'Category is required' | translate}}</small>
            }
          </div>
          }
        </div>
        @if (haspurchasecode && haspurchasecode.length) {
        <div class="form-group" id="envatopurchase">
          <label class="form-label">{{'Envato Purchase Code' | translate}} <span class="text-danger">*</span></label>
          <input type="text" class="form-control" (keyup)="envatoVerify($event.target, 'categoryChange')"
            name="envato_id" [readOnly]="licencekey ? true : false" required [placeholder]="'Enter Envato Purchase Code' | translate"
            [class.is-invalid]="envatopurchase.invalid && envatopurchase.touched" #envatopurchase="ngModel"
            [class.is-invalid]="envatopurchase.invalid && envatopurchase.touched" ngModel="{{licencekey}}">
          @if ((envatopurchase.invalid && envatopurchase.touched) || envatopurchase.dirty) {
          <div>
            @if (envatopurchase.errors?.['required']) {
            <small class="text-danger">{{'Purchase Code is required' | translate}}</small>
            }
          </div>
          }
        </div>
        }

        @if (envatoName?.length) {
        <div class="form-group" id="envatoName">
          <label class="form-label">{{'Envato Item Name' | translate}} <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="productname" [readOnly]="true" required [ngModel]="envatoName">
        </div>
        }

        @if (hassubcategoriess && hassubcategoriess.length) {
        <div class="form-group" id="selectssSubCategory">
          <label class="form-label mb-0 mt-2">{{'Subcategory' | translate}}</label>
          <ng-select class="form-control" [items]="hassubcategoriess" #subcategoriess
            [placeholder]="'Select Sub Category' | translate" [virtualScroll]="true" bindLabel="subcategoryname"
            [multiple]="false" [loading]="!hassubcategoriess" [searchable]="true" dropdownPosition="auto" bindValue="id"
            name="subscategory" [ngModel]="subcategory">
            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
              <div><span>{{item?.subcategoryname}}</span></div>
            </ng-template>
          </ng-select>
        </div>
        }
        @if (hasproject && hasproject.length) {
        <div class="form-group" id="project">
          <label class="form-label">{{'Projects' | translate}}</label>
          <ng-select class="form-control" [items]="hasproject" #project [placeholder]="'Select Project' | translate"
            [virtualScroll]="true" bindLabel="name" [multiple]="false" [searchable]="true" [loading]="!hasproject"
            dropdownPosition="auto" bindValue="name" name="project" [ngModel]="projects">
            <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="modal-footer">
        <a href="javascript:;" class="btn btn-outline-danger" (click)="modal.dismiss('Close click')">{{'Close' |
          translate}}</a>
        <button [disabled]="sendingResponse['categoryChange'] && envatoStatus" type="submit"
          class="btn btn-secondary sprukoapiblock">{{'Save' | translate}}@if (sendingResponse['categoryChange']) {
          <i class="fa fa-spinner fa-spin"></i>
          }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // catModel ticket to agent modal end -->

<!-- // Priority ticket to agent modal start -->
<ng-template #priority let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Priority' | translate}}</h5>
    <button aria-label="Close" type="button" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #priorityModel="ngForm" (ngSubmit)="priorityFn(priorityModel, 'prority')">
      <input type="hidden" name="priority_id" id="priority_id" value="{{ticketDataParent?.ticket?.id}}" ngModel>
      <div class="modal-body">
        <div class="custom-controls-stacked d-md-flex">
          <ng-select class="form-control select2_modalpriority" [items]="priorityList" #select
            [placeholder]="'Priority' | translate" [virtualScroll]="true" bindLabel="name" [multiple]="false"
            [loading]="!priorityList" [searchable]="true" dropdownPosition="auto" bindValue="name" name="priority"
            [ngModel]="ticketDataParent?.ticket?.priority">
            <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="modal-footer">
        <button [disabled]="sendingResponse['prority']" type="submit" class="btn btn-secondary" id="pribtnsave">{{'Save'
          | translate}}@if (sendingResponse['prority']) {
          <i class="fa fa-spinner fa-spin"></i>
          }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // Priority ticket to agent modal end -->

<!-- // Priority ticket to agent modal start -->
<ng-template #filePermission let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'File Permission' | translate}}</h5>
    <button aria-label="Close" type="button" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #filePermissionModel="ngForm" id="filePermissionModel" (ngSubmit)="filePermissionFn(filePermissionModel, 'FilePermission')">
      <input type="hidden" name="ticket_id" id="ticket_id" value="{{ticketDataParent?.ticket?.id}}" ngModel>
        <div class="form-group">
          <label>{{ 'You can choose file upload permission for this ticket either for once or until the ticket gets closed.' | translate }}</label>
          <div class="row mt-5">
            <div class="col-4">
              <label class="custom-switch form-switch mb-0">
                <input 
                  type="radio" 
                  name="permission" 
                  ngModel
                  value="once" 
                  class="custom-switch-input tswitch" 
                  required
                />
                <span class="custom-switch-indicator me-2"></span><span>{{ 'Permit Once' | translate }}</span>
              </label>
            </div>

            <div class="col-4">
              <label class="custom-switch form-switch mb-0">
                <input 
                  type="radio" 
                  name="permission" 
                  ngModel
                  value="always" 
                  class="custom-switch-input tswitch" 
                  required
                />
                <span class="custom-switch-indicator me-2"></span>
                <span>{{ 'Permit Always' | translate }}</span>
              </label>
            </div>
          </div>
        </div>
    </form>
    </div>
    <div class="modal-footer">
      <button form="filePermissionModel" [disabled]="sendingResponse['FilePermission']" type="submit" class="btn btn-secondary" id="pribtnsave">{{'Save'
        | translate}}@if (sendingResponse['FilePermission']) {
        <i class="fa fa-spinner fa-spin"></i>
        }</button>
    </div>
</ng-template>
<!-- // Priority ticket to agent modal end -->

