<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Capital City Quiz</title>
  <link rel="stylesheet" href="/styles/main.css">
</head>

<body id="app">
  <form class="container" action="/submit" method="post">
    <div class="horizontal-container">
      <h3>
        Total Score:
        <span id="score">
          <%= locals.totalScore ? totalScore : "0" %>
        </span>
      </h3>

    </div>

    <h1 id="countryName">
      <%=question.country %>
    </h1>
    <div class="answer-container">
      <input type="text" name="answer" id="userInput" placeholder="Enter the capital" autofocus autocomplete="off">

    </div>
    <button type="submit">SUBMIT<% if(locals.wasCorrect){ %>
        <span class="checkmark">✔</span>
        <% } else if (locals.wasCorrect===false) { %>
          <span class="cross" id="error">✖</span>
          <% } %>
    </button>

  </form>
  <script>
    var wasCorrect = "<%= locals.wasCorrect %>";
    console.log(wasCorrect)
    if (wasCorrect === "false") {
      alert('Game over! Final best score: <%= locals.totalScore %>');
      document.getElementById("app").innerHTML = '<a href="/" class="restart-button">Restart</a>'
    }


  </script>
</body>

</html>