{% extends "double_auction/Page.html" %}
{% load staticfiles otree %}

{% block title %}
Online Market
{% endblock %}

{% block content %}

<h4>The computer randomly selected round {{ chosenRoundDisplay }} to count for your payment. You earned {{ chosen_payoff }} which equals {{ real_world_reward }}.</h4>

<table id="payoff_table" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Round #</th>
            <th>{% if participant.vars.role == "buyer" %}
                Valuation
                {% else %}
                Cost
                {% endif %}
            </th>
            <th>Trading Price</th>
            <th>Payoff</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(payoff, index) in roundsPayoff" v-bind:class="{ warning: payoff.test_round, 'bg-success': index+1 === chosenRound }">
            <td>${ payoff.round_number }  <span v-if="payoff.test_round" class="badge badge-info">Test</span></td>
            <td>${ payoff.valuation }</td>
            <td>${ payoff.trading_price }</td>
            <td>${ payoff.payoff }</td>
        </tr>
    </tbody>
</table>

    {% next_button %}
{% endblock %}

{% block scripts %}
<script>
    var roundsPayoff = {{ rounds_payoff | json }};
    var chosenRound = {{ participant.vars.chosen_round }};
</script>
<script src="{% static 'double_auction/endResults.js' %}" charset="utf-8"></script>
{% endblock %}

{% block styles %}
<style type="text/css">
    .otree-title {
        text-align: center;
    }
</style>
{% endblock %}