{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Instructions
{% endblock title %}

{% block styles %}
   {# <link href="{% static "maze_timing/style.css" %}" rel="stylesheet"> #}
{% endblock styles %}

{% block content %}
    <p>You will be presented with {{ num_mazes }} mazes, each of which you will be given at most
        {{ minutes_to_solve }} minutes to complete.</p>
    <div>
        <button id="next-button" class="otree-btn-next btn btn-primary">Next</button>
    </div>
{% endblock content %}

{% block scripts %}
    <script src={% static 'maze_timing/js/js.cookie.js' %}></script>
    <script>
    let maze_ids = {{ maze_ids|safe }};
    for (let maze of maze_ids) {
        Cookies.remove(maze);
    }
    Cookies.remove('x');
    Cookies.remove('y');
    Cookies.remove('secondsToSolve');
    Cookies.remove('solved');
    </script>
{% endblock scripts %}