<p-sidebar
  [visible]="true"
  position="right"
  [style]="{ width: 'min-content', minWidth: '500px' }"
  (onHide)="onClose.emit()"
  (visibleChange)="!$event ? onClose.emit() : undefined">
  <ng-template pTemplate="headless">
    <div class="form-page">
      <div class="form-page-header divider">
        <ng-container
          *ngTemplateOutlet="
            formPageHeader;
            context: { $implicit: isUpdate }
          "></ng-container>
        <div class="flex gap-2 items-center">
          <p-button
            class="btn"
            icon="pi pi-save"
            (click)="save()"
            pTooltip="{{ 'common.save' | translate }}"
            tooltipPosition="left"
            [disabled]="formGroup.invalid"></p-button>
          <p-button
            class="icon-btn btn"
            icon="pi pi-times"
            (click)="onClose.emit()"
            pTooltip="{{ 'common.close' | translate }}"
            tooltipPosition="left"></p-button>
        </div>
      </div>
      <form [formGroup]="formGroup" class="form-page-content">
        <ng-container *ngTemplateOutlet="formPageContent"></ng-container>
      </form>
    </div>
  </ng-template>
</p-sidebar>
