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

<!-- Privacy Policy & Terms of Use List -->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0">
      <h4 class="card-title">{{'Pages' | translate}}</h4>
      <div class="card-options mt-sm-max-2">
        @if (permission?.includes('Pages Create')) {
          <a href="javascript:void(0)" (click)="createModelPopup(addPagemodal)" class="btn btn-secondary me-3" id="create-new-pages">{{'Create Page' | translate}}</a>
        }
      </div>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <div class="table-options">
          <div class="custom-buttons">
            @if (permission?.includes('Pages Delete')) {
              <button type="button" [disabled]="sendingResponse['pageMassDel']" id="massdelete" (click)="massDeletePages('pageMassDel')" class="btn btn-outline-light btn-sm mb-4 "><i
              class="fe fe-trash"></i> {{'Delete' | translate}}@if (sendingResponse['pageMassDel']) {
              <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 no-footer dtr-inline" 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" mat-header-cell class="wpx-40 text-center" *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>

          <!-- NAME Column -->
          <ng-container matColumnDef="name">
            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="pagename"> {{'Name' | translate}}
            </th>
            <td mat-cell *matCellDef="let row">
              {{row?.pagename.slice(0, 40)}}
            </td>

          </ng-container>
          <!-- Created Date Column -->
          <ng-container matColumnDef="createddate">
            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="created_at"> {{'Created Date' | translate}}
            </th>
            <td mat-cell *matCellDef="let row">
              {{row?.created_at | date:'shortDate'}}
            </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>
                @if (permission?.includes('Pages Edit')) {
                  <button aria-label="edit" (click)="editModelPopup(editPagemodal, row)" class="action-btns1">
                    <i class="feather feather-edit text-primary" [ngbTooltip]="'Edit' | translate"></i>
                  </button>
                }
                @if (permission?.includes('Pages View') && row.status) {
                  <a aria-label="view" routerLink="/page/{{row.pageslug}}" class="action-btns1" target="_blank">
                    <i class="feather feather-eye text-primary" [ngbTooltip]="'View' | translate"></i>
                  </a>
                }
                @if (permission?.includes('Pages Delete')) {
                  <button type="button" aria-label="delete" [disabled]="sendingResponse['pageDel'+i]" (click)="deletePage(row, 'pageDel'+i)" class="action-btns1"
                    id="delete-testimonial">
                    <i class="feather feather-trash-2 text-danger" [ngbTooltip]="'Delete' | translate"></i>
                    @if (sendingResponse['pageDel'+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>
<!-- End Privacy Policy & Terms of Use List -->


<!-- // add Page to agent modal start -->
<ng-template #addPagemodal let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Add Page' | translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #addPageF="ngForm" (ngSubmit)="addPage(addPageF, 'addPage')">
      <input type="hidden" name="pages_id" id="pages_id" ngModel>

      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">{{'Name' | translate}} <span class="text-red">*</span></label>
          <input #nameRef="ngModel" [class.is-invalid]="nameRef.invalid && nameRef.touched" required type="text" class="form-control" name="pagename" id="pagename" ngModel>
          @if ((nameRef.invalid && nameRef.touched) || nameRef.dirty) {
            <div>
              @if (nameRef.errors?.['required']) {
                <small class="text-danger">{{'Name is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <label class="form-label">{{'Description' | translate}} <span class="text-red">*</span></label>

          <angular-editor [config]="toolbar" #description="ngModel" [ngModel]="pagesModel['pagedescription']"
            [class.is-invalid]="description.invalid && description.touched" required class="form-control" [placeholder]="'Page Description' | translate"
          name="pagedescription"></angular-editor>
          @if (description.errors?.['maxLength']) {
            <div class="limit-error">
              {{ description.errors?.['maxLength'].actualLength }}/{{ description.errors?.['maxLength'].maxLength }} {{' exceeded the limit' | translate}}
            </div>
          }
          @if ((description.invalid && description.touched) || description.dirty) {
            <div>
              @if (description.errors?.['required']) {
                <small class="text-danger">{{'Description is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <div class="custom-controls-stacked d-md-flex  d-md-max-block">
            <label class="form-label mt-1 me-4">{{'View On' | translate}}: <span class="text-red">*</span></label>
            <label class="custom-control form-radio success me-4">
              <input #viewonfield="ngModel" [class.is-invalid]="viewonfield.invalid && viewonfield.touched" required type="radio" class="custom-control-input" id="display" name="display"
                value="both" ngModel>
              <span class="custom-control-label">{{'View On Both' | translate}}</span>
            </label>
            <label class="custom-control form-radio success me-4">
              <input #viewonfield="ngModel" [class.is-invalid]="viewonfield.invalid && viewonfield.touched" required type="radio" class="custom-control-input " id="display1"
                name="display" value="header" ngModel>
              <span class="custom-control-label">{{'View on header' | translate}}</span>
            </label>
            <label class="custom-control form-radio success me-4">
              <input #viewonfield="ngModel" [class.is-invalid]="viewonfield.invalid && viewonfield.touched" required type="radio" class="custom-control-input " id="display2"
                name="display" value="footer" ngModel>
              <span class="custom-control-label">{{'View on footer' | translate}}</span>
            </label>
          </div>
          @if ((viewonfield.invalid && viewonfield.touched) || viewonfield.dirty) {
            <div>
              @if (viewonfield.errors?.['required']) {
                <small class="text-danger">{{'View On is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <div class="switch_section">
            <div class="switch-toggle d-flex  d-md-max-block mt-4 ms-0 ps-0">
              <label class="form-label pe-1 me-6">{{'Status' | translate}}:</label>
              <span class="onoffswitch2">
                <input type="checkbox" name="status" id="myonoffswitch18" class=" toggle-class onoffswitch2-checkbox" ngModel>
                <label for="myonoffswitch18" class="toggle-class onoffswitch2-label"></label>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-danger" (click)="modal.dismiss('Cross click')">{{'Close' |
        translate}}</button>
        <button type="submit" [disabled]="addPageF.invalid || sendingResponse['addPage']" class="btn btn-secondary" id="btnsave">{{'Save'|translate}}@if (sendingResponse['addPage']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // add Page to agent modal end -->
<!-- // edit Page to agent modal start -->
<ng-template #editPagemodal let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Edit Page'|translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #editPageData="ngForm" (ngSubmit)="editPage(editPageData, 'editPage')">
      <input type="hidden" name="pages_id" [ngModel]="pagesModel['pagesId']">
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">{{'Name' | translate}} <span class="text-red">*</span></label>
          <input #nameRef="ngModel" [class.is-invalid]="nameRef.invalid && nameRef.touched" required type="text" class="form-control" name="pagename" [ngModel]="pagesModel['pagename']">
          @if ((nameRef.invalid && nameRef.touched) || nameRef.dirty) {
            <div>
              @if (nameRef.errors?.['required']) {
                <small class="text-danger">{{'Name is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <label class="form-label">{{'Description' | translate}} <span class="text-red">*</span></label>
          <angular-editor [config]="toolbar" #description="ngModel" [ngModel]="pagesModel['pagedescription']"
            [class.is-invalid]="description.invalid && description.touched" required class="form-control" [placeholder]="'Page Description' | translate"
          name="pagedescription"></angular-editor>
          @if (description.errors?.['maxLength']) {
            <div class="limit-error">
              {{ description.errors?.['maxLength'].actualLength }}/{{ description.errors?.['maxLength'].maxLength }} {{' exceeded the limit' | translate}}
            </div>
          }
          @if ((description.invalid && description.touched) || description.dirty) {
            <div>
              @if (description.errors?.['required']) {
                <small class="text-danger">{{'Field Name is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <div class="custom-controls-stacked d-md-flex  d-md-max-block">
            <label class="form-label mt-1 me-4">{{'View On' | translate}}: <span class="text-red">*</span></label>
            <label class="custom-control form-radio success me-4">
              <input #viewonfield="ngModel" [class.is-invalid]="viewonfield.invalid && viewonfield.touched" required type="radio" class="custom-control-input" name="display" value="both"
                [ngModel]="pagesModel['viewonpages']" [checked]="pagesModel['viewonpages'] == 'both' ? true : false ">
              <span class="custom-control-label">{{'View On Both' | translate}}</span>
            </label>
            <label class="custom-control form-radio success me-4">
              <input #viewonfield="ngModel" [class.is-invalid]="viewonfield.invalid && viewonfield.touched" required type="radio" class="custom-control-input " name="display"
                value="header" [ngModel]="pagesModel['viewonpages']" [checked]="pagesModel['viewonpages'] == 'header' ? true : false ">
              <span class="custom-control-label">{{'View on header' | translate}}</span>
            </label>
            <label class="custom-control form-radio success me-4">
              <input #viewonfield="ngModel" [class.is-invalid]="viewonfield.invalid && viewonfield.touched" required type="radio" class="custom-control-input " name="display"
                value="footer" [ngModel]="pagesModel['viewonpages']" [checked]="pagesModel['viewonpages'] == 'footer' ? true : false ">
              <span class="custom-control-label">{{'View on footer' | translate}}</span>
            </label>
          </div>
          @if ((viewonfield.invalid && viewonfield.touched) || viewonfield.dirty) {
            <div>
              @if (viewonfield.errors?.['required']) {
                <small class="text-danger">{{'View On is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <div class="switch_section">
            <div class="switch-toggle d-flex  d-md-max-block mt-4 ms-0 ps-0">
              <label class="form-label pe-1 me-6">{{'Status' | translate}}:</label>
              <span class="onoffswitch2">
                <input type="checkbox" name="status" class=" toggle-class onoffswitch2-checkbox"  id="myonoffswitch18"  [checked]="pagesModel['status'] == 1 ? true : false" [ngModel]="pagesModel['status'] == 1 ? true : false">
                <label for="myonoffswitch18" class="toggle-class onoffswitch2-label"></label>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-danger" (click)="modal.dismiss('Cross click')">{{'Close' |
        translate}}</button>
        <button type="submit" [disabled]="editPageData.invalid || sendingResponse['editPage']" class="btn btn-secondary">{{'Update' | translate}} @if (sendingResponse['editPage']) {
          <i
          class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // edit Page to agent modal end -->