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

<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card">
    <div class="card-header border-0">
      <h4 class="card-title">{{'Language List' | translate}}</h4>
      <div class="card-options">
        @if (permission?.includes('Languages Create')) {
          <a routerLink="/admin/languages/create" class="btn btn-secondary mt-sm-0 mt-2 me-3">
            <i class="feather feather-plus me-1"></i>{{'Add Languages' | translate}}
          </a>
        }
      </div>
    </div>
    <div class="card-body">
      <div class="table-responsive spruko-delete">
        <div class="table-options">
          <div class="custom-buttons">
          </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 w-100 ticketdeleterow dataTable " mat-table [dataSource]="dataSource" matSort>

            <!-- Sno Column -->
            <ng-container matColumnDef="slno">
              <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>

            <!-- ticketdetails Column -->
            <ng-container matColumnDef="languagename">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="languagename"> {{'Language Name'|
              translate}} </th>
              <td mat-cell *matCellDef="let row">
                @if (row.languagecode == defaultLanguage) {
                  {{row.languagename}}({{'Default' | translate}})
                } @else {
                  {{row.languagename}}
                }
              </td>

            </ng-container>

            <!-- user Column -->
            <ng-container matColumnDef="languagecode">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="languagecode"> {{'Language Code'| translate}} </th>
              <td mat-cell *matCellDef="let row">
                {{row?.languagecode}}
              </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 (row.translates_count == 0) {
                  <span class="badge bg-green text-dark">{{'Translations are completed' |
                  translate}}</span>
                } @else {
                  <span class="badge bg-yellow text-dark">{{row.translates_count}} {{'Translations are missing' | translate}}</span>
                }
              </td>
            </ng-container>

            <!-- created_at Column -->
            <ng-container matColumnDef="createdDate">
              <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="created_at"> {{'Created At'| translate}}
              </th>
              <td mat-cell *matCellDef="let row">
                {{row.created_at | date : dataFormat}}
              </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('Languages Edit')) {
                    <button aria-label="Edit" routerLink="/admin/languages/edit/{{row.id}}" class="action-btns1">
                      <i class="feather feather-edit text-primary" [ngbTooltip]="'Edit' | translate" ></i>
                    </button>
                  }

                  @if (permission?.includes('Languages Translate')) {
                    <button aria-label="Translate" routerLink="/admin/languages/translate/{{row.languagecode}}" class="action-btns1">
                      <i class="feather feather-repeat text-primary" [ngbTooltip]="'Translate' | translate" ></i>
                    </button>
                  }
                  <button aria-label="Insert" routerLink="/admin/languages/insert/{{row.languagecode}}" class="action-btns1">
                    <i class="feather feather-plus text-primary" [ngbTooltip]="'Insert' | translate" ></i>
                  </button>

                  @if (permission?.includes('Languages Delete')) {
                    @if (row.languagecode != defaultLanguage) {
                      <button aria-label="delete" type="button" [disabled]="sendingResponse['deleteLang'+i]" class="action-btns1" id="delete-testimonial"
                        (click)="deleteLanguage(row.id, 'deleteLang'+i)">
                        <i class="feather feather-trash-2 text-danger" [ngbTooltip]="'Delete' | translate"></i>
                        @if (sendingResponse['deleteLang'+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>