<template>
  <div class="d-flex mb-1 align-center w-100">
    <logo class="d-flex align-end clickable logo-large" @click="nav('Order')" :show-tag="true"/>
    <slot/>
    <div class="ml-auto d-flex align-center">
      <span class="title mr-4">{{title}}</span>
      <toolbar-button tooltip="Order" icon="mdi-chart-timeline-variant" route="Order"/>
      <!-- mdi-currency-btc mdi-currency-eth mdi-bank-outline mdi-safe-square-outline -->
      <toolbar-button tooltip="Assets" icon="mdi-currency-btc" route="Assets"/>
      <!-- mdi-format-list-checks mdi-format-list-bulleted-square -->
      <toolbar-button tooltip="Status" icon="mdi-format-list-checks" route="Status"/>
      <v-btn variant="text" icon="mdi-information-outline" text="Info" @click="showCorp"></v-btn>
    </div>
  </div>
</template>

<script setup>
import ToolbarButton from "@/components/chart/ToolbarButton.vue";
import Logo from "@/components/Logo.vue";
import {nav} from "@/misc.js";

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

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

</script>

<style scoped lang="scss">
</style>