div.my2
.contain(v-if='!data')
h1 Unknown Watcher
p bluebot doesn't know what whatcher this is...
div(v-if='data')
h2.contain Market Watcher
.grd.contain
h3 Market
.grd-row
.grd-row-col-2-6 Exchange
.grd-row-col-4-6 {{ data.watch.exchange }}
.grd-row
.grd-row-col-2-6 Currency
.grd-row-col-4-6 {{ data.watch.currency }}
.grd-row
.grd-row-col-2-6 Asset
.grd-row-col-4-6 {{ data.watch.asset }}
h3 Statistics
spinner(v-if='isLoading')
template(v-if='!isLoading')
.grd-row(v-if='data.firstCandle')
.grd-row-col-2-6 Watching since
.grd-row-col-4-6 {{ fmt(data.firstCandle.start) }}
.grd-row(v-if='data.lastCandle')
.grd-row-col-2-6 Received data until
.grd-row-col-4-6 {{ fmt(data.lastCandle.start) }}
.grd-row(v-if='data.lastCandle && data.firstCandle')
.grd-row-col-2-6 Data spanning
.grd-row-col-4-6 {{ humanizeDuration(moment(data.lastCandle.start).diff(moment(data.firstCandle.start))) }}
template(v-if='!isLoading')
h3.contain Market graph
spinner(v-if='candleFetch === "fetching"')
template(v-if='candles.length')
chart(:data='chartData', :height='500')