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

<!--Article Create-->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0 justify-content-between">
      <h4 class="card-title">{{'Add New Article' | translate}}</h4>
    </div>
    <form #createarticle="ngForm" (ngSubmit)="createArticle(createarticle, 'createArticle')">

      <!-- @honeypot -->
      <div class="card-body">
        <div class="form-group">
          <label class="form-label">{{'Title' | translate}} <span class="text-red">*</span></label>
          <input #title="ngModel" [class.is-invalid]="title.invalid && title.touched" required type="text" [maxlength]="120" class="form-control " [placeholder]="'Subject' | translate"
            name="title" ngModel value="" id="subject">
          @if ((title.invalid && title.touched) || title.dirty) {
            <div>
              @if (title.errors?.['required']) {
                <small class="text-danger">{{'Title is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <label class="form-label">{{'Category' | translate}} <span class="text-red">*</span></label>
          <ng-select #category="ngModel" [class.is-invalid]="category.invalid && category.touched" required class="form-control" [items]="allcategories" [loading]="!allcategories" #select
            (load)="categorychange($event)" (change)="categorychange($event)" [placeholder]="'Select category' | translate" [virtualScroll]="true" bindLabel="name" [multiple]="false"
            [searchable]="true" dropdownPosition="auto" bindValue="id" name="category" [ngModel]="null">
            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
              <div><span>{{item?.name}}</span></div>
            </ng-template>
          </ng-select>
          @if ((category.invalid && category.touched) || category.dirty) {
            <div>
              @if (category.errors?.['required']) {
                <small class="text-danger">{{'Category is required' | translate}}</small>
              }
            </div>
          }
        </div>
        @if (hassubcategoriess.length) {
          <div class="form-group" id="selectssSubCategory">
            <label class="form-label mb-0 mt-2">{{'Subcategory' | translate}}</label>
            <ng-select class="form-control" [items]="hassubcategoriess" #subcategoriess [placeholder]="'Select Sub Category' | translate" [virtualScroll]="true" bindLabel="subcategoryname"
              [multiple]="false" [loading]="!hassubcategoriess" [searchable]="true" dropdownPosition="auto" bindValue="id" name="subscategory"
              ngModel>
              <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                <div><span>{{item?.subcategoryname}}</span></div>
              </ng-template>
            </ng-select>
          </div>
        }
        <div class="form-group">
          <label class="form-label">{{'Description' | translate}}: <span class="text-red">*</span></label>
          <angular-editor [config]="toolbar" (keyup)="eventToStoreData($event.target)" #description="ngModel" [(ngModel)]="descriptionText"
          [class.is-invalid]="description.invalid && description.touched" required class="form-control" [placeholder]="'Enter text here' | translate" name="message"></angular-editor>
          @if (description.errors?.['maxLength']) {
            <div class="limit-error">
              {{ description.errors?.['maxLength'].actualLength }}/{{ description.errors?.['maxLength'].maxLength }} {{' exceeded the limit' | translate}}
            </div>
          }
          @if ((description.invalid && description.touched) || description.dirty) {
            <div>
              @if (description.errors?.['required']) {
                <small class="text-danger">{{'Description is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <label class="form-label">{{'Feature Image' | translate}}</label>
          <app-image-upload [directTypes]="setting?.USER_FILE_UPLOAD_TYPES" [setting]="setting" [maxLength]="1" (onImageUploaded)="onImageUploaded($event)"></app-image-upload>
          <small class="text-muted"><i>{{'The file size should not be more than'| translate}} {{setting?.FILE_UPLOAD_MAX}} {{'MB' | translate}}</i></small>
          <br>
            <small class="text-muted"><i>{{'File types allowed'| translate}}(<strong>{{setting?.FILE_UPLOAD_TYPES?.split(',')}}</strong>)</i></small>
          </div>
          <div class="form-group">
            <label class="form-label">{{'Tags'| translate}} <span class="text-red">*</span></label>
            <ng-select class="form-control nodropdown" [items]="[]" [ngModel]="tagslist" name="tags" required [isOpen]="false" [addTag]="true" [maxSelectedItems]="10" [multiple]="true"
              [selectOnTab]="true">
            </ng-select>
          </div>
          <div class="form-group">
            <label class="form-label">{{'Upload Image' | translate}}:</label>
            <app-image-upload [directTypes]="setting?.USER_FILE_UPLOAD_TYPES" [setting]="setting" (onImageUploaded)="onImageUploaded2($event)"></app-image-upload>
            <small class="text-muted"><i>{{'The file size should not be more than' | translate}} {{setting?.FILE_UPLOAD_MAX}}{{'MB' | translate}}</i></small>
            <br>
              <small class="text-muted"><i>{{'File types allowed'| translate}}(<strong>{{setting?.FILE_UPLOAD_TYPES?.split(',')}}</strong>)</i></small>
            </div>
            <div class="form-group">
              <div class="custom-controls-stacked d-md-flex">
                <label class="form-label mt-1 me-5">{{'Status' | translate}} : <span class="text-red">*</span></label>
                <label class="custom-control form-radio success me-4">
                  <input #status="ngModel" [class.is-invalid]="status.invalid && status.touched" required type="radio" class="custom-control-input " name="status" ngModel value="Published">
                  <span class="custom-control-label">{{'Publish' | translate}}</span>
                </label>
                <label class="custom-control form-radio success me-4">
                  <input #status="ngModel" [class.is-invalid]="status.invalid && status.touched" required type="radio" class="custom-control-input" name="status" ngModel value="UnPublished">
                  <span class="custom-control-label">{{'UnPublish' | translate}}</span>
                </label>
              </div>
              @if ((status.invalid && status.touched) || status.dirty) {
                <div>
                  @if (status.errors?.['required']) {
                    <small class="text-danger">{{'Status is required' | translate}}</small>
                  }
                </div>
              }
            </div>

            <div class="form-group">
              <label class="custom-control form-checkbox">
                <input type="checkbox" class="custom-control-input" name="privatemode" [ngModel]="false" id="privatemode">
                <span class="custom-control-label">{{'Privacy Mode' | translate}}</span>
              </label>
            </div>

          </div>
          <div class="card-footer clearfix">
            <div class="form-group float-end mb-0 btn-list">
              <a routerLink="/admin/knowledge/articles" class="btn btn-outline-danger">{{'Close' | translate}}</a>
              <button type="submit" [disabled]="createarticle.invalid || sendingResponse['createArticle']" class="btn btn-secondary">{{'Save' | translate}}@if (sendingResponse['createArticle']) {
                <i
                class="fa fa-spinner fa-spin mx-1"></i>
              }</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!--End Article Create-->