{{ block title }}
  <center> Testing your knowledge </center>
{{ endblock }}

{{ block content }}

<!-- CSS styles for the table container -->
<style>
  .table-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column; /* this is for displaying the text under each other, instead of next to each other */
    /* margin-bottom: 10px; /* this doesn't seem to do anything */
  }

  .form-container {
    display: flex;
    flex-direction: column; /* this is for displaying the text under each other, instead of next to each other */
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
    /* margin-top: 0rem; this doesn't seem to do anything */
  }

  /* CSS styles for the table */
  table {
    border-collapse: collapse;
  }

  td {
    border: 1px solid black;
    padding: 0;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer; /* Add this to show the pointer cursor when hovering over cells */
  }

  /* Add a class to style the selected cell (customize as you like) */
  .selected {
    background-color: deepskyblue;
  }

  .previous_cell {
    background-color: grey;
  }
  /* Beautfiul. This way I can use the pre-build function in pythong and now show how much time is left on the participant screen  */
  .otree-timer {
    display: none;
  }

</style>


<!-- JavaScript code to handle cell selection and form submission -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const cells = document.querySelectorAll(".cell");
    let selectedCell = null;

    cells.forEach(cell => {
      cell.addEventListener("click", function () {
        if (selectedCell !== null) {
          selectedCell.classList.remove("selected");
        }

        if (selectedCell === this) {
          selectedCell = null;
        } else {
          this.classList.add("selected");
          selectedCell = this;

          const inputField = document.getElementById('transfer_cell2_value');
          inputField.style.display = 'block';
          inputField.focus();

          const row = this.parentElement.rowIndex;
          const col = this.cellIndex;
          document.getElementById('transfer_cell2_index').value = `${row},${col}`;

          updateSubmitButtonState();
        }
      });
    });

    const inputField = document.getElementById('transfer_cell2_value');
    inputField.addEventListener('input', function(event) {
      updateSubmitButtonState();
    });

    function updateSubmitButtonState() {
      const submitButton = document.getElementById('submit_button');
      const inputField = document.getElementById('transfer_cell2_value');
      const cellSelected = selectedCell !== null;
      const inputValue = inputField.value.trim();
      const isInteger = /^\d+$/.test(inputValue); // Check if input is an integer

      submitButton.disabled = !(cellSelected && isInteger);
    }
  });
</script>




<!-- HTML -->

<div class="table-container">
  <table>
    {% for row in grid_data %}
      <tr>
        {% for cell in row %}
          <td{% if cell.row_index == highlight_index_row_cell1 and cell.column_index == highlight_index_column_cell1 %} class="previous_cell"> {{ cell.value_cell1 }} </td>
          {% else %}
          <td class="cell"></td>
          {% endif %}
        {% endfor %}
      </tr>
    {% endfor %}
  </table>

    <div class="form-container">
        <p> </p>
        <p> What is the "worst" cell?</p>
        <p> Please first click on the cell and then type in the points you expect. </p>

        <!-- Reward prediction input (moved above the table) -->
        <p> <input type="text" name="transfer_cell2_value" id="transfer_cell2_value" placeholder="" /> </p>

        <p> <button type="submit" id="submit_button" disabled>Submit</button> </p>
        <input type="hidden" name="transfer_cell2_value" id="transfer_cell2_value" />
        <input type="hidden" name="transfer_cell2_index" id="transfer_cell2_index" />
      </div>
    </div>
</div>


{% endblock %}