<template>
  <v-list-tile avatar>
    <v-list-tile-avatar :color="color">
      <span class="headline font-weight-bold white--text">{{ dbentry.cost }}</span>
    </v-list-tile-avatar>

    <v-list-tile-content>
      <v-list-tile-title class="body-2">{{ dbentry.name }}</v-list-tile-title>
      <v-list-tile-sub-title>{{ serial }}</v-list-tile-sub-title>
    </v-list-tile-content>

    <v-list-tile-avatar>
      <span class="subheading">{{ count }}</span>
    </v-list-tile-avatar>
  </v-list-tile>
</template>

<script>
export default {
  name: 'Card',

  props: {
    count: Number,
    serial: String,
    dbentry: Object
  },

  computed: {
    color() {
      switch (this.dbentry.element.toLowerCase()) {
        case 'fire':
          return '#d41'
        case 'ice':
          return '#7ac'
        case 'wind':
          return '#596'
        case 'earth':
          return '#db1'
        case 'lightning':
          return '#859'
        case 'water':
          return '#57a'
        case 'light':
          return '#888'
        case 'dark':
        default:
          return '#333'
      }
    }
  }
}
</script>
