<template>
  <div class="d-flex mb-1">
    <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
    <span class="logo">dexorder</span>
    <v-chip text="ALPHA" size='x-small' color="red" class="align-self-start pr-6" variant="text"/>
    <slot/>
    <div class="w-100 d-flex justify-end">
      <v-btn variant="text" icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="$router.push('/vault')"></v-btn>
      <v-btn variant="text" icon="mdi-information-outline" text="Order Status" @click="$router.push('/orders')"></v-btn>
    </div>
  </div>
</template>

<script setup>
import {useStore} from "@/store/store.js";
import {useChartOrderStore} from "@/orderbuild.js";
import {chart, drawShape} from "@/charts/chart.js";
import {timestamp} from "@/misc.js";
import {ShapeType} from "@/charts/shape.js";
import {computed, ref} from "vue";
import {useTheme} from "vuetify";

const s = useStore()
const co = useChartOrderStore()

const showCancel = ref(false)

const theme = useTheme().current

function cancelOrder() {
  showCancel.value = true
}


function placeOrder() {

}

</script>

<style scoped lang="scss">
.arrow {
  font-size: 22px;
}
</style>