{{ 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;
  }

  .highlighted-cell {
    background-color: yellow;
  }

  .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 that provides and forwards the timing -->
<script>
    window.onload = function() {
        var startTime = Date.now();

        // Attach the saveTimes function to the form's submit event
        document.querySelector('form').addEventListener('submit', function(event) {
            // Concatenate row and column values
            var transfer_cell5_index = '{{ highlight_index_row_cell5 }}' + '-' + '{{ highlight_index_column_cell5 }}';

            // Set the value of the hidden input field
            document.querySelector('#transfer_cell5_index').value = transfer_cell5_index;

            saveTimes(); // Call your saveTimes function
        });
    }
</script>


<!-- HTML -->
<div class="table-container">
  <table>
    {% for row in grid_data %}
      <tr>
        {% for cell in row %}
          {% if cell.row_index == highlight_index_row_cell1 and cell.column_index == highlight_index_column_cell1 %} <td class="previous_cell">{{ cell.value_cell1 }}</td>
          {% elif cell.row_index == highlight_index_row_cell2 and cell.column_index == highlight_index_column_cell2 %} <td class="previous_cell">{{ cell.value_cell2 }}</td>
          {% elif cell.row_index == highlight_index_row_cell3 and cell.column_index == highlight_index_column_cell3 %} <td class="previous_cell">{{ cell.value_cell3 }}</td>
          {% elif cell.row_index == highlight_index_row_cell4 and cell.column_index == highlight_index_column_cell4 %} <td class="previous_cell">{{ cell.value_cell4 }}</td>
          {% elif cell.row_index == highlight_index_row_cell5 and cell.column_index == highlight_index_column_cell5 %} <td class="highlighted-cell"> </td>
          {% else %}
            <td class="cell"></td>
          {% endif %}
        {% endfor %}
      </tr>
    {% endfor %}
  </table>

    <div class="form-container">
        <p>  </p>
        <p> How many points do you expect for the cell highlighted in yellow? </p>
        <p> {{ form.transfer_cell5_value }}  </p>
        <p> <input type="hidden" name="transfer_cell5_index" value="{{ highlight_index_row_cell5 }}, {{ highlight_index_column_cell5 }}" />  </p>
        <p> <button type="submit">Submit</button>  </p>
    </div>
</div>

{% endblock %}