<p-dialog [(visible)]="showProcedureScopeModal" [modal]="true" [style]="{width: '40vw'}" [baseZIndex]="10000"
[draggable]="false" [resizable]="false" [contentStyle]="{'overflow':'visible'}" (onHide)="cancelProcedureScope()">

  <ng-template pTemplate="header">
    <div class="p-d-flex p-flex-column p-flex-md-row p-jc-md-between table-header" style="font-size: 1.5rem">
      {{ 'Set procedure scope' | translate }}
    </div>
  </ng-template>
  <ng-template pTemplate="body">
    <span class="p-float-label">
      <p-dropdown [autoDisplayFirst]="false" id="procedure-scope" [options]="procedureScopeTypes" [(ngModel)]="procedureScopeType" [style]="{width: '100%'}" optionLabel="name">
      </p-dropdown>
      <label for="procedure-scope">{{ 'Type *' | translate }}</label>
    </span>
    <small *ngIf="!procedureScopeType" class="p-invalid">{{ 'Type field is required' | translate }}</small>
  </ng-template>

  <ng-template pTemplate="footer">
    <p-button (click)="cancelProcedureScope()">{{ 'Cancel' | translate }}</p-button>
    <p-button (click)="saveProcedureScope()">{{ 'Save' | translate }}</p-button>
  </ng-template>
</p-dialog>