{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Match #{{ match_num }} Outcome
{% endblock %}

{% block content %}
<style>
body {
    font: normal 20px Verdana, Arial, sans-serif;
}

.results-layout {
    max-width: 1100px;
    margin: 0 auto;
}

.termination-note {
    margin: 0 0 24px;
    font-size: 28px;
    line-height: 1.4;
    text-align: center;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 22px;
    text-align: center;
    border: 2px solid #555;
}

.results-table th,
.results-table td {
    border: 2px solid #555;
    padding: 14px 12px;
    vertical-align: middle;
}

.results-table th {
    font-size: 24px;
    font-weight: 500;
}

.summary-label {
    text-align: center;
    font-size: 22px;
}

.summary-value {
    font-size: 22px;
    font-weight: 700;
}

.results-actions {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.results-actions .otree-btn-next {
    font-size: 26px;
    padding: 10px 28px;
}
</style>

<div class="results-layout">
    {% if match_terminated_after_round1 %}
    <div class="termination-note">
        The match is terminated after Round 1. You receive 0 tokens.
    </div>
    {% endif %}

    {% if player.id_in_group == 1 %}
    <table id="boutcome" class="results-table">
        <tr>
            <th>Round #</th>
            <th>Seller's Offer</th>
            <th>Your Decision</th>
            <th>Your Value B</th>
        </tr>
    </table>
    {% endif %}

    {% if player.id_in_group == 2 %}
    <table id="soutcome" class="results-table">
        <tr>
            <th>Round #</th>
            <th>Your Offer</th>
            <th>Buyer's Decision</th>
            <th>Buyer's Value B</th>
        </tr>
    </table>
    {% endif %}

    <div class="results-actions">
        {% next_button %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    var offers = {{ offer_dict|safe }};
    var actions = {{ action_dict|safe }};
    var i;
    var tr;
    for (i = 0; i < {{round_num}}; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + (i + 1) + "</td>");
        tr.append("<td>" + offers[i] + "</td>");
        tr.append("<td>" + actions[i] + "</td>");
        tr.append("<td>" + {{ value_B_display|safe }} + "</td>");
        if ({{ player.id_in_group }} == 1) {
            $('#boutcome').append(tr);
        }

        if ({{ player.id_in_group }} == 2) {
            $('#soutcome').append(tr);
        }
    }
    if ({{ player.id_in_group }} == 1) {
        $('#boutcome').append(
            '<tr><td colspan="3" class="summary-label">Your earning in this match</td><td class="summary-value">{{match_gain}} tokens</td></tr>'
        );
    }
    if ({{ player.id_in_group }} == 2) {
        $('#soutcome').append(
            '<tr><td colspan="3" class="summary-label">Your earning in this match</td><td class="summary-value">{{match_gain}} tokens</td></tr>'
        );
    }
</script>
{% endblock %}