<div class="d-flex">
  <span mat-dialog-title class="dialog-title">{{'MANAGE_PAGE' | translate}}</span>
  <button mat-icon-button class="ms-auto" (click)="onCancel()">
    <mat-icon class="close-icon" color="warn">close</mat-icon>
  </button>
</div>
<mat-dialog-content>
  <form name="form" (ngSubmit)="pageForm.form.valid && savePage()" #pageForm="ngForm" novalidate>
  <div>
    <div class="row">
      <div class="col-sm mb-2">
        <div class="form-group">
          <label  class="form-label" for="name">{{'KEY' | translate}}</label>
          <input  required [(ngModel)]="data.name" name="name" id="name" [disabled]="isEdit" type="text" #name="ngModel" class="form-control">
          <div *ngIf="name.invalid && (name.dirty || name.touched)">
            <div class="text-danger" *ngIf="name?.hasError('required')">{{'PAGE_NAME_IS_REQUIRED' | translate}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
       <div class="col-sm">
        <div class="form-group">
          <label class="form-label" for="url">{{'PAGE_URL_DIALOG' | translate}}</label>
          <input required [(ngModel)]="data.url" name="url"  id="url" type="text" #url="ngModel" class="form-control">
          <div *ngIf="url.invalid && (url.dirty || url.touched)">
            <div class="text-danger" *ngIf="url?.hasError('required')">{{'URL_IS_REQUIRED' | translate}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div mat-dialog-actions>
    <ng-container *ngIf="!isEdit">
      <button  type="button" *hasClaim="'page_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="button" *hasClaim="'page_edit'" class="btn btn-success btn-sm me-2"  cdkFocusInitial><i
          class="fas fa-save"></i> {{'SAVE' | translate}}
      </button>
    </ng-container>
    <button class="btn btn-danger btn-sm" (click)="onCancel()"><i class="fas fa-times-circle"></i>
      {{'CANCEL' | translate}}
    </button>
  </div>
  </form>
</mat-dialog-content>
