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

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

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