<template>
  <div class="d-flex mb-1 align-center w-100">
    <logo class="d-flex align-end clickable logo-large ml-1" @click="// noinspection JSIgnoredPromiseFromCall
    router.push({name: 'Order'})" :show-tag="true" max-height="32"/>
    <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"/>
      <toolbar-button tooltip="About" icon="mdi-information-outline" href="https://dexorder.trade/" target="dexorder"/>
    </div>
  </div>
</template>

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

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

</script>

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