<div class="flex flex-col gap-6">
  <app-card-data cardTitle="اطلاعات پایانه‌ فروش" [editable]="true" [(editMode)]="editMode">
    <ng-template #moreActions>
      <p-button type="button" variant="outlined" size="small" (onClick)="toPosLanding()"> ورود به پایانه </p-button>
    </ng-template>
    <div class="flex flex-col gap-4">
      <div class="listKeyValue">
        <app-key-value label="عنوان" [value]="pos()?.name" />
        <app-key-value label="نوع پایانه" [value]="pos()?.pos_type" />
        <app-key-value label="شماره سریال" [value]="pos()?.serial_number" />
        <app-key-value label="نوع دستگاه" [value]="pos()?.device?.name" />
        <app-key-value label="مدل دستگاه" [value]="pos()?.model" />
        <app-key-value label="ارایه‌دهنده" [value]="pos()?.provider?.name" />
      </div>
    </div>
  </app-card-data>

  <consumer-pos-form
    [(visible)]="editMode"
    [editMode]="true"
    [posId]="posId()"
    [initialValues]="pos() || undefined"
    (onSubmit)="getData()"
  />
</div>
