{{ block title }}
    Development of the value of your asset
{{ endblock }}

{{ block content }}

{{if player.time_pressure == 1}}

<table style="width:90%" class="center">
    <tr>
        <td style="width: 20%; text-align: right"></td>
        <td style="width: 10%; text-align: center"></td>
        <td style="width: 35%; text-align: left"></td>
        <td style="width: 25%; background-color: lightgray; font-size: 15px; text-align: center"><b>1,000</b></td>
        <td style="width: 10%; text-align: right">points</td>
    </tr>
    <tr>
        <td style="width: 20%"></td>
        <td style="width: 10%"></td>
        <td style="width: 35%"></td>
        <td style="width: 25%; font-size:15px; text-align: center"> &#8675 </td>
        <td style="width: 10%; text-align: right"></td>
    </tr>
    <tr>
        {{if player.d_qrt1 == 100}}
        <td style="text-align: right">1st quarter</td>
        <td style="text-align: center"><img src="{{ static 'blue.png' }}" width="35" height="35"/></td>
        <td style="text-align: left">Asset value goes <b>UP</b> to be </td>
        <td style="background-color: lightblue; font-size: 15px; text-align: center"><b>{{player.qrt1}}</b></td>
        <td style="text-align: right">points</td>
        {{else}}
        <td style="text-align: right">1st quarter</td>
        <td style="text-align: center"><img src="{{ static 'red.png' }}" width="35" height="35"/></td>
        <td style="text-align: left">Asset value goes <b>DOWN</b> to be </td>
        <td style="background-color: lightcoral; font-size: 15px; text-align: center"><b>{{player.qrt1}}</b></td>
        <td style="text-align: right">points</td>
        {{endif}}
    </tr>
    <tr>
        <td style="width: 20%"></td>
        <td style="width: 10%"></td>
        <td style="width: 35%"></td>
        <td style="width: 25%; font-size:15px; text-align: center"> &#8675 </td>
        <td style="width: 10%; text-align: right"></td>
    </tr>
    <tr>
        {{if player.d_qrt2 == 100}}
        <td style="text-align: right">2nd quarter</td>
        <td style="text-align: center"><img src="{{ static 'blue.png' }}" width="35" height="35"/></td>
        <td style="text-align: left">Asset value goes <b>UP</b> to be </td>
        <td style="background-color: lightblue; font-size: 15px; text-align: center"><b>{{player.qrt2}}</b></td>
        <td style="text-align: right">points</td>
        {{else}}
        <td style="text-align: right">2nd quarter</td>
        <td style="text-align: center"><img src="{{ static 'red.png' }}" width="35" height="35"/></td>
        <td style="text-align: left">Asset value goes <b>DOWN</b> to be </td>
        <td style="background-color: lightcoral; font-size: 15px; text-align: center"><b>{{player.qrt2}}</b></td>
        <td style="text-align: right">points</td>
        {{endif}}
    </tr>
    <tr>
        <td style="width: 20%"></td>
        <td style="width: 10%"></td>
        <td style="width: 35%"></td>
        <td style="width: 25%; font-size:15px; text-align: center"> &#8675 </td>
        <td style="width: 10%; text-align: right"></td>
    </tr>
    <tr>
        {{if player.d_qrt3 == 100}}
        <td style="text-align: right">3rd quarter</td>
        <td style="text-align: center"><img src="{{ static 'blue.png' }}" width="35" height="35"/></td>
        <td style="text-align: left">Asset value goes <b>UP</b> to be </td>
        <td style="background-color: lightblue; font-size: 15px; text-align: center"><b>{{player.qrt3}}</b></td>
        <td style="text-align: right">points</td>
        {{else}}
        <td style="text-align: right">3rd quarter</td>
        <td style="text-align: center"><img src="{{ static 'red.png' }}" width="35" height="35"/></td>
        <td style="text-align: left">Asset value goes <b>DOWN</b> to be </td>
        <td style="background-color: lightcoral; font-size: 15px; text-align: center"><b>{{player.qrt3}}</b></td>
        <td style="text-align: right">points</td>
        {{endif}}
    </tr>
    <tr>
        <td style="width: 20%"></td>
        <td style="width: 10%"></td>
        <td style="width: 35%"></td>
        <td style="width: 25%; font-size:15px; text-align: center"> &#8675 </td>
        <td style="width: 10%; text-align: right"></td>
    </tr>
    <tr>
        {{if player.d_qrt4 == 100}}
        <td style="text-align: right"><b>4th quarter</b></td>
        <td style="text-align: center"><img src="{{ static 'blue.png' }}" width="35" height="35"/></td>
        <td style="text-align: left">Asset value goes <b>UP</b> to be </td>
        <td style="background-color: lightblue; font-size: 15px; text-align: center"><b>{{player.qrt4}}</b></td>
        <td style="text-align: right">points</td>
        {{else}}
        <td style="text-align: right"><b>4th quarter</b></td>
        <td style="text-align: center"><img src="{{ static 'red.png' }}" width="35" height="35"/></td>
        <td style="text-align: left">Asset value goes <b>DOWN</b> to be </td>
        <td style="background-color: lightcoral; font-size: 15px; text-align: center"><b>{{player.qrt4}}</b></td>
        <td style="text-align: right">points</td>
        {{endif}}
    </tr>
