<template>
  <v-text-field label='Amount' type="number" step="1" variant="outlined" aria-valuemin="0" min="0"
                v-model="os.amount" :rules="[validateRequired,validateAmount]" v-auto-select>
    <template v-slot:append-inner>
      <v-btn @click="os.amountIsTokenA=!os.amountIsTokenA" variant="outlined" class="mr-2">
        {{ os.amountIsTokenA ? os.tokenA.symbol : os.tokenB.symbol }}
      </v-btn>
      <v-btn :text="os.amountIsTotal ? 'total' : 'per tranche'" variant="outlined"
             @click="os.amountIsTotal=!os.amountIsTotal" class="total"/>
    </template>
  </v-text-field>
</template>

<script setup>
import {useOrderStore} from "@/store/store";
// noinspection ES6UnusedImports
import {vAutoSelect} from "@/misc.js";
import {validateAmount, validateRequired} from "@/validate.js";

const os = useOrderStore()


</script>

<style scoped lang="scss">
@use "src/styles/vars" as *;

</style>
