 <div class="d-flex">
  <span mat-dialog-title class="dialog-title">{{'MANAGE_ACTION' | translate}}</span>
  <button mat-icon-button class="ms-auto" (click)="onCancel()">
    <mat-icon class="close-icon" color="warn">close</mat-icon>
  </button>
</div>
<div mat-dialog-content>
 <form name="form" (ngSubmit)="actionForm.form.valid && saveAction()" #actionForm="ngForm" novalidate>
    <div class="row">
      <div class="col-sm-12">
        <label class="form-label" for="actionName">{{'ACTION_NAME' | translate}}</label>
        <input required [(ngModel)]="data.name" type="text" name="name" #name="ngModel" class="form-control"
          id="actionName">
        <div *ngIf="name.invalid && (name.dirty || name.touched)">
          <div class="text-danger" *ngIf="name?.hasError('required')">{{'ACTION_NAME_IS_REQUIRED' | translate}}</div>
        </div>
      </div>
    </div>
  <div mat-dialog-actions>
    <ng-container *ngIf="!isEdit">
      <button type="submit" *hasClaim="'action_add'"
        class="btn btn-success btn-sm me-2" cdkFocusInitial><i class="fas fa-save"></i> {{'SAVE' |
        translate}}</button>
    </ng-container>
    <ng-container *ngIf="isEdit">
      <button type="submit" *hasClaim="'action_edit'"
        class="btn btn-success btn-sm me-2" cdkFocusInitial><i class="far fa-save"></i> {{'SAVE' |
        translate}}</button>
    </ng-container>
    <button type="button" class="btn btn-danger btn-sm" (click)="onCancel()"> <i class="fas fa-times-circle"></i>
      {{'CANCEL' | translate}}</button>
  </div>
 </form>
</div>
