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

{{ block content }}

<script>
  // Executes function that reverses table rows on page load
  document.addEventListener("DOMContentLoaded", function () {
    reverseTableRows("historyBody");
    reverseTableRows("historyBodyWithPayoffs");
  });

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

  // Reverses table rows
  function reverseTableRows(id) {
    // Load existing table body
    var newTbody = document.createElement("tbody");

    // Create new table body
    var oldTbody = document.getElementById(id);

    // Fill new table body with reversed rows
    var rows = oldTbody.rows;
    var i = rows.length - 1;
    while (i >= 0) {
      newTbody.appendChild(rows[i]);
      i -= 1;
    };

    // Replace old table body with new one
    oldTbody.parentNode.replaceChild(newTbody, oldTbody);
  };

  // Shows / hides payoff info
  var payoffsShown = false;
  function showPayoffs() {
    // Get all relevant elements
    var historyHeader = document.getElementById("historyHeader");
    var historyWithPayoffs = document.getElementById("historyWithPayoffs");
    var history = document.getElementById("history");
    var toggleButton = document.getElementById("togglePayoffs");

    // If payoffs toggled of, turn them on
    if (!payoffsShown) {
      // Change header and button text
      historyHeader.innerHTML = "Choices and payoffs in previous periods:";
      toggleButton.innerHTML = "Hide all previous payoffs";

      // Hide table without payoffs
      history.style.display = "none";

      // Show table with payoffs
      historyWithPayoffs.style.display = "table";
      historyWithPayoffs.style.width = "70%";

      // Change flag
      payoffsShown = true;
    }
    // If payoffs toggled on, turn them off
    else {
      // Change header and button text
      historyHeader.innerHTML = "Choices in previous periods:";
      toggleButton.innerHTML = "Show all previous payoffs";

      // Show table without payoffs
      history.style.display = "table";
      history.style.width = "70%";

      // Hide table with payoffs
      historyWithPayoffs.style.display = "none";

      // Change flag
      payoffsShown = false;
    };
  };

  // Shows / hides instructions
  var instrShown = false;
  function showInstr() {
    // Get all relevant elements
    var instr = document.getElementById("instructions");
    var toggleButton = document.getElementById("toggleInstr");

    // If not yet shown, display
    if (!instrShown) {
      // Show instructions
      instr.style.display = "block";

      // Change button text
      toggleButton.innerHTML = "Hide instructions";

      // Update flag
      instrShown = true;
    }
    // If already shown, hide
    else {
      // Hide instructions
      instr.style.display = "none";

      // Change button text
      toggleButton.innerHTML = "Show instructions";

      // Update flag
      instrShown = false;
    };
  };
</script>

<style>
  #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;
    }
  }

  .toggle {
    cursor: pointer;
    float: right;
    background-color: #666666;
    color: white;
    padding: 7px 10px;
    border-radius: 5px;
    margin-left: 15px;
  }

  .payoff {
    display: none;
  }

  #instructions {
    display: none;
  }

  .customTable th {
    background-color: rgb(240, 240, 240);
    border: 1px solid black;
    padding: 2px 5px;
  }

  .customTable td {
    border: 1px solid black;
    padding: 2px 5px;
  }

  .spacer {
    height: 7px;
  }
</style>

<!-- UPPER SECTION -->

<!-- TIMEOUT MESSAGE -->
<div id="timeout">
  <h4>Please make a decision now.</h4>
  <br>
</div>

<!-- ROUND FEEDBACK -->
You are <b style="color: #295dcf;">Participant {{ player.role }}</b>.

<br><br>

{{ formfields }}

<br><br>

{{ next_button }}

{{ if subsession.round_number > 1 }}
<hr>
<br>

<!-- LOWER SECTION -->
<h4 id="historyHeader">Choices in previous periods:</h4>

<span class="toggle" id="toggleInstr" onclick="showInstr()">Show instructions</span>
<span class="toggle" id="togglePayoffs" onclick="showPayoffs()">Show all previous
  payoffs</span>
<br><br>

<!-- INSTRUCTIONS -->
<div id="instructions">

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


<!-- TABLE WITH PREVIOUS CHOICES AND PAYOFFS -->
<table class="customTable" id="historyWithPayoffs" style="display: none;">
  <!-- TABLE HEADER -->
  <tr>
    <th rowspan="2" style="background-color: #d3d3d3;vertical-align: top; width: 16%;">Period</th>
    <th colspan="2" style="background-color: #d3d3d3; width: 18%;">Participant a {{ if player.role ==
      'a' }} (<span style="color: #295dcf;">You</span>) {{ endif }}</th>
    <th colspan="2" style="background-color: #d3d3d3; width: 18%;">Participant b {{ if player.role ==
      'b' }} (<span style="color: #295dcf;">You</span>) {{ endif }}</th>
    <th colspan="2" style="background-color: #d3d3d3; width: 18%;">Participant c {{ if player.role ==
      'c' }} (<span style="color: #295dcf;">You</span>) {{ endif }}</th>
  </tr>
  <tr>
    <th>Choice</th>
    <th style="font-weight: normal;">Payoff</th>
    <th>Choice</th>
    <th style="font-weight: normal;">Payoff</th>
    <th>Choice</th>
    <th style="font-weight: normal;">Payoff</th>
  </tr>
  <tr class="spacer"></tr>

  <!-- TABLE BODY -->
  <tbody id="historyBodyWithPayoffs">
    {{ for g in group.in_previous_rounds() }}
    <tr>
      <td>{{ g.round_number }}</td>

      {{ for p in g.get_players() }}
      <td style="font-weight: bold;">{{ p.choice }}</td>
      <td>{{ p.payoff_without_currency }}</td>
      {{ endfor }}

    </tr>
    {{ endfor }}
  </tbody>

  <!-- TABLE SUM -->
  <tr class="spacer"></tr>
  <tr>
    <td>Total payoffs</td>
    <td></td>
    <td>{{ total_prev_payoff_A }}</td>
    <td></td>
    <td>{{ total_prev_payoff_B }}</td>
    <td></td>
    <td>{{ total_prev_payoff_C }}</td>
  </tr>
</table>



<!-- TABLE WITH PREVIOUS CHOICES -->
<table class="customTable" id="history" style="width: 70%;">
  <!-- TABLE HEADER -->
  <tr>
    <th style="width: 16%;">Period</th>
    <th style="width: 18%;">Participant a {{ if player.role ==
      'a' }} (<span style=" color: #295dcf;">You</span>) {{ endif }}</th>
    <th style="width: 18%;">Participant b {{ if player.role ==
      'b' }} (<span style="color: #295dcf;">You</span>) {{ endif }}</th>
    <th style="width: 18%;">Participant c {{ if player.role ==
      'c' }} (<span style="color: #295dcf;">You</span>) {{ endif }}</th>
  </tr>
  <tr class="spacer"></tr>

  <!-- TABLE BODY -->
  <tbody id="historyBody">
    {{ for g in group.in_previous_rounds() }}
    <tr>
      <td>{{ g.round_number }}</td>

      {{ for p in g.get_players() }}
      <td style="font-weight: bold;">{{ p.choice }}</td>
      {{ endfor }}

    </tr>
    {{ endfor }}
  </tbody>
</table>

{{ endif }}

{{ endblock }}