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

{% block title %}
Solve the Problem or Continue
{% endblock %}

{% block content %}
<div>
<p>
  You have selected
  {% if player.problem != None %} cell : {{problem_no }}.
  {% else %} {%if player.row_problem != None %} column : {{problem_no}}.
  {% else %} {% if player.col_problem != None %} row : {{ problem_no }}.
  {% endif %}
  {% endif %}
  {% endif %}

  If you do not want to solve the problem you can leave the box blank for now.
    Later you can again come back and solve the problem.
  </p>

<input id="choice" name="choice" type="hidden" value="0">

     {% if player.problem != None %}
      <p style = 'font-size: 150%' >
      Solve: {{prob}}
    </p>
    <p>
      <span style = 'color:Tomato; font-size : 120%'>
      The cutoff value is {{rand_cutoff}}.
    </span>

      </p>
      {% else %}
      {% if player.row_problem != None %}
      <p>
      The <span style = "color:Tomato"> fifth digit </span> represents the number of ones in the column:
      </p>
      {{row_avg}}
       {% else %}
       {% if player.col_problem != None %}
       <p>
         The <span style = "color:Tomato">seventh digit </span> represents the number of ones in the row:
       </p>
       {{col_avg}}
       {% endif %}
       {% endif %}
       {% endif %}

    <p> {% formfield player.solution %}
    <button class="btn btn-success">Submit</button> </p>

    {% if player.treat_type == 1 %}
    {% if player.problem != None %}
    {% if player.reveal_cell_total < Constants.cell_reveal %}
    <p> <button class= "btn btn-info" name = "reveal_cell" value = "1"> Reveal </button>
    </p>
    {% else %}
    <p> You have already revealed {{Constants.cell_reveal}} cells.
      No further cell can be revealed.
    </p>
    {% endif %}
    {% endif %}
    {% endif %}

    {% if player.treat_type == 2 %}
    {% if player.row_problem != None or player.col_problem != None %}
    {% if player.reveal_avg_total < Constants.avg_reveal %}
    <p> <button class= "btn btn-info" name = "reveal_avg" value = "1"> Reveal </button>
    </p>
    {% else %}
    <p> You have already revealed {{Constants.avg_reveal}} averages.
      No further average can be revealed.
    </p>
    {% endif %}
    {% endif %}
    {% endif %}

    {% if player.treat_type == 3 %}
    {% if player.reveal_both_total < Constants.both_reveal %}
    <p> <button class= "btn btn-info" name = "reveal_both" value = "1"> Reveal </button>
    </p>
    {% else %}
    <p> You have already revealed {{Constants.both_reveal}} cells or averages.
      No further cell or average can be revealed.
    </p>
    {% endif %}
    {% endif %}
</div>
{{ form.reveal_cell.errors }}
{{ form.reveal_avg.errors }}
{{ form.reveal_both.errors }}
{% endblock %}



{% block styles %}
    <style>
        .otree-timer {
            display: none;
        }
    </style>
{% endblock %}

{% block scripts %}
<script>
$(function () {
    $('.otree-timer__time-left').on('update.countdown', function (event) {
        if (event.offset.totalSeconds === 5) {
            $('.otree-timer').show();
        }
    });
});
</script>
{% endblock %}