<section class="content">
  <div class="container-fluid">
    <div class="row align-items-center">
      <!-- Left-hand side: Title -->
      <div class="col-md-6 mb-2">
        <span *ngIf="!isEditMode" class="mb-0 page-title">
          {{ "ADD_PAGE_HELPER" | translate }}
          <app-page-help-text code="PAGE_HELPERS"></app-page-help-text>
        </span>
        <span *ngIf="isEditMode" class="mb-0 page-title">
          {{ "EDIT_PAGE_HELPER" | translate }}
          <app-page-help-text code="PAGE_HELPERS"></app-page-help-text>
        </span>
      </div>
    </div>
    <div class="card">
      <div class="body">
        <form [formGroup]="pageHelperForm">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label>{{ "NAME" | translate }}</label>
                <input formControlName="name" class="form-control" type="text" />
                <div *ngIf="
                    pageHelperForm.get('name').touched &&
                    pageHelperForm.get('name').errors
                  ">
                  <div class="text-danger" *ngIf="pageHelperForm.get('name').errors?.required">
                    {{ "NAME_IS_REQUIRED" | translate }}
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label class="font-weight-bold">
                  {{ "DOCUMENT_SUMMARY" | translate }}
                </label>
                <div class="NgxEditor__Wrapper">
                  <ngx-editor-menu [editor]="editor" [toolbar]="toolbar">
                  </ngx-editor-menu>
                  <ngx-editor placeholder="{{'TYPE_HERE' | translate}}" [editor]="editor" formControlName="description">
                  </ngx-editor>
                </div>
                <div *ngIf="
                    pageHelperForm.get('description').touched &&
                    pageHelperForm.get('description').errors
                  ">
                  <div class="text-danger" *ngIf="pageHelperForm.get('description').errors?.required">
                    {{ "DESCRIPTION_IS_REQUIRED" | translate }}
                  </div>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="m-top-10 col-md-12">
                <ng-container *ngIf="isEditMode">
                  <button class="btn btn-success btn-sm me-2" (click)="saveUser()" cdkFocusInitial>
                    <i-feather name="save" class="small-icon"></i-feather> {{'SAVE' | translate}}
                  </button>
                </ng-container>
                <ng-container *ngIf="!isEditMode">
                  <button class="btn btn-success btn-sm me-2" (click)="saveUser()" cdkFocusInitial>
                    <i-feather name="save" class="small-icon"></i-feather> {{'SAVE' | translate}}
                  </button>
                </ng-container>
                <button type="button" class="btn btn-danger btn-sm" [routerLink]="['/page-helper']">
                  <i-feather name="x-circle" class="small-icon"></i-feather> {{'CANCEL' | translate}}
                </button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>