import { onMounted, ref, computed, watch, nextTick } from "vue";

const html = (v) => { return v[0] };

export default {
  props: ['player', 'id'],
  setup(props) {
    return {  }
  },
  template: html`
    <div class="player element">
      <template v-if="player !== undefined">
        <img :src="player.img ? player.img : '/assets/img/placeholder_person.png'">
        <h2 class="name">{{ player.forename }} {{ player.surname }}</h2>
        <h3 class="nickname">{{ player.nickname }}</h3>
      </template>
      <template v-if="player === undefined">
        <h2 class="name">No Player</h2>
        <h3 class="nickname">&nbsp;</h3>
      </template>
    </div>
  `
}