<p-dialog [visible]="true" [closable]="true" (onHide)="cancelled.emit()" [header]="'POS.OPEN_SESSION' | translate" [style]="{width: '420px'}" [modal]="true">
  <div class="form-grid">
    <label>{{ 'POS.TERMINAL' | translate }}</label>
    <p-select [options]="terminals()" optionLabel="name" optionValue="id" [(ngModel)]="selectedTerminalId" [placeholder]="'POS.SELECT_TERMINAL' | translate" [style]="{width: '100%'}" />

    <label>{{ 'POS.OPENING_BALANCE' | translate }}</label>
    <p-inputNumber [(ngModel)]="openingBalance" [min]="0" mode="decimal" [minFractionDigits]="2" [style]="{width: '100%'}" />
  </div>

  <ng-template pTemplate="footer">
    <button pButton [label]="'POS.OPEN' | translate" icon="pi pi-play" [loading]="loading()" [disabled]="!selectedTerminalId()" (click)="open()"></button>
  </ng-template>
</p-dialog>
