{{ block title }}
Period {{ subsession.round_number }} of {{ C.NUM_ROUNDS }}
{{ endblock }}

{{ block content }}

<style>
  .decisions {
    display: table;
    border: 1px solid black;
    border-collapse: collapse;
  }

  .decisions tr {
    display: table-cell;
    border-collapse: collapse;
  }

  .decisions tr td {
    display: block;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    width: 80px;
  }

  .decisions tr th {
    display: block;
    background-color: rgb(240, 240, 240);
    border: 1px solid black;
  }

  #timeout {
    display: none;
    color: red;
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }

  @keyframes animation_blink {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0.1;
    }

    100% {
      opacity: 1;
    }
  }

  #instrToggle {
    cursor: pointer;
    float: right;
    background-color: #196cf9;
    color: white;
    padding: 7px 10px;
    border-radius: 5px;
  }
</style>

<script>
  var instructionsToggled = false; // instructions not shown at beginning

  // "Show/Hide Instructions" button pressed
  function toggleInstr() {
    instructions = document.getElementById("instructions"); // instructions div
    instrToggle = document.getElementById("instrToggle"); // button div

    // If instructions not yet shown
    if (!instructionsToggled) {
      instructions.style.display = "block"; // show instructions
      instructionsToggled = true; // change flag
      instrToggle.innerHTML = "Hide Instructions"; // change button text
    }
    // If instructions are being shown
    else {
      instructions.style.display = "none"; // hide instructions
      instructionsToggled = false; // change flag
      instrToggle.innerHTML = "Show Instructions"; // change button text
    }
  };

  // Display blinking timeout message after 45s
  setTimeout(
    function () {
      document.getElementById('timeout').style.display = 'block';
    }, 45 * 1000);
</script>

<!-- Blinking timeout message -->
<div id="timeout">
  <br>
  <h4>Please click 'next' to continue.</h4>
  <br><br>
</div>

<!-- "Show/Hide Instructions" button-->
<div id="instrToggle" onclick="toggleInstr()">Show Instructions</div>
<br><br>

<!-- Instructions div -->
<div id="instructions" style="display: none;">

  <div style="border: 2px solid black; padding: 5px;">
    Your <b><u>payoff</u></b> in a period depends on the following:

    <br><br>

    (1) How many other Participants in your group have chosen the same Field as you, and (2) whether you are on <b>your
      field</b> (<b style="color: #295dcf;">Field {{ player.role.upper }}</b>), or on one of the other fields (<b>Fields
      {{ if player.role == 'a' }}B and C{{ elif player.role == 'b' }}A and C{{ else }}A and B{{ endif }}</b>).

    {{ if group.high_payoffs }}
    <ul>
      <li>If <b>no</b> other participant has chosen the same field as you, you will receive <b>0 points</b> (no matter
        if
        you are on your field or on someone else's field).</li>
      <li>If <b>one</b> other participant has chosen the same field as you, you will receive <b>10 points</b> if it is
        someone else's field, and <b>30 points</b> if it is your field.</li>
      <li>If <b>two</b> other participants have chosen the same field as you, you will receive <b>20 points</b> if it is
        someone else's field, and <b>60 points</b> if it is your field.</li>
    </ul>
    {{ else }}
    <ul>
      <li>If <b>no</b> other participant has chosen the same field as you, you will receive <b>0 points</b> (no matter
        if
        you are on your field or on someone else's field).</li>
      <li>If <b>one</b> other participant has chosen the same field as you, you will receive <b>10 points</b> if it is
        someone else's field, and <b>11 points</b> if it is your field.</li>
      <li>If <b>two</b> other participants have chosen the same field as you, you will receive <b>20 points</b> if it is
        someone else's field, and <b>22 points</b> if it is your field.</li>
    </ul>
    {{ endif }}

    <br>

    Moreover, in every period you will receive <b><u>additional points</u></b> that are independent of your choices. In
    particular:

    {{ if group.lumpsum }}
    <ul>
      <li>Participant <b>a</b> {{ if player.role == 'a' }} (<b style="color: #295dcf;">You</b>) {{ endif }} will receive
        <b>30 additional points</b> per period.
      </li>
      <li>Participant <b>b</b> {{ if player.role == 'b' }} (<b style="color: #295dcf;">You</b>) {{ endif }} will receive
        <b>10 additional points</b> per period.
      </li>
      <li>Participant <b>c</b> {{ if player.role == 'c' }} (<b style="color: #295dcf;">You</b>) {{ endif }} will receive
        <b>10 additional points</b> per period.
      </li>
    </ul>
    {{ else }}
    <ul>
      <li>Participant <b>a</b> {{ if player.role == 'a' }} (<b style="color: #295dcf;">You</b>) {{ endif }} will receive
        <b>10 additional points</b> per period.
      </li>
      <li>Participant <b>b</b> {{ if player.role == 'b' }} (<b style="color: #295dcf;">You</b>) {{ endif }} will receive
        <b>10 additional points</b> per period.
      </li>
      <li>Participant <b>c</b> {{ if player.role == 'c' }} (<b style="color: #295dcf;">You</b>) {{ endif }} will receive
        <b>10 additional points</b> per period.
      </li>
    </ul>
    {{ endif }}
  </div>

  <br><br>
</div>

<!-- Round rewards div -->
<div id="roundReward">
  <h4>This round, the payoffs were as follows:</h4>
  <br>

  <div id="controlQuestions" style="float: left; width: 50%;">
    Participants' <b>decisions</b> in this period:
    <ul>
      {{ for p in group.get_players() }}
      <li><b>Participant {{ p.role }}</b> {{ if player.role == p.role }}
        (<b style="color: #295dcf;">You</b>) {{ endif }} has chosen <b>{{ p.field_choice }}</b></li>
      {{ endfor }}
    </ul>
  </div>

  <div id="controlQuestions" style="margin-left: 52%;">
    Participants' <b>payoffs</b> in this period:
    <ul>
      {{ for p in group.get_players() }}
      <li><b>Participant {{ p.role }}</b> {{ if player.role == p.role }} (<b style="color: #295dcf;">You</b>) {{ endif
        }}
        has earned a payoff of <b>{{ p.payoff }}</b>.</li>
      {{ endfor }}
    </ul>
  </div>

  <br>
  <hr>
  <br>

  Participants <b>decisions</b> in all past periods:
  <br><br>
  <table class="decisions" cellpadding="5">
    <tr>
      <th>Period:</th>
      <th>Participant a {{ if player.role ==
        'a' }} (<span style="color: #295dcf;">You</span>) {{ endif }}:</th>
      <th>Participant b {{ if player.role ==
        'b' }} (<span style="color: #295dcf;">You</span>) {{ endif }}:</th>
      <th>Participant c {{ if player.role ==
        'c' }} (<span style="color: #295dcf;">You</span>) {{ endif }}:</th>
    </tr>

    {{ for g in group.in_all_rounds() }}
    <tr>
      <td>{{ g.round_number }}</td>

      {{ for p in g.get_players() }}
      <td>{{ p.field_choice }}: {{ p.payoff }}</td>
      {{ endfor }}

    </tr>
    {{ endfor }}

  </table>


  <br><br>

  {{ next_button }}
</div>

{{ endblock }}