{% extends "public.html" %}  {% block toolbar_title %} {{ gerty.name }}{% endblock %}{% block page %}
{% raw %}
<div class="q-pa-md row items-start q-gutter-md">
  <q-card unelevated flat  class="q-pa-none text-body1 blockquote" style="background: none !important;">
    "{{gerty.sats_quote[0].text}}" <br/>~ Satoshi {{gerty.sats_quote[0].date}}
</q-card>
</div>
<div class="q-pa-md row items-start q-gutter-md">
  <q-card unelevated flat class="q-pa-none" style="background: none !important;">
    <q-card-section class="text-h1 q-pa-none">
      {{gerty.exchange[0].amount.toFixed(2)}} {{gerty.exchange[0].fiat}}
    </q-card-section>
  </q-card>
<q-card v-for="gertywallet in gertywallets" style="width:380px" flat>
  <q-card-section horizontal class="q-pa-none" :style="`background-color: ${gertywallet.color1}`">
    <q-card-section class="q-pa-none">
      <div class="q-item__section column  q-pa-lg q-mr-none text-white q-item__section--side justify-center" :style="`background-color: ${gertywallet.color2}`" >
        <i aria-hidden="true" role="presentation" class="material-icons q-icon notranslate text-white" style="font-size: 50px;">sentiment_satisfied</i></div>  
    </q-card-section>

    <div class="q-item__section column  q-pa-md q-ml-none  text-white q-item__section--main justify-center" style="min-width:200px;">
      <div class="q-item__label text-white text-h6 text-weight-bolder">{{gertywallet.amount}}</div><div class="q-item__label"><b>{{gertywallet.name}}</b></div>
    </div>
  </q-card-section>
</q-card>
</div>

<div class="row q-col-gutter-md ">  
  <div v-if="gerty.onchain[0]" class="col-12 col-sm-6 col-md-5 col-lg-6">
    <q-card class="q-pa-lg">
     <p class="text-h4">Onchain Stats</p>
     Difficulty Progress Percent
     <q-linear-progress size="20px" :value="gerty.onchain[0].difficulty[0].progressPercent/100" color="primary" class="q-mt-sm">
      <div class="absolute-full flex flex-center">
        <q-badge color="white" text-color="accent" :label="gerty.onchain[0].difficulty[0].progressPercent.toFixed() + '%'" />
      </div>
    </q-linear-progress>

      <q-card-section class="q-pa-none">
        <div class="row q-mt-lg q-gutter-sm text-h6">
          Current difficulty: {{gerty.onchain[2].threed[0].currentDifficulty}}
          Current hashrate: {{gerty.onchain[2].threed[0].currentHashrate}}
        </div>
      </q-card-section>
    </q-card>
  </div>
  <div v-if="gerty.ln[0]" class="col-12 col-sm-6 col-md-5 col-lg-6">
    <q-card class="q-pa-lg">
     <p class="text-h4">LN Stats</p>
      <q-card-section class="q-pa-none">
        <div class="row q-mt-lg q-gutter-sm">
          {{gerty.ln}}
        </div>
      </q-card-section>
    </q-card>
  </div>
</div>
{% endraw %}
{% endblock %} {% block scripts %}
<script>
  Vue.component(VueQrcode.name, VueQrcode)

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        gerty: {{ gerty | tojson }},
        walletColors: [
          {first: "#3f51b5",
          second: "#1a237e"},
          {first: "#9c27b0",
          second: "#4a148c"},
          {first: "#e91e63",
          second: "#880e4f"},
          {first: "#009688",
          second: "#004d40"},
          {first: "#ff9800",
          second: "#e65100"},
          {first: "#2196f3",
          second: "#0d47a1"},
          {first: "#4caf50",
          second: "#1b5e20"}
        ],
        gertywallets: []
      }
    },
    methods: {

    },
    created: function () {
      console.log(this.gerty)

      for (let i = 0; i < this.gerty.wallets.length; i++) {
          this.gertywallets[i] = {
            "name":this.gerty.wallets[i].name,
            "amount":this.gerty.wallets[i].balance/1000 + " Sats",
            "color1":this.walletColors[i].first,
            "color2":this.walletColors[i].second
          }
      }
      console.log(this.gertywallets)
    }
  })
</script>
{% endblock %}