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

<!--Article Edit-->
<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">{{'Edit Article' | translate}}</h4>
    </div>
    <form #editarticle="ngForm" (ngSubmit)="editArticle(editarticle, 'editArticle')">

      <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" ngModel="{{article?.title}}" name="title"
            value="{{article?.title}}">
          @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 class="form-control" #category="ngModel" [class.is-invalid]="category.invalid && category.touched" required [items]="allcategories" #select
            [placeholder]="'Select category' | translate" [virtualScroll]="true" bindLabel="name" [multiple]="false" [searchable]="true" dropdownPosition="auto" bindValue="id" name="category" [loading]="!allcategories" [(ngModel)]="categoryId"  (load)="categorychange($event)" (change)="categorychange($event)">
            <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" >
            <label class="form-label mb-0 mt-2">{{'Subcategory' | translate}}</label>
            <ng-select class="form-control" [items]="hassubcategoriess" #subcategoriess [placeholder]="'Select SubCategory' | translate" [virtualScroll]="true" bindLabel="subcategoryname" [multiple]="false" [loading]="!hassubcategoriess" [searchable]="true" dropdownPosition="auto" bindValue="id" name="subscategory" [ngModel]="subcategoryId">
              <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" #description="ngModel" [ngModel]="article?.message" [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)" [media]="[article]" ></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  name="tags" [items]="tagslist" [loading]="!tagslist" class="form-control nodropdown" [placeholder]="'Tags' | translate" [addTag]="addTagFn" required [hideSelected]="true" [multiple]="true" bindLabel="name" [ngModel]="tagslist" [isOpen]="false" [maxSelectedItems]="10">
            </ng-select>
          </div>
          <ng-select class="form-control" #category="ngModel" [class.is-invalid]="category.invalid && category.touched" required [items]="allcategories" #select
            [placeholder]="'Select category' | translate" [virtualScroll]="true" bindLabel="name" [multiple]="false" [searchable]="true" dropdownPosition="auto" bindValue="id" name="category" [loading]="!allcategories" [(ngModel)]="categoryId"  (load)="categorychange($event)" (change)="categorychange($event)">
            <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 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" [ngModel]="article.status" name="status"
                  value="Published" [checked]="article.status == 'Published' ? true : false">
                <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" [ngModel]="article.status" name="status"
                  value="UnPublished" [checked]="article.status == 'UnPublished' ? true : false">
                <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" [ngModel]="article.privatemode" class="custom-control-input" name="privatemode" id="privatemode" [checked]="article.privatemode == '1' ? true : false">
              <span class="custom-control-label">{{'Privacy Mode' | translate}}</span>
            </label>
          </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)" [media]="media"></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>
        <div class="card-footer clearfix">
          <div class="form-group mb-0 float-end">
            <a routerLink="/admin/knowledge/articles" class="btn btn-outline-danger mx-2">{{'Close' | translate}}</a>
            <button type="submit" [disabled]="editarticle.invalid || sendingResponse['editArticle']" class="btn btn-secondary">{{'Update' | translate}}@if (sendingResponse['editArticle']) {
              <i
              class="fa fa-spinner fa-spin mx-1"></i>
            }
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<!--End Article Edit-->