{{ block title }}
  <center> </center>
{{ endblock }}

{{ block content }}

<!-- CSS styles -->
<style>
  .otree-timer {
    display: none !important;
  }

  .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 */
  }

  .form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
    text-align: center;
  }

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

  td {
    border: 1px solid black;
    padding: 0;
    width: 30px;
    height: 30px;
    text-align: center;
  }

  .current-cell {
    background-color: lightgray;  /* Customize with your desired styling */
  }

    .highlighted-cell {
    background-color: lightpink;  /* Customize with your desired styling */
  }

  /* 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;
  }

  .form-section button {
    width: 100px;
    height: 40px;
    /* Additional styles for the button (e.g., background-color, font-size, etc.) */
  }

</style>

<!-- Container for centering the grid -->
<div class="table-container">
  <table>
    {% for row in grid_number %}
      <tr>
        {% for value in row %}
          <td></td>
        {% endfor %}
      </tr>
    {% endfor %}
  </table>

    <div class="form-container">
        <p>  </p>
        <p> In the following study, you will observe another player playing a game. It was the player's task to earn as many points as possible. To do so, the player was presented with a grid. </p>
        {{ next_button }}
    </div>
</div>



{{ endblock }}