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

<!-- row -->
<div class="col-xl-12">
  <div class="card buttons-translate">
    <div class="card-header p-3 px-5">
      <h4 class="card-title mb-0">{{'Translate' | translate}}</h4>
      <div class="card-options">
        <button class="btn btn-success me-3" id="autoTranslate" (click)="autoTranslateFn()" >{{"Auto Translate" | translate}}</button>
        <form #filterTra="ngForm" (ngSubmit)="filterTranslate(filterTra, 'filterTrans')">
          <div class="input-group translate-input" ngbDropdown>
            <input type="text" class="form-control" name="search" placeholder="{{'Search' | translate}}" value=""
              ngModel>
            <button aria-label="button" [disabled]="sendingResponse['filterTrans']" type="submit" class="btn border"><i
                class="fe fe-search"></i>@if (sendingResponse['filterTrans']) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
              }</button>
            <button type="button" class="btn border dropdown-toggle-split" ngbDropdownToggle aria-expanded="false">
              <span>{{'Filters' | translate}} <i class="fa fa-angle-down ms-1"></i></span>
            </button>
            <ul ngbDropdownMenu class="dropdown-menu-end">
              <li><a ngbDropdownItem href="javascript:;"
                  (click)="translateFilterNotTran('filter','missing', 'filterTrans')">{{'Missing Translates' |
                  translate}}</a></li>
              <li><a ngbDropdownItem href="javascript:;" (click)="allTrans()">{{'All Translates' | translate}}</a></li>
            </ul>
          </div>
        </form>
      </div>
    </div>
    <div class="card-body p-0 pt-4">

      @if (transCount > 0) {
      <div class="px-5 mb-4">
        <div class="alert alert-light-warning d-flex px-5 py-2" role="alert">
          <div class="me-3">
            <i class="fe fe-alert-circle fs-30"></i>
          </div>
          <div>
            <h4 class="alert-heading fs-15 font-weight-semibold mb-0">{{ 'This language is incomplete' | translate }}
            </h4>
            <p class="fs-13 mb-0">{{ transCount }} {{ 'translations are missing. You can' | translate }}
              <a href="javascript:;" (click)="translateFilterNotTran('filter','missing', 'filterTrans')">{{ 'filter this
                page' | translate }}</a> {{ ' to show missing translations.' | translate }}
            </p>
          </div>
        </div>
      </div>
      }

      <div class="px-5 py-0 tabs-div">
        @for (group of groups; track group) {
        <a class="btn btn-primary me-1 mt-1 " [ngClass]="active == group?.group_langname ? 'active' : ''"
          href="javascript:;" (click)="translateTab(group?.group_langname, 'submitTrans')">
          {{ group?.group_langname | translate }}
        </a>
        }
      </div>
      @if (isloader) {
      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
      }
      <form #FormData="ngForm" (ngSubmit)="ChangeTheValues(FormData.value, 'submitTrans')">
        <div class="p-5 border-xl-top">
          @for (data of languagesKey; track data) {
          <div class="d-flex translation-area">
            <div class="flex-grow-1">
              <!-- <span class="form-control tranlation-height" #datakey>{{data.key}}</span> -->
              <textarea class="form-control tranlation-height" rows="1" [disabled]="true">{{data.key}}</textarea>
            </div>
            <div class="p-2">
              <i class="fe fe-chevron-right text-muted"></i>
            </div>
            <div class="flex-grow-1">
              <!-- <textarea [(ngModel)]="datakey.textContent" class="form-control tranlation-height" aria-label="With textarea" rows="1" [name]="data.id" ></textarea> -->
              <textarea [(ngModel)]="data.value" class="form-control tranlation-height" aria-label="With textarea"
                rows="1" [name]="data.id"></textarea>
            </div>
          </div>
          }
        </div>
        <div class="card-footer">
          <div class="form-group float-end">
            <button [disabled]="sendingResponse['submitTrans']" type="submit" class="btn btn-secondary">{{'Save Changes'
              | translate}}@if (sendingResponse['submitTrans']) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
              }</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- row closed -->