{{ block title }}
    {{ if player.round_number == 1 }}
        Stock 8 - Allocation
    {{ else }}
        Stock 8 - 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>${{ purchase_price }}</b>.
</p>

{{ else }}
<p>
<table class="return-table">
     <tr>
        <th class="return-label">Period</th>
        <th class="return-label">0</th>
        {% for row in rows %}
        <th class="return-label">{{ row.round }}</th>
        {% endfor %}
    </tr>
    <tr>
        <td class="return-label">Price</td>
        <td class="return-value" style="color: black;">${{ purchase_price }}</td>
        {% for row in rows %}
        <td class="return-value" style="color: black;">${{ row.price }}</td>
        {% endfor %}
    </tr>
    <tr>
        <td class="return-label">Per Period Return</td>
        <td class="return-value">&mdash;</td>
        {% for row in rows %}
        <td class="return-value" id="period-return-{{ row.round }}" data-raw="{{ row.period_return_raw }}">{{ row.period_return }} %</td>
        {% endfor %}
    </tr>
    {% if player.participant.treatment == "description_all" %}
    <tr>
        <td class="return-label">Overall Investment Return</td>
        <td class="return-value">&mdash;</td>
        {% for row in rows %}
        <td class="return-value" id="inv-return-{{ row.round }}" data-raw="{{ row.inv_return_raw }}">{{ row.inv_return }} %</td>
        {% endfor %}
    </tr>
    {% endif %}
</table>
</p>
{{ endif }}
    <br>
    {% next_button %}
{{ endblock }}


{% block script %}

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

        .return-table td, .return-table th {
            padding: 6px 14px;
            border: 1px solid #ddd;
            text-align: right;
            min-width: 80px;
            white-space: nowrap;
        }

        .return-table td:not(:first-child),
        .return-table th:not(:first-child) {
            text-align: center;
        }

        .return-table tr:first-child th {
            font-weight: bold;
        }

        .return-table .return-label {
            color: #555;
            text-align: left;
            background-color: #fafafa;
            font-weight: 600;
            white-space: nowrap;
        }

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

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

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

    </style>

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

{% endblock %}