{{ block title }} {% if participant.is_dropout %} Thank you for having participated in our experiment!
{% else %} Earnings {% endif %} {{ endblock }}
{% block content %}
{% if participant.is_dropout %}
    <p>
        You were excluded from the experiment due to inactivity.
    </p>
    <p>
        Please close this study and return your submission on Prolific by selecting the 'Stop Without Completing' button.
    </p>
{% else %}

    {% if group.number_of_dropouts >= 3 %}
        <p style="color: crimson">
            <b>The Game ended because too many participants dropped out.</b>
        </p>
    {% endif %}

    {% if player.round_number < C.SELECTED_ROUNDS %}
        <p>
            Since the number of rounds played are less than the required number of rounds to determine your payoff,
            we will pay you the participation fee to account for the time you have invested into our experiment.
        </p>

    {% else %}
    <style>
        {{ include 'general/table_design.html' }}
        table {
            border-collapse: collapse;
            width: 80%;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }

        .wide-column {
            width: 180px; /* Adjust the width as needed */
        }

        .wide-cell {
            width: 30%; /* Adjust the width as needed */
        }

        .col_cell {
            width: 16%:
        }

        .last-row {
            background-color: #f2f2f2;
        }

        .second-row {
            background-color: #f9f9f9;
        }

        .no-border {
            border: none;
        }
    </style>

    {% if player.participant.type == 'Citizen' %}
    <p>
    <table>
        <col width="20%">
        <colgroup span="2" width="17.5%"></colgroup>
        <colgroup span="2" width="17.5%"></colgroup>
        <tr>
            <td rowspan="2" class="no-border"></td>
            <td colspan="2" scope="colgroup" style="text-align: center; background-color: #f2f2f2;"><b>GAME</b></td>
            <td colspan="2" scope="colgroup" style="text-align: center; background-color: #f2f2f2;"><b>THOUGHTS</b></td>
        </tr>
        <tr class="second-row">
        <td scope="col"> <b>Round</b> </td>
        <td scope="col"> <b>Income</b></td>
            <td scope="col"> <b>Round</b> </td>
        <td scope="col"> <b>Income</b></td>
      </tr>

      <tr>
        <td scope="row" class="wide-column" style="background-color: #f9f9f9;"> Random Draw 1 </td>
          <td> {{ selected_round_game1 }} </td>
          <td> {{ selected_game_income1 }} Points</td>
          <td>  {{ selected_round_belief1 }} </td>
          <td> {{ selected_beliefs_income1 }} Points</td>
      </tr>
      <tr>
          <td scope="row" style="background-color: #f9f9f9;"> Random Draw 2 </td>
        <td>  {{ selected_round_game2 }} </td>
        <td> {{ selected_game_income2 }} Points</td>
          <td> {{ selected_round_belief2 }} </td>
        <td> {{ selected_beliefs_income2 }} Points</td>
      </tr>
        {% if C.SELECTED_ROUNDS > 2 %}
        <tr>
          <td scope="row" style="background-color: #f9f9f9;"> Random Draw 3 </td>
        <td>  {{ selected_round_game3 }} </td>
        <td> {{ selected_game_income3 }} Points</td>
          <td> {{ selected_round_belief3 }} </td>
        <td> {{ selected_beliefs_income3 }} Points</td>
      </tr>
        {% endif %}
        {% if C.SELECTED_ROUNDS > 3 %}
        <tr>
          <td scope="row" style="background-color: #f9f9f9;"> Random Draw 4 </td>
        <td>  {{ selected_round_game4 }} </td>
        <td> {{ selected_game_income4 }} Points</td>
          <td> {{ selected_round_belief4 }} </td>
        <td> {{ selected_beliefs_income4 }} Points</td>
      </tr>
        {% endif %}
        {% if C.SELECTED_ROUNDS > 4 %}
        <tr>
          <td scope="row" style="background-color: #f9f9f9;"> Random Draw 5 </td>
        <td>  {{ selected_round_game5 }} </td>
        <td> {{ selected_game_income5 }} Points</td>
          <td> {{ selected_round_belief5 }} </td>
        <td> {{ selected_beliefs_income5 }} Points</td>
      </tr>
        {% endif %}
        {% if C.SELECTED_ROUNDS > 5 %}
        <tr>
          <td scope="row" style="background-color: #f9f9f9;"> Random Draw 6 </td>
        <td>  {{ selected_round_game6 }} </td>
        <td> {{ selected_game_income6 }} Points</td>
          <td> {{ selected_round_belief6 }} </td>
        <td> {{ selected_beliefs_income6 }} Points</td>
      </tr>
        {% endif %}
        {% if C.SELECTED_ROUNDS > 6 %}
        <tr>
          <td scope="row" style="background-color: #f9f9f9;"> Random Draw 7 </td>
        <td>  {{ selected_round_game7 }} </td>
        <td> {{ selected_game_income7 }} Points</td>
          <td> {{ selected_round_belief7 }} </td>
        <td> {{ selected_beliefs_income7 }} Points</td>
      </tr>
        {% endif %}
    <tr>
        <td scope="row" colspan="2" class="no-border"></td>
        <td style="background-color: #f9f9f9;"><b>= {{ income_decisions }} Points </b></td>
        <td scope="row" class="no-border"></td>
        <td style="background-color: #f9f9f9;"><b>= {{ participant.income_beliefs }} Points</b></td>
    </tr>
    </table>
    </p>

    {% else %}
    <p>
    <table>
        <col width="30%">
        <colgroup span="2" width="35%"></colgroup>
        <tr>
            <td rowspan="2" class="no-border"></td>
            <td colspan="2" scope="colgroup" style="text-align: center; background-color: #f2f2f2;"><b>GAME</b></td>
        </tr>
        <tr class="second-row">
        <td scope="col"> <b>Round</b> </td>
        <td scope="col"> <b>Income</b></td>
      </tr>

      <tr>
        <td scope="row" class="wide-column" style="background-color: #f9f9f9;"> Random Draw 1 </td>
          <td> {{ selected_round_game1 }} </td>
          <td> {{ selected_game_income1 }} Points</td>
      </tr>
      <tr>
          <td scope="row" style="background-color: #f9f9f9;"> Random Draw 2 </td>
        <td>  {{ selected_round_game2 }} </td>
        <td> {{ selected_game_income2 }} Points</td>
      </tr>
        {% if C.SELECTED_ROUNDS > 2 %}
        <tr>
          <td scope="row" style="background-color: #f9f9f9;"> Random Draw 3 </td>
        <td>  {{ selected_round_game3 }} </td>
        <td> {{ selected_game_income3 }} Points</td>
      </tr>
        {% endif %}
        {% if C.SELECTED_ROUNDS > 3 %}
        <tr>
          <td scope="row" style="background-color: #f9f9f9;"> Random Draw 4 </td>
        <td>  {{ selected_round_game4 }} </td>
        <td> {{ selected_game_income4 }} Points</td>
      </tr>
        {% endif %}
        {% if C.SELECTED_ROUNDS > 4 %}
        <tr>
          <td scope="row" style="background-color: #f9f9f9;"> Random Draw 5 </td>
        <td>  {{ selected_round_game5 }} </td>
        <td> {{ selected_game_income5 }} Points</td>
      </tr>
        {% endif %}
        {% if C.SELECTED_ROUNDS > 5 %}
        <tr>
          <td scope="row" style="background-color: #f9f9f9;"> Random Draw 6 </td>
        <td>  {{ selected_round_game6 }} </td>
        <td> {{ selected_game_income6 }} Points</td>
      </tr>
        {% endif %}
        {% if C.SELECTED_ROUNDS > 6 %}
        <tr>
          <td scope="row" style="background-color: #f9f9f9;"> Random Draw 7 </td>
        <td>  {{ selected_round_game7 }} </td>
        <td> {{ selected_game_income7 }} Points</td>
      </tr>
        {% endif %}
    <tr>
        <td scope="row" colspan="2" class="no-border"></td>
        <td style="background-color: #f9f9f9;"><b>= {{ income_decisions }} Points </b></td>
    </tr>
    </table>
    </p>
    {% endif %}

<p>
    <br>
    Recall, 10 Points are equivalent to £{{ ex_rate }}.
        <table>
            <tr>
                <td><b>Your total income</b> in the randomly selected rounds of the game is: </td>
                <td class="wide-cell"> <b>{{ income_game }} Points</b> </td>
            </tr>
            <tr class="last-row">
                <td> <b>Your earnings</b> from the Game are:</td>
            <td> <b>£{{ earning }}</b> </td>
            </tr>
        </table>
</p>
    {% endif %}
{{ next_button }}
{% endif %}
{% endblock %}