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

{{ block content }}

<style>
/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 650px;
  background-color: #F3EDED;
  color: #000000;
  text-align: justify;
  border-radius: 6px;
  padding: 5px 15px 0px;
  position: absolute;
  z-index: 1;
  bottom: -225px;
  left: -100%;
  margin-left: 370px;
  outline: black solid 1px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  margin-left: -370px;
  width: 0;
  height: 0;
  border-top: 35px solid transparent;
  border-right: 42px solid #B9B3B3;
  border-bottom: 230px solid transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
</style>

<style>
/* Popup container */
.popup1 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup1 .popuptext1 {
  visibility: hidden;
  width: 650px;
  background-color: #F3EDED;
  color: #000000;
  text-align: justify;
  border-radius: 6px;
  padding: 5px 15px 0px;
  position: absolute;
  z-index: 1;
  bottom: -250px;
  left: -100%;
  margin-left: 370px;
  outline: black solid 1px;
}

/* Popup arrow */
.popup1 .popuptext1::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  margin-left: -370px;
  width: 0;
  height: 0;
  border-top: 35px solid transparent;
  border-right: 42px solid #B9B3B3;
  border-bottom: 230px solid transparent;
}

/* Toggle this class - hide and show the popup */
.popup1 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
</style>

<style>
/* Popup container */
.popup2 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup2 .popuptext2 {
  visibility: hidden;
  width: 650px;
  background-color: #F3EDED;
  color: #000000;
  text-align: justify;
  border-radius: 6px;
  padding: 5px 15px 0px;
  position: absolute;
  z-index: 1;
  bottom: -320px;
  left: -100%;
  margin-left: 370px;
  outline: black solid 1px;
}

/* Popup arrow */
.popup2 .popuptext2::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  margin-left: -370px;
  width: 0;
  height: 0;
  border-top: 35px solid transparent;
  border-right: 42px solid #B9B3B3;
  border-bottom: 230px solid transparent;
}

/* Toggle this class - hide and show the popup */
.popup2 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
</style>

<style>
/* Popup container */
.popup3 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup3 .popuptext3 {
  visibility: hidden;
  width: 650px;
  background-color: #F3EDED;
  color: #000000;
  text-align: justify;
  border-radius: 6px;
  padding: 5px 15px 0px;
  position: absolute;
  z-index: 1;
  bottom: -270px;
  left: -100%;
  margin-left: 370px;
  outline: black solid 1px;
}

/* Popup arrow */
.popup3 .popuptext3::after {
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  margin-left: -370px;
  width: 0;
  height: 0;
  border-top: 45px solid transparent;
  border-right: 42px solid #B9B3B3;
  border-bottom: 230px solid transparent;
}

/* Toggle this class - hide and show the popup */
.popup3 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
</style>

<script>
function messagePop() {
  var popup = document.getElementById("messageShow");
  popup.classList.toggle("show");
}
</script>

<script>
function messagePop1() {
  var popup = document.getElementById("messageShow1");
  popup.classList.toggle("show");
}
</script>

<script>
function messagePop2() {
  var popup = document.getElementById("messageShow2");
  popup.classList.toggle("show");
}
</script>

<script>
function messagePop3() {
  var popup = document.getElementById("messageShow3");
  popup.classList.toggle("show");
}
</script>

<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>

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

{{ if player.knowledge_level == 0 }}
  <p>
    In this round, <b>you have not been contacted by a messenger.</b>
  </p>

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


