<q-tab-panel name="dashboard">
  <q-card-section class="q-pa-none">
    <lnbits-node-info :info="this.info"></lnbits-node-info>
    <div class="row q-col-gutter-lg q-mt-sm">
      <div class="col-12 col-md-8 q-gutter-y-md">
        <div class="row q-col-gutter-md q-pb-lg">
          <div class="col-12 col-md-6 col-xl-4 q-gutter-y-md">
            <lnbits-stat
              :title="$t('total_capacity')"
              :msat="this.channel_stats.total_capacity"
            />
          </div>
          <div class="col-12 col-md-6 col-xl-4 q-gutter-y-md">
            <lnbits-stat title="Balance" :msat="this.info.balance_msat" />
          </div>

          <div class="col-12 col-md-6 col-xl-4 q-gutter-y-md">
            <lnbits-stat
              title="Fees collected"
              :msat="this.info.fees?.total_msat"
            />
          </div>

          <div class="col-12 col-md-6 col-xl-4 q-gutter-y-md">
            <lnbits-stat
              title="Onchain Balance"
              :btc="this.info.onchain_balance_sat / 100000000"
            />
          </div>

          <div class="col-12 col-md-6 col-xl-4 q-gutter-y-md">
            <lnbits-stat
              title="Onchain Confirmed"
              :btc="this.info.onchain_confirmed_sat / 100000000"
            />
          </div>
          <div class="col-12 col-md-6 col-xl-4 q-gutter-y-md">
            <lnbits-stat title="Peers" :amount="this.info.num_peers" />
          </div>
          <div class="col-12 col-md-6 col-xl-4 q-gutter-y-md">
            <lnbits-stat
              :title="$t('avg_channel_size')"
              :msat="this.channel_stats.avg_size"
            />
          </div>
          <div class="col-12 col-md-6 col-xl-4 q-gutter-y-md">
            <lnbits-stat
              :title="$t('biggest_channel_size')"
              :msat="this.channel_stats.biggest_size"
            />
          </div>
          <div class="col-12 col-md-6 col-xl-4 q-gutter-y-md">
            <lnbits-stat
              :title="$t('smallest_channel_size')"
              :msat="this.channel_stats.smallest_size"
            />
          </div>
        </div>
      </div>
      <div class="column col-12 col-md-4 q-gutter-y-md">
        <lnbits-node-ranks :ranks="this.ranks"></lnbits-node-ranks>
        <lnbits-channel-stats
          :stats="this.channel_stats"
        ></lnbits-channel-stats>
      </div>
    </div>
  </q-card-section>
</q-tab-panel>
