{{ block title }}
    {{ if player.round_number == 1 }}
        Stock 4 - Allocation
    {{ else }}
        Stock 4 - Period {{ round }}
    {{ endif }}
{{ endblock }}
{{ block content }}

{{ if player.round_number == 1 }}
<p>
  You are allocated this stock now in period 0 for a price of <b>${{ price }}</b>.
</p>

{{ else }}
<p>
<table class="return-table">
    <tr>
        <td class="return-label">Purchase Price:</td>
        <td class="return-value" style="color: black;">${{ purchase_price }}</td>
    </tr>
    <tr>
        <td class="return-label">Current Price:</td>
        <td class="return-value" style="color: black;">${{ price }}</td>
    </tr>
    <tr>
        <td class="return-label">Period {{ round }} Return:</td>
        <td class="return-value" id="period-return" data-raw="{{ period_return_raw }}">{{ period_return }} %</td>
    </tr>
    <tr>
        <td class="return-label">Overall Investment Return:</td>
        <td class="return-value" id="inv-return" data-raw="{{ inv_return_raw }}">{{ inv_return }} %</td>
    </tr>
</table>
</p>
{{ endif }}
    <br>
    {% next_button %}
{{ endblock }}


{% block script %}

   <style>
        .return-table {
            border-collapse: collapse;
            margin: 10px 0;
        }

        .return-table td {
            padding: 4px 0;
        }

        .return-table .return-label {
            padding-right: 16px;
            color: #555;
        }

        .return-table .return-value {
            font-weight: bold;
        }

        .return-value.positive {
            color: #2e7d32;
        }

        .return-value.negative {
            color: #c62828;
        }

    </style>

<script>
    document.querySelectorAll('#period-return, #inv-return').forEach(el => {
        const val = parseFloat(el.dataset.raw);
        el.classList.add(val >= 0 ? 'positive' : 'negative');
    });
</script>

{% endblock %}