<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="!emailTemplate" class="mb-0 page-title">{{'ADD_EMAIL_TEMPLATE' | translate}}</span>
        <span *ngIf="emailTemplate" class="mb-0 page-title">{{'EDIT_EMAIL_TEMPLATE' | translate}}</span>
        <app-page-help-text [code]="'MANAGE_EMAIL_TEMPLATE'"></app-page-help-text>
      </div>
    </div>
    <div class="card">
      <div class="body">
        <form [formGroup]="emailTemplateForm">
          <div class="box box-primary">
            <div class="box-body">
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group ">
                    <label> {{'NAME' | translate }}</label>
                    <input formControlName="name" class="form-control" type="text">
                    <div *ngIf="emailTemplateForm.get('name').dirty && emailTemplateForm.get('name').errors">
                      <div class="text-danger" *ngIf="emailTemplateForm.get('name').hasError('required')">
                        {{'EMAIL_TEMPLATE_NAME_IS_REQUIRED' | translate }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group ">
                    <label>{{'SUBJECT' | translate }}</label>
                    <input formControlName="subject" class="form-control" type="text">
                    <div *ngIf="emailTemplateForm.get('subject').dirty && emailTemplateForm.get('subject').errors">
                      <div class="text-danger" *ngIf="emailTemplateForm.get('subject').hasError('required')">
                        {{'SUBJECT_IS_REQUIRED' | translate }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group ">
                    <label>
                      {{'BODY' | translate }}
                      <span class="text-danger">
                        {{'WORD_MUST_BE_START_AND_END_WITH' | translate }}
                      </span>
                    </label>
                    <div class="NgxEditor__Wrapper">
                      <ngx-editor-menu [editor]="editor" [toolbar]="toolbar">
                      </ngx-editor-menu>
                      <ngx-editor placeholder="{{'TYPE_HERE' | translate}}" [editor]="editor" formControlName="body">
                      </ngx-editor>
                    </div>
                    <div *ngIf="emailTemplateForm.get('body').dirty && emailTemplateForm.get('body').errors">
                      <div class="text-danger" *ngIf="emailTemplateForm.get('body').hasError('required')">
                        {{'BODY_IS_REQUIRED' | translate }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="mt-2 col-md-12">
                  <ng-container *ngIf="emailTemplate">
                    <button class="btn btn-success btn-sm me-2" (click)="addUpdateEmailTemplate()" cdkFocusInitial>
                      <i-feather name="save" class="small-icon"></i-feather>
                      {{'SAVE' | translate }}
                    </button>
                  </ng-container>
                  <ng-container *ngIf="!emailTemplate">
                    <button class="btn btn-success btn-sm me-2" (click)="addUpdateEmailTemplate()" 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]="['/email-template']">
                    <i-feather name="x-circle" class="small-icon"></i-feather>
                    {{'CANCEL' | translate }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>