{{ block title }}
  <center> Exemplary Point Clustering </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_data %}
      <tr>
        {% for cell in row %}
            <td>
              {{ cell.value }}
            </td>
        {% endfor %}
      </tr>
    {% endfor %}
  </table>

    <div class="form-container">
        <p>  </p>
        <p> <br> Important! <b> Points are clustered within the grid</b>, such that areas with high-value points tend to appear close to each other, and areas of low-value points tend to appear close to each other. Above you can see an exemplary clustering of points. All payoffs are greater than zero. The player knew that the points were clustered, but they were unaware of the specific number of points assigned to each cell.  </br> </p>
        {{ next_button }}
    </div>

</div>





{{ endblock }}