</table>
<br>
{{else}}
<table style="width:90%" class="center">
    <tr>
        <td style="width: 20%; text-align: right"></td>
        <td style="width: 10%; text-align: center"></td>
        <td style="width: 35%; text-align: left"></td>
        <td style="width: 25%; background-color: lightgray; font-size: 15px; text-align: center"><b>1,000</b></td>
        <td style="width: 10%; text-align: right">points</td>
    </tr>
    <tr>
        <td style="width: 20%"></td>
        <td style="width: 10%"></td>
        <td style="width: 35%"></td>
        <td style="width: 25%; font-size:15px; text-align: center"> &#8675 </td>
        <td style="width: 10%; text-align: right"></td>
    </tr>
    <tr>
        <td style="text-align: right">1st quarter</td>
        <td style="text-align: center"></td>
        <td style="text-align: left"></td>
        <td style="background-color: #ffdcc0; font-size: 15px; text-align: center"></td>
        <td style="text-align: right"></td>
    </tr>
    <tr>
        <td style="width: 20%"></td>
        <td style="width: 10%"></td>
        <td style="width: 35%"></td>
        <td style="width: 25%; font-size:15px; text-align: center"> &#8675 </td>
        <td style="width: 10%; text-align: right"></td>
    </tr>
    <tr>
        <td style="text-align: right">2nd quarter</td>
        <td style="text-align: center"></td>
        <td style="text-align: left"></td>
        <td style="background-color: #ffdcc0; font-size: 15px; text-align: center"></td>
        <td style="text-align: right"></td>
    </tr>
    <tr>
        <td style="width: 20%"></td>
        <td style="width: 10%"></td>
        <td style="width: 35%"></td>
        <td style="width: 25%; font-size:15px; text-align: center"> &#8675 </td>
        <td style="width: 10%; text-align: right"></td>
    </tr>
    <tr>
        <td style="text-align: right">3rd quarter</td>
        <td style="text-align: center"></td>
        <td style="text-align: left"></td>
        <td style="background-color: #ffdcc0; font-size: 15px; text-align: center"></td>
        <td style="text-align: right"></td>
    </tr>
    <tr>
        <td style="width: 20%"></td>
        <td style="width: 10%"></td>
        <td style="width: 35%"></td>
        <td style="width: 25%; font-size:15px; text-align: center"> &#8675 </td>
        <td style="width: 10%; text-align: right"></td>
    </tr>
    <tr>
        <td style="text-align: right"><b>End of this year</b></td>
        <td style="text-align: center"></td>
        <td style="text-align: left"></td>
        <td style="background-color: #ffdcc0; font-size: 15px; text-align: center"><b>{{player.qrt4}}</b></td>
        <td style="text-align: right">points</td>
    </tr>
</table>
<br>
{{endif}}

<style>
    .otree-timer {
        display: none;
    }
    .center {
  margin-left: auto;
  margin-right: auto;
    }
</style>

{{next_button}}
{{ endblock }}