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

{% block title %}
    Practice Game 2 - Page 3 of 3
{% endblock %}

{% block content %}

<!-- Player's color info for practice -->
<div class="card my-5 card-screen">
    {% if player.id_in_group == 1 %}
    <div class="card-header">For the practice game, you are RED player</div>
    {% else %}
    <div class="card-header">For the practice game, you are BLUE player</div>
    {% endif %}
</div>

<p>Since the game has arrived at its last turn, the game has ended.</p>

<p>
    When this happens, the Large Pile is doubled and automatically assigned to the RED player.<br>
    Likewise, the Small Pile is doubled and automatically assigned to the BLUE player.<br>
</p>
<br>
<p>This means that:</p>
<ul>
    <li>RED player's payoff will be {{ large_pile_practice_pass }}</li>
    <li>BLUE player's payoff will be {{ small_pile_practice_pass }}</li>
</ul>

<p>Below you can see both players' screen.</p>
<p>
    Since no player has decided to take, both players are notified that "Both your opponent and you decided to pass in all rounds".
    Then, both yours and your opponent's payoff are reported on your screen.
</p>

<br>

<p> The RED player will see the following screen:</p>
<br>

<!-- RED player's result screen -->
<div class="player-screen">
<h5>RED player's screen</h5>

    <h4>Results</h4>

<div class="card my-3 card-screen"><div class="card-header">Both your opponent and you decided to pass in all rounds</div></div>
<!--        <p>Your opponent decided to take the large pile.</p>-->
<div class="card my-5 card-screen">
    <div class="card-body">
        <p>Your payoff is: {{ large_pile_practice_pass }}</p>
        <p>Your opponent's payoff is: {{ small_pile_practice_pass }}</p>
    </div>
</div>
</div>

<br>
<p> The BLUE player will see the following screen:</p>
<br>

<!-- BLUE player's result screen -->
<div class="player-screen">

<h5>BLUE player's screen</h5>

    <h4>Results</h4>
<div class="card my-3 card-screen"><div class="card-header">Both your opponent and you decided to pass in all rounds</div></div>
<div class="card my-5 card-screen">
    <div class="card-body">
            <p>Your payoff is: {{ small_pile_practice_pass }}</p>
            <p>Your opponent's payoff is: {{ large_pile_practice_pass }}</p>
        </div>
</div>
</div>

<br>

<p>This completes the practice session.</p>

<!-- If incentive compatible -->
{% if C.INCENTIVE_COMPATIBLE %}
<p>
    You are not being paid for the practice session, but if this were the real game,
    then the payoff displayed in results page would be money you have earned from the game,
    and you would be paid this amount at the end of the experiment.
</p>

<p>
    <!--The total you earn over all {{ C.NUM_ROUNDS }} real games is what you will be paid for your participation in the experiment.-->
    If multiple games are played, then one of the {{ C.NUM_ROUNDS }} real games you play will be selected at random,
    and your final payoff will be the payoff you earned in that game.
</p>
{% endif %}

<p>
<!--        We will now proceed to the second practice game.-->
    <!--Added-->
    We will now proceed to with the real games.
    Once you push the button START REAL GAME below, you will be paired with an opponent and start playing the game.
    {% if C.LAB %}
    If you have any questions, please raise your hand and ask them now,
    as you are not allowed to do so during the real experiment.
    {% endif %}
</p>

    <!-- Start second practice game button -->
    <input class="btn btn-primary btn-large btn-primary next-button otree-btn-next" type="submit" value="Start real game"/>

{% endblock %}