<template>
  <div class="d-flex mb-1 align-center w-100">
    <div class="d-flex align-end clickable" @click="$router.push('/order')">
      <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
      <span class="logo">dexorder</span>
      <alpha class="pr-6"/>
    </div>
<!--
    <div class="d-flex align-center">
    </div>
-->
    <slot/>
    <div class="ml-auto d-flex align-center">
<!--      <v-icon :icon="icon" size="small"/>&nbsp;-->
      <span class="title mr-4">{{title}}</span>
      <toolbar-button tooltip="Order" icon="mdi-chart-timeline-variant" path="/order"/>
      <!-- mdi-currency-btc mdi-currency-eth mdi-bank-outline mdi-safe-square-outline -->
      <toolbar-button tooltip="Assets" icon="mdi-currency-btc" path="/assets"/>
      <!-- mdi-format-list-checks mdi-format-list-bulleted-square -->
      <toolbar-button tooltip="Status" icon="mdi-format-list-checks" path="/status"/>
      <v-btn variant="text" icon="mdi-help-circle-outline" text="Info" @click="showCorp"></v-btn>
    </div>
  </div>
</template>

<script setup>
import {useStore} from "@/store/store.js";
import {useChartOrderStore} from "@/orderbuild.js";
import {useTheme} from "vuetify";
import ToolbarButton from "@/components/chart/ToolbarButton.vue";
import Alpha from "@/components/Alpha.vue";

const props = defineProps(['title', 'icon'])

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

const theme = useTheme().current

function showCorp() {
  window.open('https://dexorder.trade/', 'dexorder')
}

</script>

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