<template>
  <q-page class="column">
    <div class="bg-red col col-shrink" style="">
      <q-tabs
        v-model="tab"
        class="bg-grey-2"
        inline-label
        align="justify"
        active-bg-color="bg-grey-1"
        active-color="cyan-14"
        indicator-color="cyan-14"
        narrow-indicator
        switch-indicator
      >
        <q-tab name="solo" label="Solo-Cacher" icon="person"/>
        <q-tab name="team" label="Cacher-Team" icon="group"/>
      </q-tabs>
      <q-separator color="grey-4"/>
    </div>

    <div class="col flex column">
      <q-tab-panels v-model="tab" animated swipeable class="col">
        <q-tab-panel name="solo" class="q-pa-md fit">
          <q-list>
            <q-card class="q-mb-md" v-for="user in users" :key="user.id">
              <q-item class="q-pr-sm ">
                <q-item-section>
                  <q-item-label overline><a class="text-black" style="text-decoration: none"><span>{{user.username}}</span></a></q-item-label>
                </q-item-section>
                <q-item-section side>
                  <span class="text-grey">{{user.rankingPointsSum}} Punkte </span>
                </q-item-section>
              </q-item>
            </q-card>
          </q-list>
        </q-tab-panel>

        <q-tab-panel name="team" class=" fit">
          <q-list>
            <q-card class="q-mb-md">
              <q-item class="q-pr-sm ">
                <q-item-section>
                  <q-item-label>Single line item</q-item-label>
                </q-item-section>
                <q-item-section side>
                  <span class="text-grey"> Punkte </span>
                </q-item-section>
              </q-item>
            </q-card>
          </q-list>
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-page>

</template>

<style>
/*
  .my-list-card-item
    padding-left: 8px
*/
</style>
<script>
  import {dom} from 'quasar'

  const {height, width} = dom
  export default {
    data() {
      return {
        tab: 'solo',
        rankinglist: [],
        users: [{
          username: "kathy", id: "123", rankingPointsSum: "15"
      },
      {
        username: "timo", id: "124", rankingPointsSum: "20"
    }]
    }
    },
    created: function() {
      console.log("created(): " + this.rankinglist);
  //    this.fetchRankinglist();
    },
    methods: {
      fetchRankinglist() {
        this.$axios.get('http://localhost:8080/api/getRankingList')
          .then((response) => {
            console.log("Rankinglist: " + this.rankinglist);
            this.rankinglist = response.data;
          })
      }
    }
}
</script>
