<div class="modal-content1">
    <div class="modal-header">
        <div class="d-flex w-100 align-items-center justify-content-between">
            <div class="col-md-8 col">
                <h4 class="modal-title">
                    {{'PAGE' | translate}}
                </h4>
            </div>
            <div class="col-sm-auto ml-auto col-auto">
                <button type="button" class="close" (click)="onNoClick()" data-dismiss="modal">
                    <i-feather name="x-circle" class="small-icon"></i-feather>
                </button>
            </div>
        </div>
    </div>
    <form [formGroup]="pageForm">
        <div class="modal-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label class="text-danger" for="pageName">{{'NAME' | translate}} *</label>
                        <input formControlName="name" type="text" class="form-control" id="pageName">
                        <div *ngIf="pageForm.get('name').touched && pageForm.get('name').errors">
                            <div class="text-danger"
                                *ngIf="pageForm.get('name').touched && pageForm.get('name').errors?.['required']">
                                {{'PAGE_NAME_IS_REQUIRED' | translate}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label class="text-danger" for="order"> {{'ORDER_NUMBER' | translate}}*</label>
                        <input formControlName="order" type="number" class="form-control" id="order">
                        <div *ngIf="pageForm.get('order').touched && pageForm.get('order').errors">
                            <div class="text-danger"
                                *ngIf="pageForm.get('order').touched && pageForm.get('order').errors?.['required']">
                                {{'ORDER_IS_REQUIRED' | translate}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <div class="form-row w-100 justify-content-end">
                <div class="col-md-auto col-auto">
                    <ng-container *ngIf="!isEdit">
                        <button class="btn btn-success btn-sm m-right-10" (click)="savePage()" cdkFocusInitial>
                            <i-feather name="save" class="small-icon"></i-feather> {{'SAVE' | translate}}</button>
                    </ng-container>
                    <ng-container *ngIf="isEdit">
                        <button class="btn btn-success btn-sm m-right-10" (click)="savePage()" cdkFocusInitial>
                            <i-feather name="save" class="small-icon"></i-feather> {{'SAVE' | translate}}</button>
                    </ng-container>
                    <button class="btn btn-danger btn-sm" (click)="onNoClick()">
                        <i-feather name="x-circle" class="small-icon"></i-feather>
                        {{'CANCEL' | translate}}</button>
                </div>
            </div>
        </div>
    </form>
</div>