{{ block title }}
Runde {{round_number }}
{{ endblock }}
{{ block content }}
  <div class="container">
    Bitte lösen Sie folgende Analogie

    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Analogie</h6>
        <div class="border p-3">
          <p id="question" style="display: none"></p>
            <div class="text-start my-1">
                <img src="{{ task_image }}" alt="Anologie"
                    class="img-fluid" style="max-width: 800px; pointer-events: none;
                    user-select: none; -webkit-user-drag: none;">
            </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Ihre Antwort:</h6>
        <ul class="list-group  list-group-horizontal"> <!-- war es vorher list-group-flush-->
          <li class="list-group-item">
            <div class="p-1 m-1">
              <button type="button" onclick="recordResponse(this)" value="A" id="optionA" class="btn btn-primary option-btn"></button>
            </div>
          </li>
          <li class="list-group-item">
            <div class="p-1 m-1">
              <button type="button" onclick="recordResponse(this)" value="B" id="optionB" class="btn btn-primary option-btn"></button>
            </div>
          </li>
          <li class="list-group-item">
            <div class=" p-1 m-1">
              <button type="button" onclick="recordResponse(this)" value="C" id="optionC" class="btn btn-primary option-btn"></button>
            </div>
          </li>
          <li class="list-group-item">
            <div class=" p-1 m-1">
              <button type="button" onclick="recordResponse(this)" value="D" id="optionD" class="btn btn-primary option-btn"></button>
            </div>
          </li>
          <li class="list-group-item">
            <div class=" p-1 m-1">
              <button type="button" onclick="recordResponse(this)" value="E" id="optionE" class="btn btn-primary option-btn"></button>
            </div>
          </li>
        </ul>
      </div>
    </div>
    {{if DEBUG}}
    <div class="card" >
      <div class="card-body">
        <h5 class="card-title">Lösung</h5>
        <div class="border px-3 py-4">
                <p id="solution" style="margin-top: auto; margin-bottom: auto"></p>
        </div>
      </div>
    </div>
    {{ formfield_errors 'response_games' }}
    {{endif}}

    <form id="form" method="post">
      <input type="hidden" name="response_games" id="response_games">
    </form>
  </div>

  <script>
    let responses = {};
    let analogy = js_vars.analogy;
    // console.log(analogy);

    function updateUI() {
      document.getElementById("question").innerText = analogy.question;

      const options = ['optionA','optionB','optionC','optionD','optionE'];
      const optionButtons = document.getElementsByClassName("option-btn");
      for (let i = 0; i < optionButtons.length; i++) {
        optionButtons[i].innerText = analogy[options[i]];
      }

      document.getElementById("solution").innerText = analogy.solution;
    }

    function recordResponse(btn) {

      responses['answer'] = btn.value;
      document.getElementById("response_games").value = JSON.stringify(responses);
      document.getElementById("form").submit(); // submit erst wenn ich weiß was hier rauskommt
      //console.log(btn.value, responses );
    }

    function handleSubmit() {
      const selectedOption = document.querySelector("button.option-btn:focus");
      console.log(selectedOption);
      responses[analogy[0].id] = selectedOption ? selectedOption.value : 0;
      document.getElementById("response_games").value = JSON.stringify(responses);
    }

    document.getElementById("form").addEventListener("submit", handleSubmit);

    updateUI();
  </script>

{{ endblock }}

{{ block scripts }}
    <script src="{{ static 'anti_cheat/anti_cheat.js' }}"></script>
{{ endblock }}