{% extends "base.html" %}

{% block body %}
  <main class="container-fluid">
    <h1 class="text-center">Quiz The Word</h1>
    <div class="row justify-content-center tab-content">
      <div id="easy-question" class="col-md col-lg-7 align-content-center question fade tab-pane show active" role="tabpanel">
        <div class="card question-text">
          <h5 id="easy-question">{{ easy.question_text }}</h5>
          <button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>
          <p id="easy-answer" class="d-none answer">{{ easy.answer }}</p>
          <div id="easy-bible-verses">{{ easy.addresses }}</div>
        </div>
      </div>
      <div id="medium-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
        <div class="card question-text">
          <h5 id="medium-question">{{ medium.question_text }}</h5>
          <button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>
          <p id="medium-answer" class="d-none answer">{{ medium.answer }}</p>
          <div id="medium-bible-verses">{{ medium.addresses }}</div>
        </div>
      </div>
      <div id="hard-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
        <div class="card question-text">
          <h5 id="hard-question">{{ hard.question_text }}</h5>
          <button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>
          <p id="hard-answer" class="d-none answer">{{ hard.answer }}</p>
          <div id="hard-bible-verses">{{ hard.addresses }}</div>
        </div>
      </div>
    </div>

    <ul class="nav nav-pills justify-content-center mt-2" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="home-tab" data-bs-toggle="pill" data-bs-target="#easy-question"
                type="button" role="tab" aria-controls="easy" aria-selected="true">Easy
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="profile-tab" data-bs-toggle="pill" data-bs-target="#medium-question" type="button"
                role="tab" aria-controls="medium" aria-selected="false">Medium
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="contact-tab" data-bs-toggle="pill" data-bs-target="#hard-question" type="button"
                role="tab" aria-controls="hard" aria-selected="false">Hard
        </button>
      </li>
    </ul>

  </main>
{% endblock %}

{% block scripts %}
  <script>
      function showAnswer() {
          $(".question:visible").find(".answer").removeClass("d-none");
          $(".show-answer:visible").css("display", "none");
      }
  </script>
{% endblock %}