<script setup>

import SelectCustomerFormPOS from "@/components/forms/department/pos/SelectCustomerFormPOS.vue";
import PosLastScannedLicensePlates from "@/components/displays/department/pos/PosLastScannedLicensePlates.vue";
import NextStep from "@/components/forms/department/pos/buttons/NextStep.vue";
import NextStepError from "@/components/forms/department/pos/error/NextStepError.vue";
import PosNotes from "@/components/displays/department/pos/PosNotes.vue";
import PosSelectedCustomer from "@/components/displays/department/pos/PosSelectedCustomer.vue";
import Cancel from "@/components/forms/department/pos/buttons/Cancel.vue";
import { clearCache } from "@/components/shop/POSDepartmentProcess.vue";

// Clear cache
clearCache();
</script>

<template>
  <div>
    <div class="columns">
      <!-- Choose customer -->
      <div class="column is-8-desktop">
        <SelectCustomerFormPOS/>
      </div>
      <!-- Last seen License Plates in department -->
      <div class="column is-4-desktop">
        <PosSelectedCustomer />
        <PosLastScannedLicensePlates class="my-3"/>
        <NextStepError class="is-fullwidth" />
        <div class="buttons">
          <NextStep class="is-fullwidth" tabindex="6"/>
          <Cancel class="is-fullwidth" tabindex="7"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>