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

{{ block styles }}
<style>
    /* Loader styles */
    .loader {
        display: inline-flex;
        align-items: center;
        justify-content: right;
    }
    .loader__dot {
        animation: 1s blink infinite;
    }
    .loader__dot:nth-child(2) {
        animation-delay: 250ms;
    }
    .loader__dot:nth-child(3) {
        animation-delay: 500ms;
    }
    @keyframes blink {
        50% { color: transparent; }
    }
</style>
{{ 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%"></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>
        <td colspan="3" style="text-align: center">
            <div class="loader">
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            </div>
            <div class="loader">Drawing a ball from the urn for the 2nd quarter
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            </div>
        </td>
        <td style="background-color: #ffdcc0; text-align: center">
            <div class="loader">
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            </div>
        </td>
        <td style="width: 10%; text-align: right"></td>
    </tr>
</table>

{{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="width: 10%; 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 colspan="3" style="text-align: center">
            <div class="loader">
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            </div>
            <div class="loader">Drawing a ball from the urn for the 2nd quarter
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            </div>
        </td>
        <td style="background-color: #ffdcc0; text-align: center">
            <div class="loader">
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            </div>
        </td>
        <td style="width: 10%; text-align: right"></td>
    </tr>
</table>

{{endif}}

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



{{ endblock }}