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

{% block title %}
    Asymmetric Matching Pennies: Stage {{subsession.stage}}, Round {{ round }}
{% endblock %}

{% block content %}
    {% if player.role == 'Row' %}
        You are now the <b>Row</b> Player.
    {% else %}
        You are now the <b>Column</b> Player.
    {% endif %}

    {% formfields %}
    {% if subsession.stage == 1 %}
        <table class="table table-xs table-bordered">
            <thead>
                <tr>
                    <th></th>
                    <th colspan="3" scope="col" class="text-center">Column<br></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th rowspan="3" scope="row" class="align-middle text-center">Row</th>
                    <td></td>
                        <th>Heads</th>
                        <th>Tails</th>
                </tr>
                <tr>
                    <th>Heads</th>
                    <td>(1, 0)</td>
                    <td>(0, 1)</td>
                </tr>
                <tr>
                    <th>Tails</th>
                    <td>(0, 1)</td>
                    <td>(1, 0)</td>
                </tr>
            </tbody>
        </table>
    {% elif subsession.stage == 2 %}
        <table class="table table-xs table-bordered">
            <thead>
                <tr>
                    <th></th>
                    <th colspan="3" scope="col" class="text-center">Column<br></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th rowspan="3" scope="row" class="align-middle text-center">Row</th>
                    <td></td>
                        <th>Heads</th>
                        <th>Tails</th>
                </tr>
                <tr>
                    <th>Heads</th>
                    <td>(9, 0)</td>
                    <td>(0, 1)</td>
                </tr>
                <tr>
                    <th>Tails</th>
                    <td>(0, 1)</td>
                    <td>(1, 0)</td>
                </tr>
            </tbody>
        </table>
    {% else %}
        <table class="table table-xs table-bordered">
            <thead>
                <tr>
                    <th></th>
                    <th colspan="3" scope="col" class="text-center">Column<br></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th rowspan="3" scope="row" class="align-middle text-center">Row</th>
                    <td></td>
                        <th>Heads</th>
                        <th>Tails</th>
                </tr>
                <tr>
                    <th>Heads</th>
                    <td>(0.5, 0)</td>
                    <td>(0, 1)</td>
                </tr>
                <tr>
                    <th>Tails</th>
                    <td>(0, 1)</td>
                    <td>(1, 0)</td>
                </tr>
            </tbody>
        </table>
    {% endif %}

    {% next_button %}
{% endblock %}