<template>
  <v-dialog v-model="modelValue" max-width="600">
    <v-card title="Welcome to Dexorder!">
      <template #prepend><logo variant="icon" size="large"/></template>
      <v-card-text>
        <div class="d-flex">
          Dexorder powers up <div class="d-inline-flex align-self-baseline"><v-img src="/uniswap-logo.svg" width="1.25em" inline/></div>Uniswap with advanced ordering capabilities.
        </div>
        <p class="mt-2">
          Dexorder gives you a personal trading vault smart contract that trades its tokens with Uniswap only when
          your advanced order conditions are met.
        </p>
        <p class="mt-2">Level up your DeFi trading with:</p>
        <v-list density="compact">
          <v-list-item prepend-icon="mdi-clock-outline"><b>DCA / TWAP</b> <small>up to 1000 parts</small></v-list-item>
          <v-list-item prepend-icon="mdi-ray-vertex"><b>Limit Ladders</b> <small>capture ranges</small></v-list-item>
          <v-list-item prepend-icon="mdi-vector-line"><b>Diagonal Limits</b> <small>trade trends and channels</small></v-list-item>
          <v-list-item prepend-icon="mdi-chart-line"><b>Breakout Orders</b> <small>buy <i>above</i> a price level</small></v-list-item>
          <v-list-item prepend-icon="mdi-plus-minus"><b>Stop-loss</b> <small>coming soon</small></v-list-item>
<!--          <v-list-item prepend-icon="mdi-cancel">One-click Cancel All</v-list-item>-->
<!--
          <v-list-item>
            <template #prepend>
              <v-avatar image="/arbitrum-logo.svg" size="1.5em" class="mr-4"/>
            </template>
            <template #default>
              <b>Arbitrum One</b> support <small>fast and cheap</small>
            </template>
          </v-list-item>
-->
          <v-list-item>
            <template #prepend>
              <v-avatar image="/uniswap-logo.svg" size="1.5em" class="mr-4" style="background-color: white"/>
            </template>
            <template #default>
              <b>Uniswap</b> v3 support <small>high liquidity</small>
            </template>
          </v-list-item>
        </v-list>
      </v-card-text>
      <v-card-actions class="justify-center mb-9">
<!--        <v-btn variant="text" @click="learnMore" class="justify-end">Learn More</v-btn>-->
        <v-btn variant="tonal" color="primary" @click="tryIt" class="justify-center">Try It!</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

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

const modelValue = defineModel()

function tryIt() {
  track('tutorial_begin')
  modelValue.value = false
}

function learnMore() {
  track('learn-more')
  window.open('https://dexorder.com/introduction.html', 'dexorderwww')
  modelValue.value = false
}

</script>

<style scoped lang="scss">
small {
  margin-left: 1em;
}
</style>