<template>
  <div>
    <h3>{{value}}</h3>
    <div class="types">
      <span :class="'tag type ' + type1">{{type1}}</span>
      <span :class="'tag type ' + type2" v-if="type2">{{type2}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Format',
    computed: {
      type1 () {
        return (this.statics('pokemon').v !== undefined && this.statics('pokemon').v !== 'loading') ? this.statics('pokemon').v.types[0].type.name : 'loading...'
      },
      type2 () {
        return (this.statics('pokemon').v !== undefined && this.statics('pokemon').v !== 'loading') ? (this.statics('pokemon').v.types[1] ? this.statics('pokemon').v.types[1].type.name : false) : undefined
      }
    },
    ready () {
      if (this.statics('pokemon').v === undefined) {
        this.statics('pokemon').v = 'loading'
        this.$http.get('//pokeapi.co/api/v2/pokemon/' + this.value).then(response => {
          this.statics('pokemon').v = response.json()
        })
      }
    }
  }
</script>

<style>
h2, h3 {
  text-align: center;
}

.value-cell.cell-name\+abilities {
  vertical-align: middle;
}

.type {
  margin: 3px;
  padding: 5px 8px 5px 8px;
  display: inline-block;
  border-radius: 6px;
  -webkit-border-radius: 6px; 
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  font-size: 13px;
  font-family: "helvetica neue", Helvetica, Verdana, sans-serif;
  color: #FFF;
  background-color: #68A090;
  border: 1px solid #44685E;
}

.normal {
	background-color: #A8A878;
	border: 1px solid #6D6D4E;
}

.fire {
	background-color: #F08030;
	border: 1px solid #9C531F;
}

.water {
	background-color: #6890F0;
	border: 1px solid #445E9C;
}

.electric {
	background-color: #F8D030;
	border: 1px solid #A1871F;
}

.grass {
	background-color: #78C850;
	border: 1px solid #4E8234;
}

.ice {
	background-color: #98D8D8;
	border: 1px solid #638D8D;
}

.ground {
	background-color: #E0C068;
	border: 1px solid #927D44;
}

.flying {
	background-color: #A890F0;
	border: 1px solid #6D5E9C;
}

.ghost {
	background-color: #705898;
	border: 1px solid #493963;
}

.rock {
	background-color: #B8A038;
	border: 1px solid #786824;
}

.fighting {
	background-color: #C03028;
	border: 1px solid #7D1F1A;
}

.poison {
	background-color: #A040A0;
	border: 1px solid #682A68;
}

.psychic {
	background-color: #F85888;
	border: 1px solid #A13959;
}

.bug {
	background-color: #A8B820;
	border: 1px solid #6D7815;
}

.dark {
	background-color: #705848;
	border: 1px solid #49392F;
}

.steel {
	background-color: #B8B8D0;
	border: 1px solid #787887;
}

.dragon {
	background-color: #7038F8;
	border: 1px solid #4924A1;
}
</style>