<template>
  <div class="col mb-4">
    <div class="card" style="width: 15rem;">
      <div class="card-body">
        <h5 class="card-title">{{ hero.name }}</h5>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Power : {{ hero.power }}</li>
        <li class="list-group-item">Cost : {{ hero.cost }}</li>
        <li class="list-group-item">
          {{ hero.faction }} {{ hero.isDraftable | draftText }}
        </li>
      </ul>
      <div class="card-body">
        <p class="card-text text-justify">
          {{ hero.ability.desc }}
        </p>
      </div>
      <div class="text-center mb-2" v-if="selectable">
        <button class="btn btn-primary" style="width:50%;">
          Select
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['hero', 'selectable'],
  computed: {},
  filters: {
    draftText(value) {
      if (value === true) {
        return '(draft)';
      } else {
        return '';
      }
    }
  }
};
</script>

<style></style>
