<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WIAI-Weihnachtsquiz</title>
  <link href="css/fonts.css" rel="stylesheet"/>
  <link href="css/style.css" rel="stylesheet"/>
</head>
<body>
  <main id="app">
    <section v-if="mode === STARTSCREEN" class="start-screen screen">
      <img class="logo" src="img/wiai-logo.png" alt="Logo der Fachschaft WIAI"/>
      <h1 class="headline">Willkommen zum WIAI-Weihnachtsquiz!</h1>
      <button v-on:click="enterGame" class="btn-start" v-focus v-on:keyup.enter="enterGame">Starten</button>
    </section>

    <section v-if="mode === INGAME" class="ingame-screen screen">
      <header class="header">
        <h1 class="headline">WIAI-Weihnachtsquiz</h1>
        <p v-bind:class="{score: true, focus: currentQuestionAnswered && currentScore > 0}">
          <strong>Score</strong>: {{score}} Punkte 
          <span class="question-score" v-if="currentQuestionAnswered">
            (<strong>
              + {{currentScore}}
            </strong>)
          </span>
        </p>
      </header>

      <article v-if="isChoice" class="question choice" v-bind:class="{revealed: currentQuestionAnswered}">
        <h2 class="question-text">{{currentQuestion.text}}</h2>
        <div class="question-answers">
          <button 
            v-for="answer in currentQuestion.answers" 
            v-bind:disabled="currentQuestionAnswered"
            @click="evaluateChoice(answer.id)"
            v-bind:class="{ correct: isCorrectAnswer(answer.id), answer: true, chosen: isUserChoice(answer.id) }">
            {{answer.text}}
          </button>
        </div>
      </article>

      <article v-if="isEstimate" class="question estimate" v-bind:class="{revealed: currentQuestionAnswered}">
        <h2 class="question-text">{{currentQuestion.text}}</h2>
        <div class="question-estimate">
          <input value="" id="input-estimate" type="number" 
                min="0" class="input-estimate" @v-on:keyup.enter="evaluateEstimate" v-bind:disabled="currentQuestionAnswered" v-focus/>
          <input type="submit" @click="evaluateEstimate" class="btn-submit-estimate" v-bind:disabled="currentQuestionAnswered" value="Auswerten"/>
        </div>

        <div v-bind:class="{'visible': currentQuestionAnswered, 'question-result-wrapper': true}">
          <div v-bind:class="{'question-result': true}">
            <div class="correct-result"></div>
            <div class="estimate"></div>
          </div>
        </div>
      </article>

      <footer class="footer">
        <button v-if="currentQuestionAnswered" @click="showNextQuestion" class="btn-continue">Weiter</button>
      </footer>
    </section>

    <section v-if="mode === ENDSCREEN" class="end-screen screen">
      <img class="logo" src="img/wiai-logo.png" alt="Logo der Fachschaft WIAI"/>
      <h1 class="headline">WIAI-Weihnachtsquiz</h1>
      <p v-if="score > 0" class="score">Herzlichen Glückwunsch!<br/>Du hast insgesamt <strong>{{score}} von {{questions.length * 3}}</strong> möglichen Punkten erzielt.</p>
      <p v-else class="score">Jammerschade!<br/>Beim nächsten Mal klappt es sicher besser.</p>
    </section>
  </main>
  
  <script src="js/vue.min.js"></script>
  <script src="js/questions.js"></script>
  <script src="js/app.js"></script>
</body>
</html>