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

<!--Seo -->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0">
      <h4 class="card-title">{{'SEO' | translate}}</h4>
    </div>
    <form enctype="multipart/form-data" #FormData="ngForm" (ngSubmit)="ChangeTheValues(FormData, 'seo')">
      <input type="hidden" name="seo_id" value="1">
      <div class="card-body">
        <div class="form-group">
          <label class="form-label">{{'Author' | translate}} <span class="text-red">*</span></label>
          <input  #authormodel="ngModel" [class.is-invalid]="authormodel.invalid && authormodel.touched" required type="text" ngModel="{{author}}" class="form-control "  name="author">
          @if ((authormodel.invalid && authormodel.touched) || authormodel.dirty) {
            <div>
              @if (authormodel.errors?.['required']) {
                <small class="text-danger">{{'Author is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <label class="form-label">{{'Description' | translate}} <span class="text-red">*</span></label>
          <input  #descriptionmodel="ngModel" [class.is-invalid]="descriptionmodel.invalid && descriptionmodel.touched" required type="text" ngModel="{{description}}" class="form-control" name="description">
          @if ((descriptionmodel.invalid && descriptionmodel.touched) || descriptionmodel.dirty) {
            <div>
              @if (descriptionmodel.errors?.['required']) {
                <small class="text-danger">{{'Description is required' | translate}}</small>
              }
            </div>
          }
        </div>
        <div class="form-group">
          <label class="form-label">{{'Keywords' | translate}} <span class="text-red">*</span></label>
          <ng-select  #keywordsField="ngModel" class="form-control" [class.is-invalid]="keywordsField.invalid && keywordsField.touched" required [items]="[]"
            [(ngModel)]="keywords"
            name="keywords"
            [addTag]="true"
            [multiple]="true"
            [selectOnTab]="true"
            [maxSelectedItems]="10"
            >
          </ng-select>
          @if ((keywordsField.invalid && keywordsField.touched) || keywordsField.dirty) {
            <div>
              @if (keywordsField.errors?.['required']) {
                <small class="text-danger">{{'Keywords is required' | translate}}</small>
              }
            </div>
          }
        </div>
      </div>
      <div class="card-footer">
        <div class="form-group float-end">
          <button [disabled]="FormData.invalid || sendingResponse['seo']" type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}@if (sendingResponse['seo']) {
            <i class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
        </div>
      </div>
    </form>
  </div>
</div>
<!--End Seo-->