{% load otree %}
<style>
   table,
   table tr th,
   table {
      border-collapse: separate;
      border-spacing: 0px; 
      border: 1px solid; 
   }
   td {
      border: 1px solid;
   }

   /*选项区*/
   #id_contribution {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      max-height: 300px;
      text-align: initial;
      align-content: space-around;
   }

   #form {
      display: flex;
      align-items: center;
      justify-content: space-around;
      text-align: center;
   }

   .form-check {
      max-width: 80px;
   }

   thead {
      line-height: 50px;
   }

   thead th:nth-child(2) {
      min-width: 470px;
   }
   .text2{
   margin-left: auto;
   margin-right: auto;
   text-align: left;
   max-width: 90%;
   }
</style>
<p>This is Round {{player.round_number}}, and your cumulative point in Game {{C.GAME_SEQ}} is {{ sum_payoff }}.</p>

<table>
   <thead>
      <tr>
         <th colspan="3" style="width: 100%">Last Round</td>
         <th>This Round</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td style="width: 20%"></td>
         <td style="width: 35%">Contriburions</td>
         <td style="width: 45%">Payoffs</td>
         <td rowspan="4" style="height: 100%">
            {{include "global/Form.html"}}
         </td>
      </tr>
      {% if player.round_number != 1 %}
      <tr>
         <td>You</td>
         <td>{{ my_choice }}</td>
         <td>{{ my_payoff }}</td>
      </tr>
      <tr>
         <td>Coplayer</td>
         <td>{{ other_choice }}</td>
         <td>{{ other_payoff }}</td>
      </tr>
      <tr>
         <td colspan="3">
            <p class="text2">{{ is_successful }}</p>
         </td>
      </tr>
      {% else %}
      <tr>
         <td>You</td>
         <td>--</td>
         <td>--</td>
      </tr>
      <tr>
         <td>Coplayer</td>
         <td>--</td>
         <td>--</td>
      </tr>
      <tr>
         <td colspan="3">
            <p class="text2">Total collective contribution in the common pool was -- , and each person received -- .</p>
         </td>
      </tr>
      {% endif %}
   </tbody>
</table>