{{ block title }}
    Practice Rounds
{{ endblock }}

{{ block content }}

<script>
function showHide() {
  var x = document.getElementById("revealMessage");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

<script>
function showHide2() {
  var x = document.getElementById("revealMessage2");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

<script type="text/javascript">
  $(document).ready(function(){
    $('#slowAppear').hide().delay(3000).fadeIn('slow');
  });
</script>

<script type="text/javascript">
  $(document).ready(function(){
    $('#slowAppear2').hide().delay(6000).fadeIn('slow');
  });
</script>

<p>
    This is practice round {{player.round_number}} of {{C.NUM_ROUNDS}}.
</p>

<p>
    The table below shows the information that is initially available to each citizen for this round:
</p>

<br>

<style type="text/css">
.tg  {border:none;border-collapse:collapse;border-spacing:0;}
.tg td{border-style:solid;border-width:0px;font-family:Arial, sans-serif;font-size:14px;overflow:hidden;
  padding:10px 5px;word-break:normal;}
.tg th{border-style:solid;border-width:0px;font-family:Arial, sans-serif;font-size:14px;font-weight:normal;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-baqh{text-align:center;vertical-align:center}
.tg .tg-l93j{border-color:inherit;font-size:16px;font-weight:bold;text-align:center;vertical-align:center}
.tg .tg-c3ow{border-color:inherit;text-align:left; text-indent: 20px; vertical-align:center}
.tg .tg-rvyq{border-color:inherit;font-style:italic;font-weight:bold;text-align:center;vertical-align:center}
</style>
<table class="tg">
<thead>
  <tr>
    <th class="tg-l93j" style="border-right: double; border-bottom: thin solid black"></th>
    <th class="tg-rvyq" style="border-bottom: thin solid black">All Citizens</th>
  </tr>
</thead>
<tbody>
  <tr style="border-bottom: double">
    <td class="tg-rvyq" style="border-right: double; padding-right: 15px">Information from <br> Messenger/Loudspeaker</td>
    <td class="tg-c3ow" style="padding: 25px ">
      <br>

      <span style="font-size: medium">

      {{ if player.current_treatment == 1 }}
        <i>(A messenger comes).</i> <br><br>

        <ol>
          <li> You are shown a message with the word 'Protest'. </li>
        </ol>

        <i>
          You do not have any information about what the other citizens may know.
        </i>

      {{ elif player.current_treatment == 2}}

        <i>(A messenger comes).</i> <br><br>

        <ol>
          <li> You are shown a message with the word 'Protest'. </li>
          <li> You are told that all the other citizens have seen the same message. </li>
        </ol>

        <i>
          You do not have any more information about what the other citizens may know.
        </i>

      {{ elif player.current_treatment == 3}}

        <i>
          (A messenger comes).</i> <br><br>

      <ol>
          <li> You are shown a message with the word 'Protest'. </li>
          <li> You are told that all the other citizens have seen the same message. </li>
          <li> You are told that all the other citizens know that you have seen the same message. </li>
      </ol>

        <i>
          You do not have any more information about what the other citizens may know.
        </i>

      {{ else }}

        <i>
          (The loudspeaker announces a message).</i> <br><br>

      <ol>
          <li> The loudspeaker announces the word 'Protest'. </li>
          <li> You know that the other citizens heard the same message. </li>
          <li> You know that the other citizens know that you heard the same message.</li>
          <li> ... </li>
      </ol>

        <i>
          It is <b>commonly known</b> that all citizens heard the same message.
        </i>

        </span>

      {{ endif }}

    </td>

  </tr>
  <tr>

  </tr>
    <td class="tg-rvyq" style="border-right: double; padding: 25px">Corresponding Information Level</td>
    <td class="tg-c3ow" style="padding: 25px; text-align: center; font-size: medium" >
        <i><b>Level {{ player.current_treatment }}</i></b>
      </td>

</tbody>
</table>

<br>

<p>
    What do you think is the likelihood that all four citizens will choose to protest with this information?
</p>

<input type="range" style="width: 500px" name="coord_prob_high" min="0" max="100" step="5" value="0" oninput="updateDescription1(this)">
        <p id="description1"></p>

        <script>
            let description1 = document.getElementById('description1');
            function updateDescription1(input) {
                let prob = parseInt(input.value);
                description1.innerText = `There is a ${prob}% chance that they all protest.`
            }
        </script>


<div id="slowAppear">

    <button type="button" class="btn btn-primary btn-large" onclick="showHide()"> Continue </button>

  </div>

<div id="revealMessage" style="display:none">
  <br>

  <p>
    Next, the table below shows the information that will be available to each citizen for this round if you bid <b>successfully</b> to
    reduce the information level:
  </p>

  <br>

  <style type="text/css">
  .tg  {border:none;border-collapse:collapse;border-spacing:0;}
  .tg td{border-style:solid;border-width:0px;font-family:Arial, sans-serif;font-size:14px;overflow:hidden;
    padding:10px 5px;word-break:normal;}
  .tg th{border-style:solid;border-width:0px;font-family:Arial, sans-serif;font-size:14px;font-weight:normal;
    overflow:hidden;padding:10px 5px;word-break:normal;}
  .tg .tg-baqh{text-align:center;vertical-align:center}
  .tg .tg-l93j{border-color:inherit;font-size:16px;font-weight:bold;text-align:center;vertical-align:center}
  .tg .tg-c3ow{border-color:inherit;text-align:left; text-indent: 20px; vertical-align:center}
  .tg .tg-rvyq{border-color:inherit;font-style:italic;font-weight:bold;text-align:center;vertical-align:center}
  </style>
  <table class="tg">
  <thead>
    <tr>
      <th class="tg-l93j" style="border-right: double; border-bottom: thin solid black"></th>
      <th class="tg-rvyq" style="border-bottom: thin solid black">All Citizens</th>
    </tr>
  </thead>
  <tbody>
    <tr style="border-bottom: double">
      <td class="tg-rvyq" style="border-right: double; padding-right: 15px">Information from <br> Messenger/Loudspeaker</td>
      <td class="tg-c3ow" style="padding: 25px ">
        <br>

        <span style="font-size: medium">

        {{ if player.reduced_treatment == 0 }}
          <i>(No messenger comes).</i> <br><br>

          <i>
            You do not have any information about what the other citizens may know.
          </i>

        {{ elif player.reduced_treatment == 1 }}
          <i>(A messenger comes).</i> <br><br>

          <ol>
            <li> You are shown a message with the word 'Protest'. </li>
          </ol>

          <i>
            You do not have any information about what the other citizens may know.
          </i>

        {{ elif player.reduced_treatment == 2 }}

          <i>(A messenger comes).</i> <br><br>

          <ol>
            <li> You are shown a message with the word 'Protest'. </li>
            <li> You are told that all the other citizens have seen the same message. </li>
          </ol>

          <i>
            You do not have any more information about what the other citizens may know.
          </i>

        {{ else }}

          <i>
            (A messenger comes).</i> <br><br>

        <ol>
            <li> You are shown a message with the word 'Protest'. </li>
            <li> You are told that all the other citizens have seen the same message. </li>
            <li> You are told that all the other citizens know that you have seen the same message. </li>
        </ol>

          <i>
            You do not have any more information about what the other citizens may know.
          </i>

        {{ endif }}

      </td>

    </tr>
    <tr>

    </tr>
      <td class="tg-rvyq" style="border-right: double; padding: 25px">Corresponding Information Level</td>
      <td class="tg-c3ow" style="padding: 25px; text-align: center; font-size: medium" >
          <i><b>Level {{ player.reduced_treatment }}</i></b>
        </td>

  </tbody>
  </table>

  <br>

  <p>
      What do you think is the likelihood that all four citizens will choose to protest with this information?
  </p>

  <input type="range" style="width: 500px" name="coord_prob_low" min="0" max="100" step="5" value="0" oninput="updateDescription2(this)">
          <p id="description2"></p>

          <script>
              let description2 = document.getElementById('description2');
              function updateDescription2(input) {
                  let prob = parseInt(input.value);
                  description2.innerText = `There is a ${prob}% chance that they all protest.`
              }
          </script>

  <div id="slowAppear2">

    <button type="button" class="btn btn-primary btn-large" onclick="showHide2()"> Go to bid </button>

  </div>

  <div id="revealMessage2" style="display:none">
    <br>


    <p>
        You can now make your decision by entering the amount in dollars that you would like to bid in the box below.
    </p>

    <p>
        Remember that in the main rounds, if your bid is accepted, the price will be subtracted from your payoff for this round.
    </p>

    {{ formfield 'bid' }}

    {{ next_button }}

  </div>

</div>

{{ endblock }}