{% extends "base.html" %}

{% block body %}
  <main class="container-fluid">
    <h1 class="text-center">Quiz The Word</h1>
    <div class="row justify-content-center">
      <div class="col-md col-lg-7 align-content-center question">
        <div class="card question-content">
          <h5 id="question-text"></h5>
          <button id="btn-show-answer" class="btn btn-secondary show-answer">Show Answer</button>
          <p id="question-answer" class="d-none answer"></p>
          <div id="bible-verses"></div>
        </div>
        <button id="btn-previous-question" class="btn btn-primary mt-2 float-start control-btn">Previous</button>
        <button id="btn-next-question" class="btn btn-primary mt-2 float-end">Next</button>
      </div>
    </div>

    <ul class="nav nav-pills justify-content-center mt-2">
      <li class="nav-item" role="presentation">
        <button class="nav-link active difficulty-selection control-btn" id="btn-show-easy" type="button" aria-controls="easy" aria-selected="true">Easy
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link difficulty-selection control-btn" id="btn-show-medium" type="button" aria-controls="medium" aria-selected="false">Medium
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link difficulty-selection control-btn" id="btn-show-hard" type="button" aria-controls="hard" aria-selected="false">Hard
        </button>
      </li>
    </ul>

  </main>
{% endblock %}

{% block scripts %}
  <script>
      next_question_url = "{{ url_for("next_hidden_answer") }}";
      let questions = [
          {
              "current_question": 0,
              "questions": [{{ easy.get_dict()|tojson }}],
          },
          {
              "current_question": 0,
              "questions": [{{ medium.get_dict()|tojson }}],
          },
          {
              "current_question": 0,
              "questions": [{{ hard.get_dict()|tojson }}],
          },
      ];
      let btn_show_answer = $("#btn-show-answer");
      let question_answer = $("#question-answer");

      btn_show_answer.on("click", showAnswer);

      function update_question() {
          let difficulty = questions[current_difficulty-1];
          let question_index = difficulty["current_question"];
          let question = difficulty["questions"][question_index];
          if (question_index === 0) {
              btn_previous_question.attr("disabled", true);
          } else {
              btn_previous_question.attr("disabled", false);
          }
          if (question_index === difficulty["last_index"]) {
              btn_next_question.attr("disabled", true);
          } else {
              btn_next_question.attr("disabled", false);
          }

          if (question["answer_visible"]) {
              btn_show_answer.css("display", "none");
              question_answer.removeClass("d-none");
          } else {
              btn_show_answer.css("display", "block");
              question_answer.addClass("d-none");
          }
          $("#question-text").text(question["question_text"]);
          question_answer.text(question["answer"]);
          $("#bible-verses").text(question["addresses"]);
      }

      function showAnswer() {
          let question_index = questions[current_difficulty-1]["current_question"];
          let question = questions[current_difficulty-1]["questions"][question_index];
          question["answer_visible"] = true;
          question_answer.removeClass("d-none");
          btn_show_answer.css("display", "none");
      }
  </script>
  <script src="{{ url_for('static', filename='js/script.js') }}"></script>
{% endblock %}