<template lang='jade'>
  .contain.py2
    .text(v-html='text')
    .hr
    h3 Market watchers
    .text(v-if='!watchers.length')
      p You are currently not watching any markets.
    table.full.clickable(v-if='watchers.length')
      thead
        tr
          th exchange
          th currency
          th asset
          th started at
          th last update
          th duration
      tbody
        tr.clickable(v-for='bluebot in watchers', v-on:click='$router.push({path: `live-bluebots/watcher/${bluebot.id}`})')
          td {{ bluebot.watch.exchange }}
          td {{ bluebot.watch.currency }}
          td {{ bluebot.watch.asset }}
          td 
            template(v-if='bluebot.firstCandle') {{ fmt(bluebot.firstCandle.start) }}
          td
            template(v-if='bluebot.lastCandle') {{ fmt(bluebot.lastCandle.start) }}
          td
            template(v-if='bluebot.firstCandle && bluebot.lastCandle') {{ timespan(bluebot.lastCandle.start, bluebot.firstCandle.start) }}
    h3 Strat runners
    .text(v-if='!stratrunners.length')
      p You are currently not running any strategies.
    table.full(v-if='stratrunners.length')
      thead
        tr
          th exchange
          th currency
          th asset
          th last update
          th duration
          th strategy
          th profit
      tbody
        tr.clickable(v-for='bluebot in stratrunners', v-on:click='$router.push({path: `live-bluebots/stratrunner/${bluebot.id}`})')
          td {{ bluebot.watch.exchange }}
          td {{ bluebot.watch.currency }}
          td {{ bluebot.watch.asset }}
          td
            template(v-if='bluebot.lastCandle') {{ fmt(bluebot.lastCandle.start) }}
          td
            template(v-if='bluebot.firstCandle && bluebot.lastCandle') {{ timespan(bluebot.lastCandle.start, bluebot.firstCandle.start) }}
          td {{ bluebot.strat.name }}
          td
            template(v-if='!bluebot.report') 0
            template(v-if='bluebot.report') {{ round(bluebot.report.profit) }} {{ bluebot.watch.currency }}
    .hr
    h2 Start a new live Gekko
    router-link.btn--primary(to='/live-bluebots/new') Start a new live Gekko!
</template>

<script>

import marked from '../../tools/marked'
// global moment
// global humanizeDuration

const text = marked(`

## Live Gekko

Run your strategy against the live market!

`);

export default {
  data: () => {
    return {
      text
    }
  },
  created: function() {
    this.timer = setInterval(() => {
      this.now = moment();
    }, 1000)
  },
  destroyed: function() {
    clearTimeout(this.timer);
  },
  data: () => {
    return {
      text,
      timer: false,
      now: moment()
    }
  },
  computed: {
    stratrunners: function() {
      return this.$store.state.stratrunners
    },
    watchers: function() {
      return this.$store.state.watchers
    }
  },
  methods: {
    humanizeDuration: (n) => window.humanizeDuration(n),
    moment: mom => moment.utc(mom),
    fmt: mom => moment.utc(mom).format('YYYY-MM-DD HH:mm'),
    round: n => (+n).toFixed(3),
    timespan: function(a, b) {
      return this.humanizeDuration(this.moment(a).diff(this.moment(b)))
    }
  }
}
</script>

<style>
table.clickable {
  border-collapse: separate;
}

tr.clickable td:nth-child(1) {
  padding-left: 5px;
}

tr.clickable {
  cursor: pointer;
}
tr.clickable:hover {
  background: rgba(216,216,216,.99);
}
</style>
