<admin-page-header [title]="'Email Template Edit'"></admin-page-header>

<div class="row">
  <!-- Email Template Edit -->
  <div class="col-xl-8 col-lg-12 col-md-12">
    <div class="card ">
      <div class="card-header border-0 justify-content-between">
        <h4 class="card-title">{{'Email Template' | translate}}</h4>
      </div>
      <div class="card-body">
        <form #editEmailTemplate="ngForm" (ngSubmit)="emailTemplateSubmit(editEmailTemplate, 'editEmailTemp')">
          <div class="row">
            <div class="col-sm-12 col-md-12">
              <div class="form-group">
                <label class="form-label">{{'Email Subject' | translate}} <span class="text-red">*</span></label>
                <input required type="text" class="form-control" name="subject" [value]="template.subject" [ngModel]="template.subject" #emailsubject="ngModel"
                  [class.is-invalid]="emailsubject.invalid && emailsubject.touched">
                @if ((emailsubject.invalid && emailsubject.touched) || emailsubject.dirty) {
                  <div>
                    @if (emailsubject.errors?.['required']) {
                      <small class="text-danger">{{'Email Subject is required' | translate}}</small>
                    }
                  </div>
                }
              </div>
            </div>
            <div class="col-sm-12 col-md-12">
              <div class="form-group">
                <label class="form-label">{{'Email Body' | translate}} <span class="text-red">*</span></label>

                <angular-editor [config]="toolbar" #emailBody="ngModel" [(ngModel)]="template.body" [class.is-invalid]="emailBody.invalid && emailBody.touched" required class="form-control"
                [placeholder]="'Enter text here' | translate" name="body"></angular-editor>

                @if (emailBody.errors?.['maxLength']) {
                  <div class="limit-error">
                    {{ emailBody.errors?.['maxLength'].actualLength }}/{{ emailBody.errors?.['maxLength'].maxLength }} {{' exceeded the limit' | translate}}
                  </div>
                }
                @if ((emailBody.invalid && emailBody.touched) || emailBody.dirty || emailBody.errors?.['minLength']) {
                  <div>
                    @if (emailBody.errors?.['required']) {
                      <small class="text-danger">{{'Email Body is required' | translate}}</small>
                    }
                  </div>
                }

              </div>
            </div>
            <div class="col-md-12 card-footer ">
              <div class="form-group float-end mb-0">

                <button [disabled]="editEmailTemplate.invalid || sendingResponse['editEmailTemp']" type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}@if (sendingResponse['editEmailTemp']) {
                  <i
                  class="fa fa-spinner fa-spin mx-1"></i>
                }</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  @if (template.variables_used && template.variables_used.length) {
    <div class="col-xl-4 col-lg-12 col-md-12">
      <div class="card">
        <div class="card-header border-0">
          <h4 class="card-title">{{'Email Template Fields' | translate}}</h4>
        </div>
        <div class="card-body">
          <div class="row">
            @for (list of template.variables_used.split(','); track list) {
              <div class="col-md-6 col-sm-12 p-1">
                <div class="border br-3 p-2">
                  <div class="fs-14 font-weight-semibold"> &#123;&#123; '&#123;&#123; ' + list + ' &#125;&#125;' &#125;&#125;</div>
                </div>
              </div>
            }
            @empty{
            <div class="fs-14 font-weight-semibold"> No fields Available</div>
          }
        </div>
      </div>
    </div>
  </div>
}
<!-- Email Template Edit -->
</div>