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

{% block title %}
    Outcome
{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{% static 'game/css/game.css' %}">
{% endblock %}

{% block content %}
    <div>
        <p>The computer has randomly four games. For each game a second was randomly selected to determine
            your choice. A column player for that game was also chosen at random. Their move for the corresponding games will
            be displayed along with your move.</p>
    </div>
    <div>
        {% for game in games %}
            <p><b>Game {{ game.round }}</b> was random selected. <b>Second {{ game.random_time }}</b> was randomly selected, during
                which
                {% if game.row_move == 'None' %}
                    <b>you had not yet selected a choice</b>.
                {% else %}
                    <b>your choice was {{ game.row_move }}</b>.
                {% endif %}
                The randomly selected <b>column player's choice was {{ game.column_move }}</b>. The payoff for this game
                is <b>{{ game.payoff }}</b>, or <b>{{ game.payoff_dollars }}</b>.</p>
        {% endfor %}
    </div>
    <div>
        <p>
            <b>Your final payoff is {{ final_payoff }}.</b>
        </p>
    </div>
    <div>
        <button id="next-button" class="otree-btn-next btn btn-dark">Continue</button>
    </div>
{% endblock %}