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

{% block title %}
       Now you are ready to fill in your receipt.
{% endblock %}

{% block styles %}

    <style>

        button{
        margin:15px;
        padding: 4px 8px;
        font-size: 30px;
    }

    </style>
{% endblock %}

{% block content %}
    <style>
   body {
    font: normal 20px Verdana, Arial, sans-serif;
}

   </style>

    <p>
    컴퓨터가 귀하의 최종 수령액을 결정하기 위해 한 round를 무작위로 뽑았습니다: <span style="font-size:25px">Round {{chosen_round}}.</span><br>
     <span style="font-weight: bold; ">귀하의 최종 수령액은 </span>무작위로 뽑힌 round의 보수인 {{ money|to0 }}원과 <br>
    참가비 {{ session.participation_fee|to0 }}원을 더한 <span style="font-size:30px; font-weight: bold;"> {{ total_payment|to0 }}원</span>입니다.</p>
<br>

<span style="font-size:20px; font-weight: bold"><center> (<span style="font-weight: bold;"> 이 페이지를 사진을 찍어 두십시오. </span> 최소 3주간 보관해 두시길 추천드립니다.
서울대학교 산학협력단에서 제출을 요구할 가능성이 있습니다.)</center> </span>
<br>

    <table id="History" border="2" style=" rules:none; font-size:22px; text-align:center;width: 100%;">
    <tr>
        <td>Round #</td>
        <td>Your Earning</td>
    </tr>
    </table>
<br>

{% endblock %}

{% block scripts %}


<script>
    var Earnings = {{ Earning_dict|safe }};
    var i;
    var tr;
    for (i = 1; i <= {{tot_match_num}}; i++){
        tr = $('<tr/>');
        tr.append("<td>" + i + "</td>");
        tr.append("<td>" + Earnings[i] + "</td>");
        if (i=={{ chosen_round }}){
            tr.css("background-color", "gold");
        }
        $("#History").append(tr);
    }
</script>
{% endblock %}