<admin-page-header [title]="'Insert New word'"></admin-page-header>


<!-- row -->
<div class="col-xl-12">
  <div class="card buttons-translate">
    <div class="card-body p-0">
      <form #FormData="ngForm" (ngSubmit)="InsertData(FormData, 'insertLang')">
        <div class="p-5">
          <label for="key">{{'Key' | translate}} <span class="text-danger"> *</span> </label>
          <input type="text" required #key="ngModel" [class.is-invalid]="key.invalid && key.touched" ngModel class="form-control tranlation-height mb-2" aria-label="With textarea" rows="1" name="key" >
          @if ((key.invalid && key.touched) || key.dirty) {
            <div>
              @if (key.errors?.['required']) {
                <small class="text-danger">{{'Key is required' | translate}}</small>
              }
            </div>
          }
          <label for="value">{{'Value'| translate}}<span class="text-danger"> *</span></label>
          <textarea required #value="ngModel" [class.is-invalid]="value.invalid && value.touched" ngModel class="form-control tranlation-height mb-2" aria-label="With textarea" rows="1"
          name="value"></textarea>
          @if ((value.invalid && value.touched) || value.dirty) {
            <div>
              @if (value.errors?.['required']) {
                <small class="text-danger">{{'Value is required' | translate}}</small>
              }
            </div>
          }
          <label for="group_langname">{{'Group Name' | translate}}<span class="text-danger"> *</span></label>
          <ng-select required #group="ngModel" [class.is-invalid]="group.invalid && group.touched" [ngModel]="'general'" class="form-control tranlation-height mb-2" name="group_langname">
            <ng-option value="menu">{{'menu' | translate}}</ng-option>
            <ng-option value="notification">{{'notification' | translate}}</ng-option>
            <ng-option value="alerts">{{'alerts' | translate}}</ng-option>
            <ng-option value="setting">{{'setting' | translate}}</ng-option>
            <ng-option value="filesetting">{{'filesetting' | translate}}</ng-option>
            <ng-option value="general">{{'general' | translate}}</ng-option>
            <ng-option value="errorpages">{{'errorpages' | translate}}</ng-option>
          </ng-select>
          @if ((group.invalid && group.touched) || group.dirty) {
            <div>
              @if (group.errors?.['required']) {
                <small class="text-danger">{{'Group is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="card-footer">
          <div class="form-group float-end">
            <button [disabled]="FormData.invalid || sendingResponse['insertLang']" class="btn btn-secondary" type="submit">
              {{ "Save Changes" | translate }}@if (sendingResponse['insertLang']) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
            }
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
</div>
<!-- row closed -->