<template>
  <div class="q-pa-sm">
    <div
      class="row justify-center"
      style="max-width: 60em; margin: 0 auto;">
      <a
        v-for="link in links"
        :key="link.id"
        :href="link.link"
        class="link q-ma-sm">
        <q-card
          class="clickable"
          style="width: 11em;">
          <q-card-section class="row justify-center">
            <img
              :src="`${$imageBase}/link/full/${link.image}`"
              style="width: 5em;">
          </q-card-section>
          <q-card-section style="height: 7em; overflow: hidden;">
            <div class="text-subtitle1 ellipsis">{{link.name}}</div>
            <div class="text-caption">{{link.description}}</div>
          </q-card-section>
        </q-card>
      </a>
    </div>
  </div>
</template>

<style lang="stylus" scoped>
  a
    display block
    text-decoration inherit
    color: inherit
  .q-card.clickable
    transition background 300ms ease-out
    &:hover
      background rgba(255, 255, 255, .2)

</style>

<script>
import Page from 'components/Page'

export default {
  name: 'Panel',
  mixins: [Page],
  data () {
    return {
      links: []
    }
  },
  mounted () {
    let filter = {
      order: 'name'
    }
    this.$axios.get('Links', { params: { filter } })
      .then(res => (this.links = res.data))
  }
}
</script>
