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

<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0 d-sm-max-flex flex-wrap">
      <h4 class="card-title">{{'Canned Response List' |translate}}</h4>
      <div class="card-options mt-sm-max-2">
        @if (permission?.includes('Canned Response Create')) {
          <a routerLink="/admin/canned-response/create" class="btn btn-secondary me-3">{{'Add Canned Response'
          | translate}}</a>
        }
      </div>
    </div>
    <div class="card-body">
      <div class="table-responsive spruko-delete">
        <div class="table-options">
          <div class="custom-buttons">
            @if (permission?.includes('Canned Response Delete')) {
              <button type="button" [disabled]="sendingResponse['cannedResponseCreate']" (click)="massDeletecannedResponses('cannedResponseCreate')" id="massdeletenotify"
                class="btn btn-outline-light btn-sm mb-4 "><i class="fe fe-trash"></i> {{'Delete'
                | translate }}
                @if (sendingResponse['cannedResponseCreate']) {
                  <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 border-bottom text-nowrap ticketdeleterow 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="title">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header> {{'Title' | translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                {{row?.title.slice(0, 40)}}
              </td>
            </ng-container>
            <!-- Response Type Column -->
            <ng-container matColumnDef="responseType">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header> {{'Response Type' | translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                @if(row?.responsetype == "livechat"){
                  {{row?.responsetype | translate}}
                }@else {
                  {{'Ticket' | translate}}
                }
              </td>
            </ng-container>
            <!-- status Column -->
            <ng-container matColumnDef="status">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header> {{'Status' | translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                @if (permission?.includes('Canned Response Edit')) {
                  <label class="custom-switch form-switch mb-0">
                    <input  type="checkbox" name="status" (click)="cannedResponsesStatusChange(row, 'cannedResponseEdit')"
                      id="myonoffswitch{{row?.id}}" [value]="row?.id"
                      class="custom-switch-input tswitch"
                      [checked]="row?.status == '1' ? true : false">
                    <span class="custom-switch-indicator"></span>
                  </label>
                }
              </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 class="btn-group">
                  @if (permission?.includes('Canned Response Edit')) {
                    <a aria-label="edit" href="javascript:;" routerLink="/admin/canned-response/edit/{{row?.id}}"
                      class="action-btns1">
                      <i class="feather feather-edit text-primary" [ngbTooltip]="'Edit' | translate"></i>
                    </a>
                  }
                  @if (permission?.includes('Canned Response Delete')) {
                    <button  type="button" aria-label="delete" [disabled]="sendingResponse['cannedResponseDelete' + i]" (click)="deletecannedResponse(row, 'cannedResponseDelete' + i)"
                      class="action-btns1" id="delete-testimonial">
                      <i class="feather feather-trash-2 text-danger" [ngbTooltip]="'Delete' | translate"></i>
                      @if (sendingResponse['cannedResponseDelete' + i]) {
                        <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>