<div class="d-flex justify-content-center">
  <div class="col-8">
    <form name="editForm" novalidate (ngSubmit)="save()" [formGroup]="editForm">
      <h2 id="jhi-content-page-heading" data-cy="ContentPageCreateUpdateHeading" jhiTranslate="resilientApp.contentPage.home.editLabel">
        Editar Unit Type
      </h2>

      <div>
        <jhi-alert-error></jhi-alert-error>
        <div class="mb-3">
          <label class="form-label" for="field_slug" jhiTranslate="resilientApp.contentPage.slug">Slug</label>
          <span class="form-control" [jhiTranslate]="'resilientApp.ContentPageType.' + (contentPage!.slug ?? 'null')">{{
            { null: '', HOME_ANONYMOUS: 'Home Anonymous', HOME_AUTHENTICATED: 'Home Authenticated' }[editForm.get('slug')!.value ?? 'null']
          }}</span>
        </div>
        <div class="mb-3">
          <label class="form-label" for="field_title" jhiTranslate="resilientApp.contentPage.title">Name</label>
          <input type="text" class="form-control" name="title" id="field_title" data-cy="title" formControlName="title" />
          @if (editForm.get('title')!.invalid && (editForm.get('title')!.dirty || editForm.get('title')!.touched)) {
            <div>
              @if (editForm.get('title')?.errors?.required) {
                <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
              }
            </div>
          }
        </div>
        <div class="mb-3 my-quill-editor">
          <label class="form-label" for="field_content" jhiTranslate="resilientApp.contentPage.content">Conteúdo</label>
          <!-- <quill-editor formControlName="content" (onEditorCreated)="onEditorReady($event)"></quill-editor>  -->
          <editor formControlName="content" [init]="editorConfig"></editor> <!-- [(ngModel)]="content" -->

          @if (editForm.get('content')!.invalid && (editForm.get('content')!.dirty || editForm.get('content')!.touched)) {
            <div>
              @if (editForm.get('content')?.errors?.required) {
                <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
              }
            </div>
          }
        </div>
      </div>

      <div>
        <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" (click)="previousState()">
          <fa-icon icon="ban"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancelar</span>
        </button>

        @if (editForm.controls.id.value !== null) {
        }
        <button
          *ngIf="(editForm.controls.id.value!=null && hasUpdatePermission(Resources.CONTENT_PAGE))
                  ||
                 (editForm.controls.id.value==null && hasCreatePermission(Resources.CONTENT_PAGE))"
          type="submit"
          id="save-entity"
          data-cy="entityCreateSaveButton"
          [disabled]="editForm.invalid || isSaving"
          class="btn btn-primary"
        >
          <fa-icon icon="save"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Guardar</span>
        </button>
      </div>
    </form>
  </div>
</div>
