<div class="d-flex">
  <span mat-dialog-title class="dialog-title">{{'MANAGE_DOCUMENT_CATEGORY' | translate}}
    <app-page-help-text [code]="'DOCUMENT_CATEGORIES'"></app-page-help-text></span>
</div>
<mat-dialog-content>
  <form name="form" (ngSubmit)="categoryForm.form.valid && saveCategory()" #categoryForm="ngForm" novalidate>
    <div class="row">
      <div class="col-sm-12">
        <label class="form-label" for="categoryName">{{'NAME' | translate}}</label>
        <input required [(ngModel)]="data.name" type="text" name="name" #name="ngModel" class="form-control"
          id="categoryName">
        <div *ngIf="name.invalid && (name.dirty || name.touched)">
          <div class="text-danger" *ngIf="name?.hasError('required')">{{'CATEGORY_NAME_IS_REQUIRED' | translate}}
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <label class="form-label" for="description">{{'DESCRIPTION' | translate}}</label>
        <textarea [(ngModel)]="data.description" name="description" type="text" class="form-control">
            </textarea>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 mt-3">
        <ng-container *ngIf="!isEdit">
          <button type="submit" *hasClaim="'DOCUMENT_CATEGORY_MANAGE_DOCUMENT_CATEGORY'"
            class="btn btn-success btn-sm m-r-10" cdkFocusInitial><i-feather name="save" class="small-icon"></i-feather>
            {{'SAVE' |
            translate}}</button>
        </ng-container>
        <ng-container *ngIf="isEdit">
          <button type="submit" *hasClaim="'DOCUMENT_CATEGORY_MANAGE_DOCUMENT_CATEGORY'"
            class="btn btn-success btn-sm m-r-10" cdkFocusInitial><i-feather name="save" class="small-icon"></i-feather>
            {{'SAVE' |
            translate}}</button>
        </ng-container>
        <button type="button" class="btn btn-danger btn-sm" (click)="onCancel()"> <i-feather name="x-circle"
            class="small-icon"></i-feather>
          {{'CANCEL' | translate}}
        </button>
      </div>
    </div>
  </form>
</mat-dialog-content>