Vue.component('review-answers', {
  mixins:[mainMixin],
  props: ['data', 'lesson', 'level','submitted', 'show_redo'],
    methods: {
    redoActivity() {
      this.$emit("redo_activity", "discuss");
    },
  },
  template: `
    <div>
        <div class="alert alert-success text-center">
          <h2 style="margin-bottom:0">{{ getScoreForProgressItem('review', data) }}%</h2>
          <p class="lead" style="margin-bottom:0">
            &#129395; Completed on {{ whenSubmittedString(submitted) }}
          </p>
        </div>

        <div v-if="resubmitIsAllowed && show_redo" class="d-grid gap-2">
          <button @click="redoActivity()" class='btn btn-danger'>
            <i class="bi bi-recycle"></i> Redo
          </button>
        </div>
        <hr/>
      <div v-for="(item,idx) in data" >
        <h5>{{item.definition}}</h5>
        <div style='border:1px solid black;margin-bottom:10px;height:55px;'>
          <div class='draggable-word' style='pointer-events:none;'>
            <span>{{item.selected}}</span>
            <span><i style="color:green;" v-if="item.word==item.selected" class="bi bi-check"></i><i style="color:red;" v-else class="bi bi-x"></i></span>
          </div>
          <div v-if="item.word!=item.selected" class='draggable-word'>
            <span>{{item.word}}</span>
            <span><i style="color:green;" class="bi bi-check"></i></span>
          </div>
        </div>
      </div>
    </div>
  `
});