<template>
  <div class="q-pa-md row items-start q-col-gutter-md">

    <div class="col col-sm-6" v-for="cache in caches" :key="cache.id">
      <q-card flat bordered class="my-card bg-grey-1">
        <q-img :ratio="16/9" src="https://cdn.quasar-framework.org/img/parallax2.jpg">
          <div class="absolute-bottom">
            <div class="text-h6">
              <span>{{ cache.name }}</span>
              <!--<span v-if="cache.stationen.length > 2"> (Multicache)</span>-->
              <!--<span v-else> (Singlecache)</span>-->
            </div>
          </div>
        </q-img>
        <q-card-section>
          {{ cache.description }}
        </q-card-section>
        <q-separator inset />
        <q-card-actions align="around">
            <q-btn flat color="green" class="btn-fixed-width" >Cache starten</q-btn>
            <q-btn flat outline class="btn-fixed-width">Ansehen</q-btn>
        </q-card-actions>
      </q-card>
    </div>
  </div>
</template>

<style lang="stylus">
.grid-style-transition
  transition transform .3s
.btn-fixed-width
  width: 48%
</style>

<script>
export default {
  data () {
    return {
      denseOn: true,
      filter: '',
      selected: [],
      caches: [],
      columns: [
        {
          name: 'desc',
          required: true,
          label: 'Dessert (100g serving)',
          align: 'left',
          field: row => row.title,
          format: val => `${val}`,
          sortable: true
        },
        { name: 'userId', align: 'center', label: 'ID', field: 'userId', sortable: true },
        { name: 'id', label: 'fID', field: 'id', sortable: true },
        { name: 'title', label: 'Titel', field: 'title' },
        { name: 'completed', label: 'Komplett', field: 'completed' },
      ],
      // data: [
      //   {
      //     "userId": 1,
      //     "id": 1,
      //     "title": "delectus aut autem",
      //     "completed": false
      //   }
      // ]
    }
  },

  created: function() {
    console.log("created(): " + this.caches);
    this.fetchTodos();
  },

  methods: {
    fetchTodos () {
      this.$axios.get('http://localhost:8080/api/allCaches')
        .then((response) => {
          console.log("Caches: " + this.caches);
          this.caches = response.data;
        })
    }
  }
}
</script>
