<template>
  <section :style="cssVars" class="axe-details">
    <h2 class="title">
      <span><span class="upper">{{ axe.identifier }}</span><span>{{ axe.shortTitle }}</span></span>
      <span class="upper">{{ score.scoreAvg | formatRate }} / 10</span>
    </h2>
    <div v-for="response in responses" :key="response._links.self.href">
      <p class="question">
        <span>
          {{ response.question }}
        </span>
        <span class="note">{{ response.score }} / 10</span>
      </p>
      <p v-if="response.comment" class="comment">{{ response.comment }}</p>
    </div>
  </section>
</template>

<script lang="ts">
import {Component, Prop, Vue} from "nuxt-property-decorator";
import {Axe} from "~/repositories/models/axe.model";
import {ResponseWithQuestion, Score} from "~/repositories/models/quiz.model";

@Component
export default class QuizAxeDetails extends Vue {

  @Prop({
    type: Object,
    required: true
  })
  public axe!: Axe;

  @Prop({
    type: Object,
    required: true
  })
  public score!: Score;

  @Prop({
    type: Array
  })
  public responses!: ResponseWithQuestion[];

  get cssVars() {
    return {
      '--color': this.axe ? this.axe.color : "#ffffff"
    }
  }
}
</script>

<style lang="scss" scoped>
@import "assets/css/font";
@import "assets/css/color";
@import "assets/css/spacing";

.axe-details {
  margin-top: $x_small;
}

.title {
  display: flex;
  justify-content: space-between;
  font-size: $tertiary-font-size;
  font-weight: 700;
  color: black;
  border-bottom: 3px solid var(--color);
  margin: $xx_small 0;
  line-height: 1rem;
}

.title .upper {
  font-size: 28px;
  font-weight: bold;
  color: var(--color);
}

.title .upper:first-child {
  margin-right: $xxx_small;
}

.question {
  display: flex;
  justify-content: space-between;
  color: black;
  margin: $xx_small 0 0 0;
}

.question .note {
  color: var(--color);
}

.comment {
  font-size: $small-font-size;
  margin: $xxx_small 0 1rem 0;
  font-style: italic;
}

</style>
