@if (type() === 'edit') {
<div>
  <app-language-redirection [path]="'/page'" [id]="id!" />
</div>
}
<form class="theme-form theme-form-2 mega-form" [formGroup]="form" (ngSubmit)="submit()">
  <div class="row">
    <div class="col-10">
      <app-form-fields [label]="'title'" [for]="'title'" [required]="true">
        <input
          class="form-control"
          type="text"
          placeholder="{{ 'enter_title' | translate }}"
          name="title"
          formControlName="title"
        />
        @if (form.controls['title'].touched && form.controls['title'].errors?.['required']) {
        <div class="invalid-feedback">{{ 'title_is_required' | translate }}</div>
        }
      </app-form-fields>
      <app-form-fields [label]="'slug'" [for]="'slug'">
        <input
          class="form-control"
          id="slug"
          type="text"
          [value]="(page$ | async)?.slug ? (page$ | async)?.slug : form.get('title')?.value?.split(' ')?.join('-')"
          placeholder="{{ 'enter_slug' | translate }}"
          formControlName="slug"
        />
      </app-form-fields>
      <app-form-fields [label]="'content'" [for]="'content'" [required]="false">
        <div class="custom-editor editor-checkbox">
          <div class="form-check form-switch">
            <input
              class="form-check-input"
              id="ckcheck"
              type="checkbox"
              name="isCodeEditor"
              [(ngModel)]="isCodeEditor"
              [ngModelOptions]="{standalone: true}"
            />
            <label for="ckcheck" class="cursor-pointer">
              <span class="edit">
                <i class="ri-edit-box-line"></i>
              </span>
              <span class="code">
                <i class="ri-code-s-slash-line"></i>
              </span>
            </label>
          </div>
          <div [ngClass]="!isCodeEditor ? 'd-none' : 'd-block'">
            <ngx-editor-menu [editor]="editor" />
            <ngx-editor
              [editor]="editor"
              [placeholder]="'Type here...'"
              formControlName="content"
              [(ngModel)]="html"
              (ngModelChange)="getData($event)"
            />
          </div>
          <div class="editor-textarea" [ngClass]="isCodeEditor ? 'd-none' : 'd-block'">
            <textarea
              class="form-control"
              id="content"
              placeholder="{{ 'enter_html_content' | translate }}"
              rows="3"
              [formControl]="textArea"
              (keyup)="getText($event)"
            ></textarea>
            <p class="mt-2">*Only accept html tags</p>
          </div>
        </div>
      </app-form-fields>
      <app-form-fields [label]="'meta_title'" [for]="'metatitle'" [required]="false">
        <input
          class="form-control"
          type="text"
          placeholder="{{'enter_meta_title' | translate }}"
          formControlName="meta_title"
        />
      </app-form-fields>
      <app-form-fields [label]="'meta_description'" [for]="'desc'" [required]="false">
        <textarea
          class="form-control"
          placeholder="{{ 'enter_meta_description' | translate }}"
          formControlName="meta_description"
          rows="3"
        ></textarea>
      </app-form-fields>
      <app-form-fields [label]="'meta_image'" [for]="'meta_image'" [required]="false">
        <app-image-upload
          [accept]="[mediaConfig.image]"
          [multipleImage]="false"
          [image]="(page$ | async)?.page_meta_image!"
          (selectedFiles)="selectMetaImage($event)"
        />
      </app-form-fields>
      <app-form-fields [label]="'Status'" [for]="'status'" [required]="false">
        <div class="form-check form-switch ps-0">
          <label class="switch">
            <input type="checkbox" id="status" formControlName="status" />
            <span class="switch-state"></span>
          </label>
        </div>
      </app-form-fields>
    </div>
  </div>
  <app-button [id]="'page_btn'">
    {{ (type() === 'create' ? 'save_page' : 'update_page') | translate }}
  </app-button>
</form>