<template>
  <div class="d-inline-flex">
    <btn icon="mdi-plus" color="green" @click="show=true">New Order</btn>
    <v-dialog v-model="show" width="auto">
      <v-card>
        <v-card-item class="d-flex">

          <v-card variant="elevated"
                  prepend-icon="mdi-clock-outline" title="DCA"
                  subtitle="Spread order across time"
                  text="The DCA order gives you a Dollar Cost Average (DCA) or a Time Weighted Average
                   Price (TWAP) by splitting the order amount into multiple parts executed at regular time intervals.">
            <v-card-actions><btn icon="mdi-clock-outline" text="DCA" @click="$router.push('/twap')"/></v-card-actions>
          </v-card>

          <v-card variant="elevated"
                  prepend-icon="mdi-menu" title="Ladder"
                  subtitle="Multiple price levels"
                  text="The Ladder order helps catch wicks and other reversals by splitting the order amount across
                   multiple price levels. The amounts may be weighted towards one end of the ladder, to either have
                   a larger filled amount on a shallow reversal, or a larger amount at a better price that might not
                   be reached.">
            <v-card-actions><btn icon="mdi-menu" text="Ladder" @click="$router.push('/ladder')"/></v-card-actions>
          </v-card>

        </v-card-item>
        <v-card-item class="mb-3"><v-btn variant="outlined" prepend-icon="mdi-cancel" color="red" @click="show=false">Cancel</v-btn></v-card-item>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup>
import {useStore} from "@/store/store";
import {ref} from "vue";
import Btn from "@/components/Btn.vue";

const s = useStore()
const show = ref(false)

</script>

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

.v-card .v-card {
  width: 20em;
  margin: 2em;
}

</style>
