<admin-page-header [title]="'Create Language'"></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">{{'Add Language' | translate}}</h4>
    </div>
    <form #FormData="ngForm" (ngSubmit)="ChangeTheValues(FormData, 'createLang')">
      <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 type="text" class="form-control" placeholder="Ex:- عربى" name="languagename" value=""
                #displaytranslateion="ngModel" autocomplete="off"
                [class.is-invalid]="displaytranslateion.invalid && displaytranslateion.touched" required autofocus>
              @if ((displaytranslateion.invalid && displaytranslateion.touched) || displaytranslateion.dirty) {
              <div>
                @if (displaytranslateion.errors?.['required']) {
                <small class="text-danger">{{'Display Translation 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 type="text" class="form-control" placeholder="Ex:- Arabic" name="languagenativename"
                value="" #nativename="ngModel" autocomplete="off"
                [class.is-invalid]="nativename.invalid && nativename.touched" required>
            </div>
            @if ((nativename.invalid && nativename.touched) || nativename.dirty) {
            <div>
              @if (nativename.errors?.['required']) {
              <small class="text-danger">{{'Translation Native Name is required' | translate}}</small>
              }
            </div>
            }
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">{{'Select Language Code' | translate}}<span class="text-red"> *</span></label>
          <ng-select class="form-control" #language_formatselect [items]="languagesCodes" [searchable]="false"
            [ngModel]="null" bindLabel="language" #langcode="ngModel"
            [class.is-invalid]="langcode.invalid && langcode.touched" required bindValue="code" name="languagecode"
            [virtualScroll]="true" [loading]="!languagesCodes" (open)="dropdownSearch()">
            <ng-template ng-header-tmp>
              <div style="display:flex;">
                <input #filterInput class="form-control" type="text"
                  (input)="language_formatselect.filter($any($event.target).value)" />
                <i [hidden]="filterInput.value.length === 0" class="material-icons"
                  (click)="language_formatselect.filter(''); filterInput.value = ''">close</i>
              </div>
            </ng-template>
            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
              <div><span>{{item?.language}} ({{item?.code}})</span></div>
            </ng-template>
          </ng-select>
          @if ((langcode.invalid && langcode.touched) || langcode.dirty) {
          <div>
            @if (langcode.errors?.['required']) {
            <small class="text-danger">{{'Select Language Code is required' | translate}}</small>
            }
          </div>
          }
        </div>
        <div class="form-group">
          <div class="switch_section">
            <div class="switch-toggle d-flex p-0">
              <span class="onoffswitch2 me-1">
                <input type="checkbox" name="is_default" id="is_default"
                  class="toggle-class onoffswitch2-checkbox sprukoregister" ngModel value="1">
                <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 type="checkbox" name="is_rtl" id="is_rtl"
                  class="toggle-class onoffswitch2-checkbox sprukoregister" ngModel value="1">
                <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 type="submit" [disabled]="FormData.invalid || sendingResponse['createLang']"
            class="btn btn-secondary">{{'Save' |
            translate}}@if (sendingResponse['createLang']) {
            <i class="fa fa-spinner fa-spin mx-1"></i>
            }</button>
        </div>
      </div>
    </form>
  </div>
</div>