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

<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <form #editArticle="ngForm" (ngSubmit)="ArticleSection(editArticle.value, 'editArticle')">
      <div class="card-header d-sm-max-flex  border-0">
        <h4 class="card-title">{{'Article Section' | translate}}</h4>
        <div class="card-options mt-sm-max-2 card-header-styles position-relative">
          <small class="me-1 mt-1">{{'Show Section' | translate}}</small>
          <div class="float-end mt-0">
            <div class="switch-toggle">
              <span class="onoffswitch2">
                <input type="checkbox" name="articlecheck" id="articlechecks" class=" toggle-class onoffswitch2-checkbox" [checked]="basic?.articlecheck === 'on'? true : false"
                  [ngModel]="basic?.articlecheck === 'on'">
                <label for="articlechecks" class="toggle-class onoffswitch2-label"></label>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-sm-12 col-md-12">
            <input type="hidden" class="form-control " name="id" [value]="basic?.id" [ngModel]="basic?.id">
            <div class="form-group">
              <label class="form-label">{{'Title' | translate}}<span class="text-red"> *</span> </label>
              <input #title="ngModel" [class.is-invalid]="title.invalid && title.touched" required  type="text" class="form-control" name="articletitle" [value]="basic?.articletitle" [ngModel]="basic?.articletitle">
              @if ((title.invalid && title.touched) || title.dirty) {
                <div>
                  @if (title.errors?.['required']) {
                    <small class="text-danger">{{'Title is required' | translate}}</small>
                  }
                </div>
              }
            </div>
          </div>
          <div class="col-sm-12 col-md-12">
            <div class="form-group">
              <label class="form-label">{{'Subtitle' | translate}}</label>
              <input type="text" class="form-control" name="articlesub" [value]="basic?.articlesub" [ngModel]="basic?.articlesub">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button [disabled]="sendingResponse['editArticle']" type="submit" class="btn btn-secondary">{{'Save Changes' |
          translate}}@if (sendingResponse['editArticle']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card mb-0">
    <div class="card-header d-sm-max-flex border-0">
      <h4 class="card-title">{{'Article List' |translate}}</h4>
      <div class="card-options mt-sm-max-2">
        @if (permission?.includes('Article Create')) {
          <a routerLink="/admin/knowledge/articles-create" class="btn btn-secondary me-3">{{'Add Article' |
          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('Article Delete')) {
              <button type="button" [disabled]="sendingResponse['massDelArtilce']" id="massdelete" (click)="massDeleteArtical('massDelArtilce')" class="btn btn-outline-light btn-sm mb-4 d-inline-flex align-items-center"><i class="fe fe-trash me-1"></i> {{'Delete'
            | translate}}</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="id"> {{'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>

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

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

          </ng-container>

          <!-- privacymode Column -->
          <ng-container matColumnDef="privacymode">
            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="privatemode"> {{'Privacy Mode' | translate}}
            </th>
            <td mat-cell *matCellDef="let row">
              @if (permission?.includes('Article Edit')) {
                <label class="custom-switch form-switch mb-0">
                  <input type="checkbox" name="privatemode" (click)="articalPrivacyChange(row)" id="privatemode{{row?.id}}" value="1" class="custom-switch-input tswitch1"
                    [checked]="row?.privatemode == '1' ? true : false">
                  <span class="custom-switch-indicator"></span>
                </label>
              }
            </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('Article Edit')) {
                <label class="custom-switch form-switch mb-0">
                  <input type="checkbox" name="status" (click)="articalstatusChange(row)" id="myonoffswitch{{row?.id}}" [value]="row?.status" class="custom-switch-input tswitch"
                    [checked]="row?.status == 'Published' ? 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>
                @if (permission?.includes('Article Edit')) {
                  <button aria-label="view" class="action-btns1" routerLink="/admin/knowledge/articles-edit/{{row?.id}}"><i class="feather feather-edit text-primary"
                  [ngbTooltip]="'Edit' | translate"></i></button>
                }
                @if (permission?.includes('Article View')) {
                  @if (row?.articleslug != null) {
                    <a target="_bank" aria-label="view" routerLink="/article/{{row?.articleslug}}" class="action-btns1">
                      <i class="feather feather-eye text-primary" [ngbTooltip]="'View' | translate"></i>
                    </a>
                  } @else {
                    <a target="_bank" aria-label="view" routerLink="/article/{{row?.id}}" class="action-btns1">
                      <i class="feather feather-eye text-primary" [ngbTooltip]="'View' | translate"></i>
                    </a>
                  }
                }

                @if (permission?.includes('Article Delete')) {
                  <button type="button" aria-label="delete" [disabled]="sendingResponse['articleDel'+i]" (click)="deleteArtical(row, 'articleDel'+i)" class="action-btns1 delete-category" id="show-delete"><i
                  class="feather feather-trash-2 text-danger" [ngbTooltip]="'Delete' | translate"></i>
                  @if (sendingResponse['articleDel'+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>