<admin-page-header [title]="'Language Edit'"></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">{{'Edit Language' | translate}}</h4>
    </div>
    <form #FormData="ngForm" (ngSubmit)="ChangeTheValues(FormData, 'editLang')">
      <div class="card-body">
        <div class="row">
          <div class="col-lg-6">
            <div class="form-group">
              <label class="form-label">{{'Display Translation Name' | translate}}<span class="text-red">*</span></label>
              <input [ngModel]="language?.languagename" type="text" class="form-control" placeholder="Ex:- عربى" name="languagename" #translatename="ngModel"
                [class.is-invalid]="translatename.invalid && translatename.touched" required autofocus>
              @if ((translatename.invalid && translatename.touched) || translatename.dirty) {
                <div>
                  @if (translatename.errors?.['required']) {
                    <small class="text-danger">{{'Translate Name is required' | translate}}</small>
                  }
                </div>
              }
            </div>
          </div>
          <div class="col-lg-6">
            <div class="form-group">
              <label class="form-label">{{'Translation Native Name' | translate}}<span class="text-red">*</span></label>
              <input [ngModel]="language?.languagenativename" type="text" class="form-control" placeholder="Ex:- Arabic" name="languagenativename" #nativename="ngModel"
                [class.is-invalid]="nativename.invalid && nativename.touched" required>
              @if ((nativename.invalid && nativename.touched) || nativename.dirty) {
                <div>
                  @if (nativename.errors?.['required']) {
                    <small class="text-danger">{{'Native Name is required' | translate}}</small>
                  }
                </div>
              }
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="switch_section">
            <div class="switch-toggle d-flex p-0">
              <span class="onoffswitch2 me-1">
                <input [ngModel]="language?.languagecode == defaultLang" type="checkbox" name="is_default" id="is_default" class="toggle-class onoffswitch2-checkbox sprukoregister"
                  value="1" [checked]="language?.languagecode == defaultLang">
                <label for="is_default" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'Set as default Language' | translate}}</label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="switch_section">
            <div class="switch-toggle d-flex p-0">
              <span class="onoffswitch2 me-1">
                <input [ngModel]="language?.is_rtl == 1" type="checkbox" name="is_rtl" id="is_rtl" class="toggle-class onoffswitch2-checkbox sprukoregister" value="1"
                  [checked]="language?.is_rtl == 1 ? true: false">
                <label for="is_rtl" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3 ps-md-max-0">{{'RTL Enable' | translate}}</label>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <div class="form-group  float-end">
          <button [disabled]="FormData.invalid || sendingResponse['editLang']" type="submit" class="btn btn-secondary">{{'Update' | translate}}@if (sendingResponse['editLang']) {
            <i
            class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
        </div>
      </div>
    </form>
  </div>
</div>