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

{% block title %}
    Job Market Signaling: Round {{ player.round_number }}
{% endblock %}

{% block content %}

    {% if player.round_number != 3 %}
        <p>
            You are a {{ group.type }}. That means that you are in the payoff matrix on the {{ if group.type == "Slacker" }}left {{ else }} right {{ endif }}below. However, the employer doesn’t know this. 
        </p>
        {% formfield player.choice label="Please choose your courses." %}

        <table class="table-sm table-bordered d-sm-inline-block">
            <thead>
                <tr>
                    <th></th>
                    <th colspan="3" scope="col" class="text-center">Slacker (probability 0.6)<br></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th rowspan="3" scope="row" class="align-middle text-center">Employer</th>
                    <td></td>
                        <th>Easy</th>
                        <th>Difficult</th>
                </tr>
                <tr>
                    <th>Manager</th>
                        <td>(0, 100)</td>
                        <td>(0, 50)</td>
                </tr>
                <tr>
                    <th>Clerk</th>
                        <td>(60, 60)</td>
                        <td>(60, 10)</td>
                </tr>
            </tbody>
        </table>
        <table class="table-sm table-bordered d-sm-inline-block">
            <thead>
                <tr>
                    <th></th>
                    <th colspan="3" scope="col" class="text-center">Go-getter (probability 0.4)<br></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th rowspan="3" scope="row" class="align-middle text-center">Employer</th>
                    <td></td>
                        <th>Easy</th>
                        <th>Difficult</th>
                </tr>
                <tr>
                    <th>Manager</th>
                        <td>(100, 100)</td>
                        <td>(100, 80)</td>
                </tr>
                <tr>
                    <th>Clerk</th>
                        <td>(60, 60)</td>
                        <td>(60, 40)</td>
                </tr>
            </tbody>
        </table>
    {% else %}
        <p>
            You are a {{ group.type }}. In this round, you will choose how to message your employer about your applicant
            type. The message sent does not affect your payoff.
        </p>
        <p>
        Please choose your message:
        </p><br>
        {% formfields %}

        <table class="table-sm table-bordered d-sm-inline-block">
            <thead>
                <tr>
                    <th></th>
                    <th colspan="2" scope="col" class="text-center">Slacker (probability 0.6)<br></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th rowspan="2" scope="row" class="align-middle text-center">Employer</th>
                    <th>Manager</th>
                    <td>(0, 100)</td>
                </tr>
                <tr>
                    <th>Clerk</th>
                    <td>(60, 60)</td>
                </tr>
            </tbody>
        </table>
        <table class="table-sm table-bordered d-sm-inline-block">
            <thead>
                <tr>
                    <th></th>
                    <th colspan="2" scope="col" class="text-center">Go-getter (probability 0.4)<br></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th rowspan="2" scope="row" class="align-middle text-center">Employer</th>
                    <th>Manager</th>
                    <td>(100, 100)</td>
                </tr>
                <tr>
                    <th>Clerk</th>
                    <td>(60, 60)</td>
                </tr>
            </tbody>
        </table>
    {% endif %}

    {% next_button %}
{% endblock %}