{{ else }}

  {{ if player.knowledge_level < 4 }}
    <p>
      In this round, <b>you have been contacted by a messenger</b>.
    </p>

    <p>
      Click the symbol below to see her message:
    </p>

    <br>

    {{ if player.knowledge_level == 1 }}

      <div class="popup" onclick="messagePop()"> <img style="position:relative; left:120px" src="{{ static 'message.png' }}" alt="MESSAGE" width="100" height="70">
          <span class="popuptext" id="messageShow">
            <p> <i> The messenger gives you the following message: </i></p>

            <img style="position:relative; left:200px" src="{{ static 'protest_message.png' }}" alt="MESSAGE" width="200" height="100">
            <br><br>

            {{ if player.knowledge_level == 1}}
              <p> <i>
                However, she says that she does not have any information about what the other citizens may know.
              </i>  </p>

            <i>This means that:
              <ul>
                  <li>You do not know if the other citizens have seen the same message as you.</li>
                  <li>You do not know if the other citizens are aware that you have seen this message.</li>
              </ul> </i>

            {{ else }}
              <p> <i>
                She also says that she has seen other messengers showing the same message to all 3 of the other citizens.
                However, she does not have any more information about what the other citizens may know.
              </i>  </p>

            <i>This means that:
              <ul>
                  <li>You know that all the other citizens have seen the same message as you.</li>
                  <li>You do not know if the other citizens are aware that you have seen this message.</li>
              </ul> </i>

            {{ endif }}
          </span>
      </div>

      <br><br><br><br>

    {{ elif player.knowledge_level == 2 }}
        <div class="popup1" onclick="messagePop1()"> <img style="position:relative; left:120px" src="{{ static 'message.png' }}" alt="MESSAGE" width="100" height="70">
          <span class="popuptext1" id="messageShow1">
            <p> <i> The messenger gives you the following message: </i></p>

            <img style="position:relative; left:200px" src="{{ static 'protest_message.png' }}" alt="MESSAGE" width="200" height="100">
            <br><br>

          <p> <i>
            She also says that she has seen other messengers showing the same message to all 3 of the other citizens.
            However, she does not have any more information about what the other citizens may know.
          </i>  </p>

        <i>This means that:
          <ul>
              <li>You know that all the other citizens have seen the same message as you.</li>
              <li>You do not know if the other citizens are aware that you have seen this message.</li>
          </ul> </i>

          </span>
      </div>

      <br><br><br><br><br>
    {{ else }}

      <div class="popup2" onclick="messagePop2()"> <img style="position:relative; left:120px" src="{{ static 'message.png' }}" alt="MESSAGE" width="100" height="70">
          <span class="popuptext2" id="messageShow2">
            <p> <i> The messenger gives you the following message: </i></p>

            <img style="position:relative; left:200px" src="{{ static 'protest_message.png' }}" alt="MESSAGE" width="200" height="100">
            <br><br>

            <p> <i>
              She also says that she has seen other messengers showing the same message to all 3 of the other citizens.
              As well as this, she knows that all the other messengers saw her coming to see you with the message, and
              would have told the other citizens this. However, she does not have any more information about what the
                other citizens may know.
            </i>  </p>

            <i>This means that:
              <ul>
                  <li>You know that all the other citizens have seen the same message as you.</li>
                  <li>You know that all the other citizens are aware that you have seen this message.</li>
                  <li>You do not know if the other citizens know that you are aware that they have seen
                    this message.</li>
              </ul>
            </i>

          </span>
      </div>

      <br><br><br><br><br><br><br><br>

    {{ endif }}

  {{ else }}

      <p>
        In this round, you have not been contacted by a messenger. However, <b>the loudspeaker is announcing a message</b>,
        and so you and all the other citizens can hear it.
      </p>

      <p>
        Click the symbol below to see what the loudspeaker says:
      </p>

      <br>

      <div class="popup3" onclick="messagePop3()"> <img style="position:relative; left:75px" src="{{ static 'loudspeaker.png' }}" alt="MESSAGE" width="120" height="100">
        <span class="popuptext3" id="messageShow3">
          <p> <i> The loudspeaker announces the following message: </i></p>

          <img style="position:relative; left:200px" src="{{ static 'protest_message.png' }}" alt="MESSAGE" width="200" height="100">
          <br><br>

          <p> <i> You know that all citizens, including yourself, will have heard the same information from the loudspeaker in this round. </i>  </p>

          <i>This means that:
              <ul>
                  <li>You know that all the other citizens have heard the same message as you.</li>
                  <li>You know that all the other citizens know that you have heard this message.</li>
                  <li>You know that all the other citizens are aware that you know that they have heard
                    this message.</li>
                  <li> ... and so on. </li>
              </ul>
            </i>

        </span>
    </div>

    <br><br><br><br><br><br>

  {{ endif }}

  <br><br><br><br><br><br><br>
  <div id="slowAppear">

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

  </div>

{{ endif }}


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

<p>
  Make your decision by clicking on the button representing your chosen action.
</p>
    <br>

  <button style="margin-left: 75px; margin-right: 125px" name="protest_action" value="0"
          class="btn btn-primary btn-lg btn-block btn-huge"> Don't protest </button>

  <button name="protest_action" value="1" class="btn btn-primary btn-lg btn-block btn-huge"> Protest </button>

  <div>

    <br><br>

  <button type="button" class="btn btn-outline-secondary btn-block" onclick="showHide2()"> Click here to toggle the payoff table </button>

  </div>

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

    {{ include C.instructions_template }}

  </div>


  </div>


{{ endblock }}